更新时间:2024-12-05 GMT+08:00
如何通过全局变量,实现组件数据的动态变化
在AstroCanvas中,支持通过全局变量,来控制组件数据的动态显示。本章节以全局变量,控制地图组件中数据的动态显示为例进行介绍。
通过全局变量实现组件数据动态变化
- 参考关系型数据库数据源中操作,新建关系型数据库数据源。
图1 新建关系型数据库数据源
- 参考关系型数据库中操作,新建关系型数据库数据集(新建变量value)。
图2 新建关系型数据库数据集
- 新建全局变量。
- 参考使用空白画布新建页面中操作,新建大屏空白页面。
- 在大屏开发页面,单击,新建全局变量,如hotSelect。
图3 新建全局变量hotSelect
- 在画布中,拖入地图组件和下拉选择框组件。
- 配置地图组件。
- 选中组件,单击组件上方的,设置组件数据来源。
- 在全局变量中,选择3中创建的全局变量hotSelect。
图4 选择全局变量hotSelect
- 在组件预览中,从表格字段中,拖拽对应的字段到配置中。
- 设置完成后,单击“保存”。
- 选择地图组件,单击组件上方的,显示热力图层,数据标题设置为“子公司完成率”,显示类型设置为“区间显示”,并设置填充颜色。
- 配置下拉选择框组件。
- 选中组件,单击组件上方的,进入组件数据配置页面。
- 数据类型选择“静态数据”,并输入如下示例数据。
{ "dataValue": [{ "value": "子公司A完成率", "label": "子公司A完成率" }, { "value": "子公司B完成率", "label": "子公司B完成率" }, { "value": "子公司C完成率", "label": "子公司C完成率" } ] }
其中,“value”字段需要和数据列名保存一致。
- 设置完成后,单击“保存”。
- 配置下拉选择框交互动作。
- 选中下拉选择框组件,单击组件上方的,进入组件交互设置页面。
- 在“作为触发器”中,单击“+ 交互事件”,选择“当选中选项时”。
- 在“响应动作”中,单击“+ 响应动作”,选择“赋值全局变量”。
- 在“动作详情”中,选择3中定义的全局变量。
图5 选择全局变量
- 单击“确定”后,单击“完成”。
- 保存页面后,单击,预览效果。
图6 效果预览
父主题: AstroCanvas学堂