实现动态显隐

效果展示

• Tab列表ID实现

• 轮播容器实现

操作步骤

Tab列表ID实现

1. 登录DataV控制台。

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

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

4. 切换到蓝图编辑器。

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

6. 连接组件。

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

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

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

轮播容器实现

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. 单击页面右上角的预览图标，预览展示结果。