数据可视化系列教程之组件通信
在上篇文章中，我们主要讲解了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 的同时更有万元现金等你来拿。
Gitee 地址： https://gitee.com/CloudWise/fly-fish
FlyFish 贡献指南： http://bbs.aiops.cloudwise.com/d/717-flyfish
FlyFish 模版中心： https://www.cloudwise.ai/flyFishComponents.html
微信搜索 xiaoyuerwise 或扫描识别下方二维码，备注【飞鱼】加入 AIOps 社区飞鱼开发者交流群，与 FlyFish 项目 PMC 面对面交流。
