自定义事件配置

组件可通过配置自定义交互事件来实现多个组件之间的联动及业务监测，一个完整的交互事件由事件类型+条件+组件+动作4部分组成，下面针对自定交互事件组成元素进行讲解。

*自定义事件结构说明

配置结构

事件类型

事件类型介绍

所有组件默认事件类型当请求完成或数据变化时，即请求完成或数据变化后系统将执行后续动作。事件类型通常有：【当请求完成或数据变化时】，【鼠标点击】，【状态改变】等等。组件的事件类型也存在差异，如交互组件-选项卡组件，事件类型特有点击事件类型。

*事件类型说明

使用场景说明

下面针对几种常用的事件类型及其使用场景进行具体说明：

当请求完成或数据变化时

指请求完成或者数据变化之后，系统将执行后续操作。例如，当数值发生改变，或者达到阈值时，触发相应的自定义事件，此时需要选择事件类型为【当请求完成或数据变化时】。如下图，当消缺率≥80%（数据变化）的时候，单值占比图颜色变为红色，并且触发了告警弹窗（触发自定义事件）。

鼠标点击

指通过点击鼠标，触发相应的自定义事件。例如通过点击选项卡，切换不同的状态或者页面等等。

状态改变

状态改变通常包含以下几种情况：1.鼠标点击 2. 组件轮播 3.组件联动 ，当出现以上几种情况时，且满足配置条件时，系统将执行后续操作。（注：通常在交互组件中比较常用，如果自定义事件出现异常，可以排查事件类型是否选择正确）

条件

条件为非必填选项。自定义条件由判断类型与条件2部分组成。判断类型分为满足全部条件、满足任意条件；条件默认为设置具体某个字段等于、不等于、小于、大于、小于等于、大于等于、包含、不包含预期值。

字段条件

可直接通过定义字段名及预期值，来定义自定义字段条件。

*条件说明

可在数据中查看相应字段做参照，在条件中进行字段条件的填写匹配。

自定义条件

也可在自定义条件中，通过自定义条件代码进行条件配置。

如果想查看自定义条件配置的具体情况，可console.log 后在控制台查看数据情况。（前端开发者可以在js代码的任何部分调console.log，然后你就可以在浏览器的开发者控制台里，看到这个函数调用的那一瞬间你指定的变量或表达式的值）

组件

支持「当前」及「全局」2种模式进行单选/多选组件。

选择「当前」模式时，只能当前项目下选择的父级组件，及图层旁边可查看的一级组件；

选择「全局」模式时，可选择当前项目下的所有组件，可额外选择动态面板、引用面板内部嵌套的子组件，从而达到父级组件控制子组件或子组件控制父级组件的交互效果。

*选择组件说明

动作

显示、隐藏、显隐切换配置项：

配置项	说明
动画类型	渐隐渐现、向右移动
动画时长	默认为1000，单位ms
动画延时	默认为0，单位ms
隐藏卸载	交互组件默认开启隐藏卸载功能，在组件状态切换后可减少内存的使用

移动配置项：

配置项	说明
移动后位置	设置目标x轴、y轴坐标
速率	匀速、慢快慢(cubic-bezier(0.25,0.1,0.25,1))、慢速开始、慢速结束、慢速开始和结束(cubic-bezier(0.42,0,0.58,1))
动画时长	默认为1000，单位ms
动画延时	默认为0，单位ms

缩放配置项：

配置项	说明
缩放原点	支持left、right、center与top、center、bottom参数两两组合点进行缩放
缩放比例	支持x轴、y轴缩放
速率	匀速、慢快慢(cubic-bezier(0.25,0.1,0.25,1))、慢速开始、慢速结束、慢速开始和结束(cubic-bezier(0.42,0,0.58,1))
动画时长	默认为1000，单位ms
延时	默认为0，单位ms

旋转配置项：

配置项	说明
旋转	支持绕x轴、y轴、z轴旋转
透视	可选择是否透视
速率	匀速、慢快慢(cubic-bezier(0.25,0.1,0.25,1))、慢速开始、慢速结束、慢速开始和结束(cubic-bezier(0.42,0,0.58,1))

「更新组件配置」配置项：

配置项	说明
编辑组件配置	支持自定义重新编辑所选组件配置项，触发自定义事件时，组件会按照重新编辑的配置项触发样式上的改变。
延时	默认为0，单位ms

「地图切换」配置项：

配置项	说明
参数	该动作所需接收的数据，return值应为目标地图的adcode
延时	默认为0，单位ms

「地图下钻」配置项：

配置项	说明
参数	该动作所需接收的数据，return值应为下钻区域的adcode。例如填入「return 650000；」则触发自定义事件后，会下钻至新疆省区域
延时	默认为0，单位ms

「视角切换」配置项：

配置项

说明

参数

该动作所需接收的数据，return值应包含lng,lat,zoom信息；例如填入 return {lng:116,lat:32,zoom:10};