本文档以轮播列表柱状图组件使用数据过滤器筛选出B站网页内的每日推荐数据为例,为您演示数据过滤器的具体使用方法。

操作步骤

  1. 在可视化大屏编辑器页面搭建所需要的轮播列表柱状图组件。
    添加案例组件
  2. 在右侧的数据配置面板中,单击配置数据源
    配置数据源入口
  3. 设置数据源对话框中,选择数据源类型API,并在数据源编辑框内填写本次源数据的B站URL网址链接(https://www.bilibili.com/index/recommend.json)。
  4. 勾选服务器代理请求(本次数据请求是跨域模式)。
  5. 单击预览数据源返回结果即可查看B站网址源数据的返回结果。
    接入源数据步骤
    预览可以看到请求的返回结果是一个JSON对象,但是轮播列表需要显示的是个对象列表,每个对象内需要包含contentvalue两个字段。
  6. 勾选数据过滤器开启过滤器调试
    开启过滤器
  7. 单击添加过滤器右侧的,添加一个过滤器,并编辑过滤器内的代码内容。编辑完成后,单击测试查看数据过滤结果。
    添加一个过滤器
    编辑过滤器并测试
    上图中的示例触发条件如下。
    return data.list.map(item => {
      return {
        value: item.author,
        content: item.description
      };
    });
    过滤器内的代码编辑完成后,可以看到经过转换得到的组件所需要的数据列表,内容显示样式为valuecontent两个字段。
    数据过滤结果
  8. 配置并测试成功后,单击保存,然后刷新数据响应结果,查看B站每日推荐的数据。
    完成过滤显示