您的位置:  首页 > 技术杂谈 > 正文

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

2022-09-08 11:00 https://my.oschina.net/yunzhihui/blog/5573950 云智慧AIOps社区 次阅读 条评论
在上篇文章中,我们主要讲解了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 面对面交流。
展开阅读全文
  • 0
    感动
  • 0
    路过
  • 0
    高兴
  • 0
    难过
  • 0
    搞笑
  • 0
    无聊
  • 0
    愤怒
  • 0
    同情
热度排行
友情链接