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

前提条件

准备好您的交互需求。

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

背景信息

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

本案例的实际应用场景为:图表联动、图表下钻、服务调用、数据报警等需要通过请求数据接口时带上动态参数的联动效果展示。

理解案例交互

当前案例实现需要用户将交互转成节点和边的关联关系,需要使用的组件有满足需求的事件和动作才能进行配置,否则就无法实现。
  • 组件:组件包含两种能力,事件抛出能力和动作执行能力。本案例使用了Tab列表基本柱状图组件之间的联动。
    • Tab列表:这个组件具备抛出点击事件的能力。
    • 基本柱状图:属于被联动组件,具有接收数据并执行动作的能力。
  • 蓝图编辑器:通过运用逻辑节点编排的方式,将上游组件的交互/事件下游组件的执行动作绑定,从而实现页面内组件间的交互联动。
    说明 蓝图编辑器配置完成后需要在预览页查看配置效果。

配置案例交互

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