本文档为您介绍使用节点编程功能,在请求数据接口时传递动态参数,实现Tab列表基本柱图联动的方法。

前提条件

准备好您的交互需求。

本案例的交互需求为:当单击Tab列表的某一页签时,基本柱图传入API数据源内对应的id字段值作为参数,实现基本柱图的数据联动效果。

背景信息

旧版本的DataV使用回调ID的方法来配置图表数据联动。但是在回调ID配置完成后,并不能直观动态地看到回调ID的传递者和接收者。新版本的DataV为您提供了节点编程功能,节点编程通过连线将上下游串联起来,使得数据链路更清晰。

本案例的实际应用场景为:图表联动、图表下钻、服务调用、数据报警等。

操作步骤

  1. 参见添加组件,在大屏编辑器页面搭建所需要的基本柱图Tab列表组件。
    添加组件并配置组件在大屏编辑器内的样式
  2. 配置Tab列表基本柱图的样式和数据。
    配置组件样式
    1. 单击Tab列表,在右侧的配置面板中,将列数设置为2
    2. 切换到Tab列表的数据面板中,将数据源配置为如下所示的数据。
      Tab列表数据配置
      [
          {
              "id": 1,
              "content": "销售额"
          },
          {
              "id": 2,
              "content": "数量"
          }
      ]
    3. 单击基本柱图,在右侧的数据面板中,将数据源配置为如下所示的API数据。
      配置基本柱图的API数据源
      注意 API数据源的格式为http://api.test,并且需要与基本柱图的默认字段相匹配。
  3. 组件配置完样式后,单击大屏编辑页面右上角的配置节点编程图标。
    配置节点编程图标
  4. 节点编程配置页面,将左侧的Tab列表基本柱图节点拖至画布中。
  5. Tab列表当Tab点击时事件与基本柱图请求基本柱图接口动作连线。
  6. 在连线中添加一个转换器,并命名为动态传参
    具体操作方法请参见配置节点编程
    转换器添加成功后,最终效果如下图所示。
    组件连线样式
  7. 配置转换器。
    1. 右键单击名称为动态传参的转换器,选择编辑
    2. 转换器设置对话框的转换器脚本编辑区域,输入转换条件,完成后单击保存
      当前转换器的示例代码如下。
      return {
        id:data.id   //柱图api将添加参数id:data.id,重新请求数据。
      };
      说明 当单击Tab时,触发数据请求,柱图API将添加参数id:data.id,重新请求数据。例如data.id为1,请求API将变为http://api.test?id=1
  8. 转换器配置完成后,单击节点编程配置页面右上角的应用图标,将交互效果应用到大屏项目中。
  9. 单击页面左上角的返回图标,返回大屏编辑器页面。单击预览,查看Tab列表控制基本柱图在请求数据接口时传递动态参数的交互效果。
    控制动态参数