检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
多区域折线图”组件呈现的告警数据会随着全局变量值变化而变化。 如图1所示,也可以不使用“下拉选择框”组件,直接在发布的页面URL末尾加上“?全局变量名=值”,给页面全局变量赋值,查看组件的数据变化。 图1 在URL参数中给全局变量赋值 父主题: AstroCanvas学堂
如何在数据集或跳转事件动作中设置变量 在组件的数据集或组件的跳转事件动作中,是支持设置变量的。 在数据集或事件动作中设置变量 在大屏编辑页面上方,单击,新建并设置页面级全局变量。 例如,新增全局变量“url”,设置变量说明为“数据详情页面URL”。 图1 新增全局变量 从“全部组件 > 图
如何基于页面级的全局变量实现组件交互 AstroCanvas支持设置页面级的全局变量,通过页面组件间的交互,可给全局变量赋值。本章节将以开发一个告警监控页面为例,逐步介绍如何开发一个基于全局变量的交互页面。 场景说明 开发一个告警监控页面,如图1所示,在页面上方下拉框中选择告警状
在左侧菜单栏中,选择“项目变量”,单击“添加变量”。 设置新建变量的参数,单击“确定”。 图1 添加变量 变量:输入新建项目变量的名称,只能由字母、数字组成,且必须以字母开头。 默认值:新建项目变量的默认取值。 变量说明:新建项目变量的说明信息,可以是变量的含义或用途等。 作用域:选择项目变量作用的
单击“交互事件”,选择“选中值发生变化时触发”事件,单击“响应动作”,选择“赋值全局变量”,在“赋值到变量”下拉框中单击“新建全局变量”,新建全局变量“status”,将事件的输出变量(如“selectValue”)赋值给页面级的全局变量“status”,单击“确定”后,单击“完成”。 图3 设置交互事件
单击“交互事件”,选择“echarts单击系列”。 为“echarts单击系列”事件设置响应动作,如赋值全局变量,将字段seriesIndex赋值给全局变量。 图4 将字段seriesIndex赋值给全局变量 单击“完成”,返回大屏设计页面。 在全部组件中,拖拽一个实心圆饼图到画布中。 为实心圆饼图设置数据。
如何通过全局变量,实现组件数据的动态变化 在AstroCanvas中,支持通过全局变量,来控制组件数据的动态显示。本章节以全局变量,控制地图组件中数据的动态显示为例进行介绍。 通过全局变量实现组件数据动态变化 参考关系型数据库数据源中操作,新建关系型数据库数据源。 图1 新建关系型数据库数据源
组件间交互是指在同一页面中,不同组件之间进行的交互事件。组件和组件之间可互为触发器和响应器,根据用户所定义的事件不同,可定义组件行为、赋值全局变量以及响应自定义动作。 本章节以在同一区域中,添加多个组件,使用tab来切换不同tab页签下需要呈现的组件为例,向您介绍如何设置组件间的交互能力。
开启后台分页 新建全局变量。 后台分页需要搭配全局变量使用,请创建pageSize、offset两个变量(变量名称可自定义),并为变量添加默认值。因为在触发分页或改变每页数量时需要使用上述两个变量,所以需要一个初始值,否则无法执行到数据配置。 图2 新建分页全局变量 交互设置。 选中高级表格组件,单击,进行组件交互设置。
将5中鉴权信息中返回的参数赋值给连接器的请求参数。 Body:当请求类型为POST时,还需要设置Body,可以使用默认值也可以根据实际需求进行填写。 Path:URL中配置的带大括号的变量。例如{pathParam} ,其中pathParam会作为变量名。 返回参数:设置返回参数
面跳转”响应动作传递页面参数。当跳转页面时,当前页面参数会传入到打开的页面中,支持自定义传参为固定值,也可绑定页面级全局变量。 例如,在如何基于页面级的全局变量实现组件交互开发的页面中,在“多区域折线图”组件上方单击,配置组件交互事件。参考图1,单击“+交互事件”,选择“点击”事
件暴露的变量结构,以及事件和对外透传变量的业务含义。eventConfig配置好后,在组件配置交互时可以将事件的itemVal传递给页面全局变量中,供其他组件使用。 典型示例 典型的eventConfig示例如下: // 组件事件配置项,定义组件事件结构及说明,给全局变量映射使用
triggerEvent('sendSelect', params); }, 全局变量 组件触发自定义事件时,可以给全局变量赋值,fields数组中每一个对象保存着暴露给全局变量的详细配置。 图2 给全局变量赋值 表2 fields数组中对象字段详细说明 字段 类型 说明 name String
AstroCanvas学堂 如何基于页面级的全局变量实现组件交互 如何设置页面间参数传递 自定义组件时,如何设置交互事件的输出变量 如何在页面URL参数中给全局变量赋值 如何在数据集或跳转事件动作中设置变量 如何通过全局变量,实现组件数据的动态变化 如何进行设置页面 如何切换AstroCanvas平台主题颜色
图2 页面设置 全局变量设置 AstroCanvas支持设置页面级的全局变量,通过页面组件间的交互,可给全局变量赋值,详情请参见如何基于页面级的全局变量实现组件交互。 全局变量中的作用次数,用于统计该全局变量被使用了多少次。单击作用次数下的具体次数,可查看该全局变量的作用域。 图3 设置全局变量
响应动作”,选择“赋值全局变量”。 在动作详情中,单击“赋值到变量”后的,选择“新建全局变量”。 图4 选择新建全局变量 “变量”设置为“seriesName”,“变量说明”设置为“系列名称”,单击“保存”。 图5 新建全局变量seriesName 返回组件交互页面,“赋值到变量”选择5.g中新建的变量,
参数:接口入参,当有入参时,系统会自动展示,本示例不涉及。 当有入参时,单击参数后的“变量配置”,可给变量设置默认值。 图4 给变量设置默认值 测试API接口:用于测试该接口,单击“测试API接口”,“样例报文”中会显示输出结果。 样例报文:对应API接口的响应样例报文数据格式,数据集的元数据结构
配置数据集参数。 图2 配置数据集参数 查询类型:设置查询数据的类型,如查询时间范围内的数据或瞬时数据。 查询周期:设置查询时间的周期,某一个时间段内或某个时间点。 最大采样点数:设置查询数据的个数,取值范围为[1, 10000]。假设,查询周期设置为过去的3小时,最大采样点数设置
过桥接器的变量名称获取桥接器实例,其中“APIConnector”类型为String,表示桥接器的变量名称。 ConnectorIns.process(renderCbk, errCbk):通过桥接器实例调用process函数,主要作用为发起调用服务的请求和处理返回结果信息。 在
系型数据库数据集中创建的数据集。 配置全局变量。 全局变量可以理解为参数变量,用于控制组件之间参数的传递,从而达到交互的目的,例如图表联动、自定义字段等功能。如何使用全局变量,可参考如何基于页面级的全局变量实现组件交互~如何通过全局变量,实现组件数据的动态变化。本示例不做配置。