DataV数据可视化：实现动态显隐

效果展示

• 通过Tab列表实现：该方式将通过单击Tab列表的不同页签，控制区域图和柱状图的显隐效果。

• 通过轮播容器实现：该方式会将区域图和柱状图组合生成轮播容器，通过轮播功能实现组件的动态显隐。

前提条件

已创建数据看板，支持使用模板创建、使用空白画布创建。

进入看板编辑页面

1. 登录DataV控制台。

2. 在工作台页面的数据看板区域，鼠标悬停至目标看板，单击编辑，进入看板的画布编辑页面。

   您可按需选择通过Tab列表或通过轮播容器实现组件的动态显隐切换。

通过Tab列表实现

1. 按下图步骤，添加Tab列表、区域图、柱状图组件至画布。

   

2. 单击左上方的图标，切换到蓝图编辑器。

3. 添加全部图层节点和逻辑节点页签下的3个条件判断节点到蓝图主画布中。

4. 连接组件。

5. 配置条件判断节点处理方法。

   return data.id == 1;//显示柱状图
   return data.id == 2;//显示区域图
   return data.id == 3;//全部显示

6. 单击页面右上角的预览图标，预览展示结果。

通过轮播容器实现

1. 登录DataV控制台。

2. 选择任一数据看板，单击编辑，进入画布编辑器页面。

3. 添加Tab列表组件、区域图组件和柱状图组件到画布中。

4. 选中Tab列表组件，修改静态数据。

   [
     {
       "id": 1,
       "content": "TAB1"
     },
     {
       "id": 2,
       "content": "TAB2"
     }
   ]

5. 全选区域图和柱状图，右键单击成组，在右侧面板单击使用轮播容器。

6. 在轮播容器的样式页签，设置触发方式为事件触发。

7. 切换到蓝图编辑器。

8. 添加Tab列表节点、轮播容器节点和逻辑节点页签下的1个串行数据处理节点到蓝图主画布中。

9. 连接组件。

10. 配置串行数据处理节点处理方法。

    return {  index: data.id - 1 };

11. 单击页面右上角的预览图标，预览展示结果。