回调的使用

名词解释

即组件间需要实现数据联动时，用到的动态参数；

如通过「选项卡」切换A、B维度的「趋势图」数据，此时维度名称即为回调参数，A、B为回调值，选项卡即需要定义回调参数，趋势图接收对应回调参数；

定义回调参数

常用组件如「标题」、「轮播表格」、「图表」、「地图」以及交互类别组件均支持定义回调参数，以实现数据交互切换场景；

选择组件

顶部工具条选择使用如上可进行交互的组件，如选择选项卡组件

判断数据切换场景

根据数据切换场景，定义回调参数；

如需要通过选项卡，切换查看a、b用户各自的趋势数据，则选项卡内需包含区分a、b用户的字段，该字段即可定义为回调参数；

如以下示例处的user字段；

填写回调参数

选中组件，进入「交互」配置模块，定义回调参数

字段值即当前组件内所需传递的字段名称；

变量名即需传递出去的字段名称，可与原字段名一致，也可在此处定义别的名称，即为别名（根据接收方来填写即可）；

如此处传递出去的即为user字段，接收方即支持根据user字段过滤数据即可；

接收回调参数

即数据被切换的组件需要接收 源组件发送出来的回调参数；

静态数据切换

当数据为csv文件或静态json数据时，可直接通过平台过滤器接收回调参数，以达到目的；

如上方定义的user切换趋势图数据，则在趋势处需要接收参数；

数据内包含相应的user字段，以及对应a、b用户数据；

此时可使用过滤器，对user字段进行接收

编写过滤器，对user回调进行接收

执行相应函数 进行数据过滤

此处为user字段，参考如下：

return data.filter(d => d.user == (callbackArgs.user))

预览查看参数回调的结果；

提示：编辑页面避免性能的影响，不自动对回调参数进行执行，所以当组件接收回调配置完成后，编辑页面将看不到相应的回调结果，需执行「预览」或「发布」进行查看；

a用户数据如下；

b用户数据如下；

📎回调示例（静态文件）.zip

其他示例

其流程大致为：

API或数据库数据切换

当用户组件已接入动态数据源，如API或数据库，则需在数据源处进行回调的接收；

EasyV对回调参数 有单独的语法定义，即 :id （冒号加上对应参数名称）；

此处以在线天气API为示例，切换不同城市的天气数据；

首先定义需切换的数据，在源组件处填写好回调参数；

接口处约定可根据城市的adcode进行数据过滤，则源组件处需包含对应adcode，此处为s字段；

交互模块处填写回调参数，此处为s字段；

此处字段值需要配置为数据中的某个字段，如上示例配置为"s"字段。

目标组件接入在线API；

参数处即用到了 方才定义的回调参数s字段，此处city为API需传递的参数，此处修改为"city=:id "即对动态参数s进行接收；

预览效果可见，已可对API数据进行切换；

📎API数据回调示例.zip

若用户对接的数据库，同理 在数据库查询语句处 将:s进行植入即可；

如：

Select weather from table where city=:s

即可实现数据切换；

也可借用数据库直接对原字段值进行接收；

如：

Select :s  as value

此时 value即返回为对应 切换的值，即上方的浙江省、北京市对应的adcode；

以此法在应对组件内各色数据切换场景；

其他示例：

在数据源中使用回调时，根据选项卡传过来的回调值来筛选数据库中的数据，当选项卡切换到产品A时，万用图的数据源为：

SELECT * FROM product WHERE name=产品A

当切换到产品B选项时，其数据源为：

SELECT * FROM product WHERE name=产品B

需要注意的是其书写格式为：

SELECT 字段名 FROM 表名 WHERE name=:condition

:condition为通配符，在选项卡切换时，平台会将其自动替换成对应的值

其流程为：

上述两个方法不一样的地方在于:

在过滤器中使用回调的逻辑是，假设我们事先知道了所有的数据，然后在过滤器中通过监听回调字段(condition),通过选项卡切换时传过来的回调值来筛选不同产品的数据，而通过数据源的方式是实时查询的，选项卡切换一次，图表数据就实时请求一次。可根据实际情况进行选取。

回调相关视频教程

点击下方链接可查看👇

回调视频

如遇其他使用问题，可扫描下方二维码，获取更多产品支持~