文档首页/ Astro大屏应用 AstroCanvas/ 用户指南/ AstroCanvas学堂/ 如何通过全局变量,实现组件数据的动态变化
更新时间:2024-12-05 GMT+08:00
分享

如何通过全局变量,实现组件数据的动态变化

在AstroCanvas中,支持通过全局变量,来控制组件数据的动态显示。本章节以全局变量,控制地图组件中数据的动态显示为例进行介绍。

通过全局变量实现组件数据动态变化

  1. 参考关系型数据库数据源中操作,新建关系型数据库数据源。

    图1 新建关系型数据库数据源

  2. 参考关系型数据库中操作,新建关系型数据库数据集(新建变量value)。

    图2 新建关系型数据库数据集

  3. 新建全局变量。

    1. 参考使用空白画布新建页面中操作,新建大屏空白页面。
    2. 在大屏开发页面,单击,新建全局变量,如hotSelect。
      图3 新建全局变量hotSelect

  4. 在画布中,拖入地图组件和下拉选择框组件。
  5. 配置地图组件。

    1. 选中组件,单击组件上方的,设置组件数据来源。
    2. 在全局变量中,选择3中创建的全局变量hotSelect。
      图4 选择全局变量hotSelect
    3. 在组件预览中,从表格字段中,拖拽对应的字段到配置中。
    4. 设置完成后,单击“保存”
    5. 选择地图组件,单击组件上方的,显示热力图层,数据标题设置为“子公司完成率”,显示类型设置为“区间显示”,并设置填充颜色。

  6. 配置下拉选择框组件。

    1. 选中组件,单击组件上方的,进入组件数据配置页面。
    2. 数据类型选择“静态数据”,并输入如下示例数据。
      {
          "dataValue": [{
                  "value": "子公司A完成率",
                  "label": "子公司A完成率"
              },
              {
                  "value": "子公司B完成率",
                  "label": "子公司B完成率"
              },
              {
                  "value": "子公司C完成率",
                  "label": "子公司C完成率"
              }
          ]
      }

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

    3. 设置完成后,单击“保存”

  7. 配置下拉选择框交互动作。

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

  8. 保存页面后,单击,预览效果。

    图6 效果预览

相关文档