本文档为您介绍使用蓝图编辑器功能,在请求数据接口时传递动态参数,实现Tab列表和基本柱状图联动的方法。
前提条件
准备好您的交互需求。
本案例的交互需求为:当单击Tab列表的某一页签时,基本柱状图传入API数据源内对应的id字段值作为参数,实现基本柱状图的数据联动效果。
背景信息
旧版本的DataV使用回调ID的方法来配置图表数据联动。但是在回调ID配置完成后,并不能直观动态地看到回调ID的传递者和接收者。新版本的DataV为您提供了蓝图编辑器功能,蓝图编辑器通过连线将上下游串联起来,使得数据链路更清晰。
本案例的实际应用场景为:图表联动、图表下钻、服务调用、数据报警等需要通过请求数据接口时带上动态参数的联动效果展示。
理解案例交互
当前案例实现需要用户将交互转成节点和边的关联关系,需要使用的组件有满足需求的事件和动作才能进行配置,否则就无法实现。
- 组件:组件包含两种能力,事件抛出能力和动作执行能力。本案例使用了Tab列表和基本柱状图组件之间的联动。
- Tab列表:这个组件具备抛出点击事件的能力。
- 基本柱状图:属于被联动组件,具有接收数据并执行动作的能力。
- 蓝图编辑器:通过运用逻辑节点编排的方式,将上游组件的交互/事件与下游组件的执行动作绑定,从而实现页面内组件间的交互联动。
说明 蓝图编辑器配置完成后需要在预览页查看配置效果。