文档

实现动态显隐

更新时间:

本文档以Tab列表控制区域图基本柱状图的显隐为例,实现组件显隐的动态展示。

效果展示

  • Tab列表ID实现dd_Trim.gif

  • 轮播容器实现w1w_Trim.gif

操作步骤

Tab列表ID实现

  1. 登录DataV控制台

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

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

  4. 切换到蓝图编辑器。

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

  6. 连接组件。image.png

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

    return data.id == 1;//显示柱状图
    return data.id == 2;//显示区域图
    return data.id == 3;//全部显示
  8. 单击页面右上角的预览图标,预览展示结果。dd_Trim.gif

轮播容器实现

  1. 登录DataV控制台

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

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

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

    [
      {
        "id": 1,
        "content": "TAB1"
      },
      {
        "id": 2,
        "content": "TAB2"
      }
    ]
  5. 全选区域图和柱状图,右键单击成组,在右侧面板单击使用轮播容器

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

  7. 切换到蓝图编辑器。

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

  9. 连接组件。image.png

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

    return {  index: data.id - 1 };
  11. 单击页面右上角的预览图标,预览展示结果。w1w_Trim.gif

  • 本页导读 (0)