ASTRO大屏应用 ASTROCANVAS-如何通过全局变量，实现组件数据的动态变化:操作步骤

时间：2024-11-06 21:53:38

操作步骤

参考关系型数据库数据源中操作，新建关系型数据库数据源。

图1 新建关系型数据库数据源
参考关系型数据库中操作，新建关系型数据库数据集（新建变量value）。

图2 新建关系型数据库数据集
新建全局变量。
1. 参考使用空白画布新建页面中操作，新建大屏空白页面。
2. 在大屏开发页面，单击，新建全局变量，如hotSelect。
  图3 新建全局变量hotSelect
在画布中，拖入地图组件和下拉选择框组件。
配置地图组件。
1. 选中组件，单击组件上方的，设置组件数据来源。
2. 在全局变量中，选择3中创建的全局变量hotSelect。
  图4 选择全局变量hotSelect
3. 在组件预览中，从表格字段中，拖拽对应的字段到配置中。
4. 设置完成后，单击“保存”。
5. 选择地图组件，单击组件上方的，显示热力图层，数据标题设置为“子公司完成率”，显示类型设置为“区间显示”，并设置填充颜色。

配置下拉选择框组件。

选中组件，单击组件上方的，进入组件数据配置页面。

数据类型选择“静态数据”，并输入如下示例数据。

{
    "dataValue": [{
            "value": "子公司A完成率",
            "label": "子公司A完成率"
        },
        {
            "value": "子公司B完成率",
            "label": "子公司B完成率"
        },
        {
            "value": "子公司C完成率",
            "label": "子公司C完成率"
        }
    ]
}

其中，“value”字段需要和数据列名保存一致。

设置完成后，单击“保存”。

配置下拉选择框交互动作。
1. 选中下拉选择框组件，单击组件上方的，进入组件交互设置页面。
2. 在“作为触发器”中，单击“+ 交互事件”，选择“当选中选项时”。
3. 在“响应动作”中，单击“+ 响应动作”，选择“赋值全局变量”。
4. 在“动作详情”中，选择3中定义的全局变量。
  图5 选择全局变量
5. 单击“确定”后，单击“完成”。
保存页面后，单击，预览效果。

图6 效果预览