数据可视化系列教程之组件通信
在上篇文章中，我们主要讲解了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 地址： 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 面对面交流。
