更新时间:2024-11-04 GMT+08:00
分享

组件间交互

操作场景

组件间交互是指在同一页面中,不同组件之间进行的交互事件。组件和组件之间可互为触发器和响应器,根据用户所定义的事件不同,可定义组件行为、赋值全局变量以及响应自定义动作。

本章节以在同一区域中,添加多个组件,使用tab来切换不同tab页签下需要呈现的组件为例,向您介绍如何设置组件间的交互能力。

操作步骤

  1. 参考使用空白画布新建页面中操作,新建一个空白页面。
  2. 在大屏开发页面,从全部组件 > 装饰中拖拽“自定义背景框”组件到画布中,并调整大小。

    图1 拖拽自定义背景框到画布中

  3. 全部组件 > 导航中拖拽“选项卡”组件到“自定义背景框”中。

    图2 拖拽选项卡到自定义背景框组件中

  4. 增加选项卡组件的选项卡数量,并设置选项卡名称。

    1. 选中选项卡组件,单击组件上方的
    2. 在选项卡设置中,将“选项卡数量”设置为4。
      图3 增加选项卡数量
    3. 修改选项卡的名称。
      图4 修改选项卡名称
    4. 调整矩形装饰和选项卡组件的相对位置。

  5. 拖拽基本饼图、玫瑰花饼图、基本柱图、多折线图和气泡图到矩形装饰中。

    图5 拖拽图表到矩形装饰中

  6. 设置交互能力,根据不同的分类设置基本交互,即组件的显示/隐藏。

    1. 选中选项卡组件,单击组件上方的,进入交互设置页面。
    2. 在作为触发器中,单击“+ 交互事件”,选择“饼图事件”
    3. 饼图事件对应饼图选项卡,当选择饼图时,显示两个饼图组件,隐藏其他图表组件。
      图6 显示饼图组件
      图7 隐藏其他图表组件
    4. 按照上述操作,分别设置柱图事件、折线图事件和气泡图事件选项卡对应的交互动作。
      图8 柱图事件交互设置
      图9 折线图事件交互设置
      图10 气泡图事件交互设置
    5. 设置完成后,单击“完成”,返回大屏开发页面。

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

相关文档