本文档以基本柱图控制轮播列表组件数据更新为例,为您介绍节点编程配置的数据筛选功能。

前提条件

准备好您的交互需求。

本案例的交互需求为:当用户单击基本柱图中某一个柱子时,轮播列表筛选数据后展示当前柱子对应的数据。

操作步骤

  1. 参考添加组件,在可视化大屏编辑器页面搭建所需要的基本柱图轮播列表组件。
    大屏添加组件
  2. 单击大屏编辑页面右上角的配置节点编程图标。
    配置节点编程图标
  3. 节点编程配置页面,将左侧的全局基本柱图轮播列表节点拖至画布中,并按照如下图所示的样式进行连线。
    节点编程连线
    注意 全局节点需要自己与自己连线。单击页面初始化完成节点拖动到设置页面临时变量进行连线,并单击设置页面临时变量左侧圆点添加转换器。
  4. 添加转换器。
    连线中需要添加两个转换器,分别命名为设置轮播全量筛选数据,如上图所示。具体操作方法请参见配置节点编程
  5. 配置转换器。
    1. 右键单击名称为设置轮播全量的转换器,选择编辑
    2. 转换器设置对话框的转换器脚本编辑区域,输入转换条件,输入完成后单击保存
      转换器需要设置临时变量(示例中为carouselData,可自定义),当前转换器代码如下。
      return {
        data: [{
          name: "carouselData",
          value: [
            {
              "name": "上海项目1",
              "value": 111,
              "type": "上海"
            },
            {
              "name": "上海项目2",
              "value": 222,
              "type": "上海"
            },
            {
              "name": "深圳项目1",
              "value": 111,
              "type": "深圳"
            },
            {
              "name": "深圳项目2",
              "value": 222,
              "type": "深圳"
            },
            {
              "name": "合肥项目1",
              "value": 111,
              "type": "合肥"
            },
            {
              "name": "合肥项目2",
              "value": 222,
              "type": "合肥"
            },
            {
              "name": "成都项目1",
              "value": 111,
              "type": "成都"
            },
            {
              "name": "成都项目2",
              "value": 222,
              "type": "成都"
            },
            {
              "name": "安徽项目1",
              "value": 111,
              "type": "安徽"
            },
            {
              "name": "安徽项目2",
              "value": 222,
              "type": "安徽"
            },
            {
              "name": "北京项目1",
              "value": 111,
              "type": "北京"
            },
            {
              "name": "北京项目2",
              "value": 222,
              "type": "北京"
            }
          ]
        }]
      }
    3. 使用同样的方式配置名称为筛选数据的转换器,选取临时变量carouselData,并从该数据中过滤出对应的城市数据,输入的转换条件如下。

      筛选数据转换器内容
  6. 转换器配置完成后,单击节点编程配置页面右上角的应用图标,将交互效果应用到大屏项目中。
  7. 切换到DataV编辑器页面,配置轮播列表组件右侧配置页面中的全局配置项。
    表格行数设置为柱图对应数据的显示数量,并开启空值隐藏行开关,将轮播列表的空行隐藏,使得组件更加美观。
    修改全局样式
  8. 修改轮播列表配置面板中的自定义列配置项,将轮播列表每一列的字段名等内容与全局转换器内的字段名相对应。
    配置轮播列表自定义列
    配置轮播列表自定义列
  9. 单击预览,查看基本柱图控制轮播列表组件数据筛选的交互效果。
    数据筛选结果