阿里云DataV数据可视化如何配置数据筛选

操作步骤

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. 单击预览，查看基本柱图控制轮播列表组件数据筛选的交互效果。