更新时间:2023-12-20 GMT+08:00

设置组件事件交互

本章节以Tab列表和线状图配合使用为例,介绍组件的交互配置。在DLV中组件交互配置是指某个组件在响应用户操作或者自动触发更新时,向其他组件传递参数,这个参数可以在其他组件中作为数据查询时的动态变量。当组件的“交互”页签支持勾选开启交互功能的事件及参数配置时表示该组件支持交互功能,否则不支持交互功能。

图1 支持交互功能
图2 不支持交互功能

前提条件

  • 已开通相应的云服务,创建数据库实例。
  • 已将相应的数据存储在数据库实例中。

添加和配置组件

  1. 打开大屏开发页面,在左侧组件中心,选择交互 > 地理搜索

    图3 选择地理搜索组件

  2. “样式”面板,配置地理搜索的样式,本示例使用默认样式。

    图4 配置地理搜索样式

  3. 切换到“数据”面板,设置地理搜索组件的数据。

    图5 设置地理搜索组件的数据

  4. 切换到“交互”面板,定义交互变量,并启用该变量。

    图6 定义并启用交互变量

  5. 在左侧组件中心,选择常用图表 > 柱状图

    图7 选择柱状图组件

  6. “样式”面板,配置柱状图组件的样式,本示例使用默认样式。

    图8 配置柱状图样式

  7. 切换到“数据”面板,配置柱状图数据。

    1. 选择数据源,并配置字段映射。如图9所示,组件关联到动态数据。
      图9 关联动态数据
    2. 按下shift+$键,引用4定义好的交互变量${name}。
      图10 引用交互变量

预览和发布大屏

  1. 在大屏开发页面右上方,单击预览按钮,预览大屏。
  2. 在地理搜索中,重新设定地理位置,柱状图则只显示对应位置的数据。
  3. 交互功能验证无误后,单击大屏开发页面右上方的发布按钮,配置发布参数,将大屏发布和分享给其他用户。

    图11 发布和分享大屏

开启交互功能

“交互”页签下,勾选,开启交互功能。当Tab组件的取值发生变化时,向其他组件传递数值。

字段映射

设置字段的映射关系。在其他组件中使用变量${label}时,即可获取到label所映射的值。