组件交互配置

添加柱状图组件和Tab列表组件（在控件 > 选择类下）到画布中。

选中Tab列表组件后，修改Tab列表的数据源，将Tab改成显示和隐藏。

给Tab列表点击添加显示交互事件：当点击Tab的ID为1时，柱状图响应显示动作。

1. 选中Tab列表，选择右侧高级面板，单击交互事件右侧的图标，给Tab点击添加交互事件。启用事件开关默认打开。

2. 选择事件类型，添加当点击Tab时事件。

   说明

   单击事件右侧的图标，可以查看当前事件的出参说明。

3. 单击图标，打开动作触发条件开关。

4. 单击新增条件，设置条件配置项当id等于1，即当点击的Tab是第一个Tab时。详细使用方法请参见条件树使用说明。

   说明

   您也可以切换至代码编辑模式，使用JavaScript语法进行配置。

5. 单击交互动作右侧的图标，添加一个交互动作。

6. 选择需要响应的组件和动作，设置为柱状图的显示。

   说明

   单击图标，跳转至蓝图查看交互动作。单击图标，查看当前动作的入参说明。

   不同的动作交互动作的配置不同，请以实际为准。

同理，再给Tab列表添加一个交互事件：当点击Tab的ID为2时，柱状图响应隐藏动作。

单击右上角预览，进行预览效果查看。点击显示Tab，柱状图则显示；点击隐藏Tab，柱状图则隐藏。

单击页面左上角的图标，进入蓝图编辑器。查看系统自动生成的交互关系。即单路判断节点的条件为动作触发条件内容。

（可选）您也可以在自动逻辑关系的基础上修改触发条件、响应动作和对应的过滤器，当此处的配置变化时，相对应的高级面板的配置项也会变化。

在全局变量中添加一个名为content的全局变量。

添加Tab列表组件（在控件 > 选择类下）和通用标题组件到画布中。

选中通用标题组件，在右侧数据源面板，关联上全局变量content。并设置过滤器，将content处理成正确的格式传给组件。

// data入参表示content变量传入的值，经过过滤器处理后，给组件正确的格式。
function filter(data) {
   return [{
      value: data
  }];
}

给Tab列表组件添加交互事件，触发全局变量content的值变化。

1. 选中Tab列表组件，选择右侧高级面板，单击交互事件右侧的图标，给Tab点击添加交互事件。启用事件开关默认打开。

2. 选择事件类型，添加当点击Tab时事件。

   说明

   单击事件右侧的图标，可以查看当前事件的出参说明。

3. 单击交互动作右侧的图标，添加一个交互动作。

4. 选择需要响应的对象为全局变量content，动作为导入数据。

5. 参数配置切换至动态参数配置，创建过滤器，添加代码如下。将Tab点击抛出的结果进行处理，返回的值就导入给全局变量content。

   // 经过过滤器处理后，获取全局变量最终需要的值。
   function filter(data) {
     return data.content;
   }

单击右上角预览，进行预览效果查看。点击不同Tab，通用标题显示点击Tab的内容。