數據可視化系列教程之組件通信

語言: CN / TW / HK
在上篇文章中,我們主要講解了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 的同時更有萬元現金等你來拿。
微信搜索 xiaoyuerwise 或掃描識別下方二維碼,備註【飛魚】加入 AIOps 社區飛魚開發者交流羣,與 FlyFish 項目 PMC 面對面交流。