版本: 6.1.0

如何在请求数据接口时传递动态参数

本文档为您介绍使用蓝图编辑器功能，在请求数据接口时传递动态参数，实现Tab列表和基本柱状图联动的方法。本案例的实际应用场景为：图表联动、图表下钻、服务调用、数据报警等需要通过请求数据接口时带上动态参数的联动效果展示。

前提条件

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

当前案例实现需要用户将交互转成节点和边的关联关系，需要使用的组件有满足需求的事件和动作才能进行配置，否则就无法实现。

组件：组件包含两种能力，事件抛出能力和动作执行能力。本案例使用了Tab列表和基本柱状图组件之间的联动。
- Tab列表：这个组件具备抛出点击事件的能力。
- 基本柱状图：属于被联动组件，具有接收数据并执行动作的能力。
蓝图编辑器：通过运用逻辑节点编排的方式，将上游组件的交互/事件与下游组件的执行动作绑定，从而实现页面内组件间的交互联动。

信息

说明蓝图编辑器配置完成后需要在预览页查看配置效果。

b. 切换到Tab列表的数据面板中，将数据源配置为如下所示的数据。

[
    {
        "id": 1,
        "content": "销售额"
    },
    {
        "id": 2,
        "content": "数量"
    }
]

c. 单击基本柱状图，在右侧的数据面板中，将数据源配置为如下所示的API数据。

信息

注意 API 数据源的格式为 http://api.test/?value=:value ，并且需要与基本柱状图的默认字段相匹配。

配置画布中串行数据处理内动态传参这个处理方法。
1. 单击串行数据处理逻辑节点，进入右侧配置面板，选择面板内其他配置栏下方的动态传参处理方法，单击右侧箭头打开脚本编辑区域。
2. 在脚本编辑区域，输入代码，完成后单击完成。当前处理方法的示例代码如下。

return {
  id:data.id   //柱图api将添加参数id:data.id，重新请求数据。
};

信息

说明当单击Tab时，触发数据请求，柱图API将添加参数 id:data.id ，重新请求数据。例如 data.id 为1，请求API将变为 http://api.test/?id=1 。