如何使用画布编辑器中的数据过滤器_DataV数据可视化(DataV)-阿里云帮助中心

本文以轮播列表柱状图组件使用数据过滤器筛选出B站网页内的视频为例，为您演示如何使用数据过滤器。

操作步骤

登录DataV控制台。
在我的可视化页面，选择您创建的可视化应用，单击编辑。
在画布编辑器页面，单击图标打开资产列表，在搜索框中输入轮播列表柱状图。
选中当前组件，单击右侧面板的数据图标。
单击配置数据源，进入设置数据源页面。
在数据源类型列表中选择API，并在数据源编辑框内填写本次源数据的B站URL网址链接（https://api.bilibili.com/x/web-interface/ranking）。
选中服务器代理请求（本次数据请求是跨域模式）。
单击预览数据源返回结果，查看B站网址源数据的返回结果。
在预览页面，可以看到请求的返回结果是一个JSON对象。但是轮播列表需要显示的是对象列表，每个对象内需要包含value和content两个字段，因此您需要继续执行以下步骤配置数据过滤器，转换数据结构。
选中数据过滤器，并打开开启过滤器调试开关。
单击添加过滤器右侧的图标，添加一个过滤器。
编辑过滤器内的代码内容，完成后，单击测试查看数据过滤结果。
上图中的示例触发条件如下。
```
return data.data.list.map(item => {
  return {
    value: item.author,
    content: item.title
  };
});
```
过滤器内的代码编辑完成后，可以看到经过转换得到的组件所需要的数据列表，内容显示样式为value和content两个字段。
配置并测试成功后，单击保存，并刷新数据响应结果，即可查看B站视频数据。
说明
您也可以单击数据响应结果内的图标，复制到本地查看。