检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
路由视图 路由视图是导航组件的一种,通过配置不同页面,在当前可视化页面呈现其它页面效果。该组件可降低对当前页面资源的占用,提升性能。 在大屏设计页面,从“全部组件 > 导航”中,拖拽“路由视图”组件至画布空白区域,如图1。 图1 路由视图 图2 边距样式说明 卡片 卡片是指包裹图
组件间交互 操作场景 组件间交互是指在同一页面中,不同组件之间进行的交互事件。组件和组件之间可互为触发器和响应器,根据用户所定义的事件不同,可定义组件行为、赋值全局变量以及响应自定义动作。 本章节以在同一区域中,添加多个组件,使用tab来切换不同tab页签下需要呈现的组件为例,向您介绍如何设置组件间的交互能力。
分割线 分割线是装饰组件的一种,用于分割组件,起装饰作用,包括分割线和竖分割线。 以分割线16-1为例,在大屏设计页面,从“全部组件 > 装饰”中,拖拽“分割线16-1”组件至画布空白区域,如图1。 图1 分割线16-1 页面背景色设置为白色时,分割线组件很难显示出来。使用该组件时,请避免使用白色背景。
路由导航(示例) 路由导航(示例)是导航组件的一种,通过配置不同的路由页面,快速切换和定位到其它的页面中,给数据大屏提供更多的交互模式。 在大屏设计页面,从“全部组件 > 导航”中,拖拽“路由导航(示例)”组件至画布空白区域,如图1,路由视图的配置介绍,请参见路由视图。 图1 路由导航(示例)
背景图 背景图是装饰组件的一种,用于为可视化应用添加多种类型的背景图片,能够使可视化应用展示更加美观。 以背景图2为例,在大屏设计页面,从“全部组件 > 装饰”中,拖拽“背景图2”组件至画布空白区域,如图1。 图1 背景图2 图2 边距样式说明 卡片 卡片是指包裹图表组件的外层架
图标 图标是装饰组件的一种,用于为可视化应用添加多种类型的图标元素,能够使可视化应用展示更加美观。 以图标1为例,在大屏设计页面,从“全部组件 > 装饰”中,拖拽“图标1”组件至画布空白区域,如图1。 图1 图标1 图2 边距样式说明 卡片 卡片是指包裹图表组件的外层架构,可以理
自定义组件说明 新建并开发自定义组件 上传自定义组件 父主题: 组件管理
视图切换 操作场景 通过视图切换功能,可将页面中的组件切换为列表或卡片样式。 列表:展示了所有组件的icon和标题,方便组件的快速查找。 卡片:展示了组件的初始化样式和标题,方便组件的预览和图层位置的调整。 操作步骤 参考创建页面中操作,创建所需的页面。 选择“图层”,进入图层页面。
转换器管理 新建转换器 删除转换器 关注转换器 父主题: 数据中心
装饰图案 装饰图案是装饰组件的一种,用于为可视化应用添加多种类型的图案元素,能够使可视化应用展示更加美观。 在大屏设计页面,从“全部组件 > 装饰”中,拖拽“装饰图案2”组件至画布空白区域,如图1。 图1 装饰图案2 图2 边距样式说明 卡片 卡片是指包裹图表组件的外层架构,可以
筛选组件类型 操作场景 在图层中,支持按组件名称、组件标题和组件类型进行筛选,帮助您更加高效的选择所需要的组件。 操作步骤 参考创建页面中操作,创建所需的页面。 选择“图层”,进入图层页面。 在图层中,单击,筛选组件。 图1 筛选组件 父主题: 图层管理
如何自定义动作 操作场景 在配置组件交互时,可以通过编写代码实现自定义交互动作,从而实现对应的业务需求。 图1 自定义动作 自定义动作参数说明 在自定义动作中,支持直接使用的参数如下: eventParam:组件传递出的参数。 以日期选择器组件为例,介绍如何获取eventParam。
组件交互 组件自定义事件实现 组件响应动作实现 父主题: 自定义组件开发规范
如何进行设置页面 在大屏页面中,可以对页面进行一些基础的配置,例如屏幕大小、背景颜色及背景图片等效果的设置。 屏幕大小 页面的屏幕大小,可以使用默认的屏幕大小,也可以自定义页面的大小,以适配大屏尺寸,推荐常用尺寸1920*1080、1600*900及3840*2080等。 图1 屏幕大小
通过参数控制响应动作 操作场景 在设置组件交互动作时,可以通过选择事件参数、全局变量或固定值,明确有哪些类型的参数可以传递。 操作步骤 参考创建大屏&PC端项目中操作,新建一个大屏项目。 参考使用空白画布新建页面中操作,新建一个空白页面,如页面一,并拖入实心圆饼图和下拉选择框。
代码结构介绍 了解代码目录结构 目录文件详解 父主题: 自定义组件开发规范
如何设置页面间参数传递 AstroCanvas开发中,可通过设置组件的事件和动作属性来实现组件与组件、组件与页面之间的交互。在组件的交互响应事件中,可通过“页面跳转”响应动作传递页面参数。当跳转页面时,当前页面参数会传入到打开的页面中,支持自定义传参为固定值,也可绑定页面级全局变量。
组件图层位置移动 操作场景 在AstroCanvas大屏开发页面,支持将组件图层向上、向下移动一层或移动至底层等,帮助您更加合理有效的排列大屏上的组件。 位置层次越靠前,表示组件在画布中的显示越靠前。 位置层次越靠后,表示组件在画布中的显示越靠后。 当两个组件重叠时,位置靠前的组件会覆盖位置靠后的。
组件内置API 内置API一览表 Studio对象预置API一览表 magno对象预置API一览表 HttpUtils工具类预置API一览表 SafeUtils安全工具类预置API一览表 父主题: 自定义组件开发规范
组件配置项(Config配置) 配置项总览 通用配置 input textarea input-number slider tab switch radio checkbox colorpicker time select list 父主题: 自定义组件开发规范