文档首页 > > 用户指南> 管理组件> 设置组件交互

设置组件交互

分享
更新时间: 2019/05/22 GMT+08:00

目前支持交互的组件有:搜索框、时间轴、时间选择器、数字翻牌器、Tab列表。

本章节以Tab列表和线状图配合使用为例,介绍组件的交互配置。

前提条件

  • 已开通或购买相应的云服务,创建数据库实例。
  • 已将相应的数据存储在数据库实例中。如本示例的数据为:
    表1 示例数据

    area

    name

    num

    俄罗斯

    1

    54

    俄罗斯

    2

    35

    俄罗斯

    3

    49

    俄罗斯

    4

    59

    俄罗斯

    5

    53

    俄罗斯

    6

    48

    俄罗斯

    7

    47

    俄罗斯

    8

    45

    俄罗斯

    9

    35

    中国

    1

    21

    中国

    2

    52

    中国

    3

    47

    中国

    4

    40

    中国

    5

    45

    中国

    6

    46

    中国

    7

    39

    中国

    8

    28

    中国

    9

    51

操作步骤

  1. 登录DLV控制台,单击“我的大屏”
  2. 选择一个您已创建的大屏,单击“编辑”按钮,进入大屏编辑页面。
  3. 从左侧组件库中选择一个“Tab列表”组件,单击“数据”面板,配置如下所示的数据。

    图1 配置数据-Tab列表

  4. 在交互面板中勾选开启交互功能,并配置字段映射。将label映射为area,当线状图使用变量${label}时,即可获取到area的值。

    图2 配置交互-Tab列表

  5. 从左侧组件库中选择“线状图”组件,在“数据”面板中选择一个您已创建好的数据连接。

    图3 选择数据连接

  6. 在下方SQL语句编辑框内填写SQL查询语句:select * from `series_data` where area=${label};

    图4 执行SQL语句

  7. 单击查看数据响应结果,数据响应成功后可查看结果。

    图5 查看数据响应结果

  8. 根据响应数据的属性名称配置字段映射。配置“x”“name”,“y”“num”“s”“area”,并设置系列的颜色。

    图6 配置映射关系

  9. 配置完成后,单击大屏右上方的,预览大屏。当在“Tab列表”中单击“中国”时,线状图显示中国的数据;当在“Tab列表”中单击“俄罗斯”时,线状图显示俄罗斯的数据

    图7 预览效果1
    图8 预览效果2

开启交互功能

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

字段映射

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

分享:

    相关文档

    相关产品

文档是否有解决您的问题?

提交成功!

非常感谢您的反馈,我们会继续努力做到更好!

反馈提交失败,请稍后再试!

*必选

请至少选择或填写一项反馈信息

字符长度不能超过200

提交反馈 取消

如您有其它疑问,您也可以通过华为云社区问答频道来与我们联系探讨

跳转到云社区