数据可视化系列教程之组件通信

在上篇文章中，我们主要讲解了FlyFish React组件使用技巧，作为本系列的最后一篇文章，这次我们再来看看组件通信，组件通信（联动）主要是通过一套事件配置来完成。组件中的事件在运行过程中会在特定时机被trigger。

static events

FlyFish提供了一个events的常量，用于组件订阅一些事件来监听组件内部的事件。比如点击事件、屏幕缩放以及生命周期等。

this.bind|once|unbind

在必要的的时候可以给组件绑定事件来实现功能扩展，组件类Component继承了支撑事件机制的基类Event。

• bind(eventName, handler): 绑定事件。

• unbind(eventName, handler?): 解绑事件, 若不传 handler 则默认全部解绑。

• once(eventName, handler): 绑定仅触发一次事件。

 

组件联动

组件添加和接收事件：ListenEvent

EmitEvent

创建大屏并添加事件

• 进入大屏编辑页面

• 右侧选择 事件 Tab

• 事件源选择trigger事件的组件(即EmitEvent)

• 事件类型选择自定义: 内容填写为当前trigger名称

• 操作选择调用组件方法并选择bind事件组件(即ListenEvent)

• 事件动作选择tigger

• 事件类型选择自定义: 内容填写为当前trigger名称

组件DOM事件

• Click

• Dbclick

• Mousedown

• Mouseup

• Mousemove

• Mouseout

• Mouseenter

组件内部事件

事件名	触发时刻	携带参数	说明
mounted	挂载完成
unMount	挂载完成
render	渲染选项完成
update	更新选项完成	要更新的选项
refresh	刷新选项完成
optionsChange	选项被改变	改变后的全部选项	可以作为选项的 filter 使用。
draw	绘制数据完成	绘制的数据
redraw	重绘数据完成
normalize	获取标准化数据	标准化后的数据	可以作为标准化数据的 filter 使用
dataChange	数据被改变	改变后的数据	可以作为数据的 filter 使用。
load	开始加载数据源数据
loaded	数据源数据加载完成	数据源数据

开源福利

如果喜欢我们的项目，请不要忘记点击下方代码仓库地址，在 GitHub / Gitee 仓库上点个 Star，我们需要您的鼓励与支持。此外，即刻参与 FlyFish 项目贡献成为 FlyFish Contributor 的同时更有万元现金等你来拿。

GitHub 地址： https://github.com/CloudWise-OpenSource/FlyFish

Gitee 地址：FlyFish: 飞鱼（FlyFish）是一个数据可视化编码平台。通过简易的方式快速创建数据模型，通过拖拉拽的形式，快速生成一套数据可视化解决方案。

FlyFish 贡献指南：http://bbs.aiops.cloudwise.com/d/717-flyfish

FlyFish 模版中心： https://www.cloudwise.ai/flyFishComponents.html