自定义事件配置

组件可通过配置自定义交互事件来实现多个组件之间的联动及业务监测,一个完整的交互事件由事件类型+条件+组件+动作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};

  • lng、lat:视角中心的经度和纬度;
  • zoom:放大倍数,功能类似于比例尺;

延时

默认为0,单位ms


效果案例

点击选项卡切换页面

需求:现在有2块大屏需搭建类似门户页面,点击tab页进行切换大屏。

*案例效果

第一步:添加【引用面板】组件,并在「引用面板配置」中添加2块大屏,并关联所需要展示的大屏。

*添加引用面板,关联大屏

第二步:添加【选项卡】组件,修改【选项卡】数据,分别命名Tab1、Tab2为「运维监控」与「云结算」。

*修改选项卡名称

第三步:设置【选项卡】交互事件,事件类型【鼠标点击】,设置条件字段【s=1】表示当点击Tab1「运维监控」,组件选择【引用面板】,动作选择【切换组件状态】,并选择状态为【运维监控】;同理,「云计算监控」只需要把条件字段设置s=2,选择状态为云计算监控即可完成整个点击选项卡切换页面配置。

*选项卡自定义事件

达到阈值告警

需求:当消缺率≥80%的时候,单值占比图颜色变为红色,并且需要出现告警弹窗。当消缺率<80%时,颜色需变为蓝色。

*案例效果

首选按照效果案例拖拽出相应组件与文本,并进行命名与组合等操作,并将告警提示组合图层设置默认隐藏,下面进行事件设置:

事件一:单值占比图设置交互事件,设置【value≥0.8】,组件选择【告警提示】,动作【显示告警提示】。具体如下图:

*单值占比图自定义事件1

事件二:同样设置条件【value≥0.8】,组件选择【单值占比图】,动作【更新组件配置】,并点击「编辑组件配置」,将图标颜色填充设为红色。

*单值占比图自定义事件2

事件三:设置条件【value<0.8】,组件选择【单值占比图】,动作【更新组件配置】,并点击「编辑组件配置」,将图标颜色填充设为蓝色。

事件四:设置弹窗关闭按钮image组件,事件类型【鼠标点击】,条件为空,组件选择【告警提示】,动作【隐藏】,即可完成整个达到阈值告警配置。

*单值占比图自定义事件3


多选选项卡切换

需求:对多组件、多场景的显隐效果切换,通过点击就可以实现选中或取消的效果,不限制选中的数量。

*案例效果


首先拖入一个中国2d地图组件,增设数个散点指标,并对他们的样式进行设置,调整为目标的散点样式;再拖入一个多选选项卡组件作为触发事件的组件,选择事件类型为列表状态改变。

事件一:多选选项卡设置交互事件,设置字段名为【0】,预期值为【1】。组件选择中国2d地图的子组件【散点】,动作【显示】。

此处的事件比较特殊,传入的字段值是一个选中状态的数组中的元素,【0】即数组中的第一个元素的状态,通过判断它的true或false进行事件处理。当检测到第一个选项的状态是非0值时,即为选中状态;检测到第一个选项的状态值为0时,即为未选中的状态,具体如下图:

*多选选项卡自定义事件

同理为剩余散点设置自定义事件,只需要配置显示事件,当检测到选项卡的选中状态为【0】即不选中时,检测到条件不通过,该选项对应的组件就会被隐藏。

案例下载

📎选项卡_demo_58802.screen (1).zip

📎选项卡切换页面录屏_58066.screen.zip

*下载zip格式后需解压为screen格式,在【数据大屏】中可进行导入。

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

400-8505-905复制
免费试用
在线咨询
微信社区
易知微-数据可视化
微信扫一扫入群