如何通过蓝图编辑器实现Tab切换时联动柱状图展示不同指标？

产品使用
1

我在数据大屏里放了一个Tab列表和一个基本柱状图，想实现点击Tab上的“销售额”时，柱状图就展示销售额的数据；点击“数量”时，就展示数量的数据，这个联动用助睿Max的蓝图编辑器怎么做？

2

要实现这个联动，可以按照以下步骤操作：

  1. 首先，在画布编辑器中，配置好Tab列表和基本柱状图的样式和数据。将Tab列表的列数设置为2，并将数据源配置为包含 id 和 content 字段的数据（例如 {"id": 1, "content": "销售额"} 和 {"id": 2, "content": "数量"}）。

  2. 然后，将基本柱状图的数据源配置为API格式，例如 http://api.test/?value=:value，这个 :value 就是后面需要传递的动态参数。

  3. 右键点击这两个组件，将它们都“导出到蓝图编辑器”。

  4. 进入蓝图编辑器配置页面，将左侧节点栏内的Tab列表和基本柱状图节点拖至画布中。

  5. 将Tab列表的“当Tab点击时”事件，与基本柱状图的“请求基本柱状图接口”动作进行连线。

  6. 在连线上会自动添加一个“串行数据处理”逻辑节点，将其处理方法重命名为“动态传参”。

  7. 在“动态传参”的处理方法中，编写如下代码：

  8. javascript

return {
  id:data.id
};
  1. 这样，当单击Tab时，柱状图API就会加上参数 id:data.id 来重新请求数据。例如，如果 data.id 为1，请求API会变为 http://api.test/?id=1，从而展示销售额的数据。
1 个赞