交互配置

选中组件后，右侧的设置面板，第三个Tab就是“交互”设置，可以在这里设置组件要实现的交互效果。

比如，通过Tab控件来控制不同组件的展示状态。

交互参数

上方举的例子，Tab控件控制柱图/饼图的展示切换。是借助“交互参数”功能实现的。大致的逻辑关系如下图所示:

• Tab控件是控制端，柱图、饼图是影响端，交互参数则是控制端向影响端传递信息的媒介
• 控制端的Tab控件发生切换时，会触发交互参数的值发生变化
• 影响端的柱图、饼图，依据交互参数值的变化去执行响应的动作（比如显示、隐藏）
  

详细的操作步骤如下（以“Tab控件控制柱图/饼图的展示切换”举例）

（1）添加选项卡控件跟柱图、饼图

添加一个“选项卡”控件。

将“选项卡”的数据设置为柱图、饼图。

[
  {
    "tabName": "柱图"
  },
  {
    "tabName": "饼图"
  }
]

添加柱图、饼图组件。

（2）创建一个交互参数

设置参数的信息。

• 参数名称：SwitchTab
• 类型：字符串
• 默认值：柱图

（3）将Tab控件跟参数绑定

在Tab控件的交互面板，添加一个写入参数。使得Tab的切换触发参数值的同步变化。

• 交互操作：切换选项
• 字段值：tabName
• 指定参数：SwitchTab（上一步创建的交互参数）
  

（4）设置柱图、饼图的响应事件

选中柱图组件，在交互面板中，开启响应事件。设置显示动画、消失动画。

设置事件响应的函数条件。

条件设置成参数“SwitchTab”等于“柱图”时展示。

同理，选中饼图，在交互面板中，开启响应事件。设置显示动画、消失动画。设置事件响应的条件设置，设置参数“SwitchTab”为“饼图”时展示。

（5）完成设置，预览效果

如上，即完成了交互配置。点击右上角的“预览”可查看效果。

组件显隐

组件入场，以及响应事件切换显隐时，都能配置进场、出场动画。

参数时间轴

数据大屏Pro可以通过设置“参数时间轴”实现高自由度轮播，下面是使用柱形图和饼图，通过设置“参数时间轴”实现的自定义轮播。

具体操作

（1）添加柱形图，饼图组件

（2）创建一个交互参数

设置参数的信息。

• 参数名称：SwitchTab
• 类型：字符串
• 默认值：柱图
  

（3）绑定交互参数，选中柱形图，在交互面板中设置“响应事件”，设置参数“SwitchTab”为“柱形图”时展示。

同理，选中饼图，在交互面板中，开启响应事件。设置显示动画、消失动画。设置事件响应的条件设置，设置参数“SwitchTab”为“饼图”时展示。

（4）添加“参数时间轴”。

（5）设置轮播时间范围，时间节点。

（6）设置时间节点参数的对应值。

（7）应用该时间轴，开启循环设置，开启默认执行。

（8）完成设置，预览效果

如上，即完成了交互配置。点击右上角的“预览”可查看效果。

使用技巧

如果不需要执行时机判断勾选默认开启,每次进入页面就会直接执行。

在使用”参数时间轴“进行多个轮播时，建议放入动态图层中，即一个动态图层一个时间轴，可以提高编辑流畅性。

参数血缘

参数是血缘图的核心，所有与[参数]有关的[组件]和[时间轴]都会展示在参数血缘图中，方便用户快捷定位参数关联的组件和时间轴，方便修改。

（1）入口
通过[交互参数]-[血缘]中打开，即可显示参数血缘图。

（2）界面介绍
在参数血缘图界面，从左到右依次为参数上游、交互参数、参数下游。

若组件存在于某个动态图层内，则动态图层框将其下的所有组件框在一起作展示。

（3）功能

• 点击参数：高亮该参数的上下游链路。
  

• 点击组件：右侧配置面板显示该组件的交互配置，即可快速修改。
  
  注：当组件位于动态图层中，选中该组件后会新标签页跳转至动态图层页面。
  
  

• 点击时间轴：新建新标签页打开一个大屏并展开时间轴列表，并定位至对应时间轴，即可快速修改。
  

图表联动

有一类常见的图表联动场景，比如下图，饼图选中某个地区，联动柱图展示对应地区的数据。

针对此类场景，数据大屏Pro提供了图表联动功能，下面我们举一个例子来依次说明此功能。

筛选

1.在大屏中选中“选项卡”和“饼图”组件。

2.让选项卡和饼图组件的显示字段都为“地区”（支持跨模型选择）。

3.点击选项卡，在“交互”Tab下选择筛选，并将筛选组件选定为“饼图组件”。

4.此时，我们在大屏中点击选项卡中某一地区，饼图会同时触发此地区的筛选。

下钻

5.显然，这种程度的筛选并不能达到很好的可视化效果，依此我们可以再在选项卡组件中加入“下钻”交互，查看某地区中各省/自治区的数据。

6.再次预览大屏，点击选项卡中某一地区，饼图中通下钻的省/自治区的信息便显示出来了，由此一个简单的图表联动就完成了。

高亮

7.为了突出选定区域，我们可以再在交互中添加高亮。

多屏交互能力

支持跨大屏绑定交互参数，实现主屏控制其他展示屏的场景（如使用PC或手机，控制大屏幕上展示大屏的切换）。

• 如下图所示，组件的“交互”模块里增加了“绑定跨屏参数”设置，可选择将字段值传递至其他大屏的交互参数；
  

• 选择其他大屏时，您只能选择同一项目中有编辑权限的其他大屏。