[筆記] Vue2 結合 EChart 與 Vue-Grid-Layout

章節連結

在開發監控相關的頁面上,常會有「拖曳區塊」、「縮放區塊」這兩大需求。這邊筆記下將 Vue-Grid-Layout 結合 EChart 一同使用時,所需要注意的事項和重點。
vue.js logo vue


使用套件

1. Vue-Grid-Layout:https://jbaysolutions.github.io/vue-grid-layout/

若你有用過 Interact.js 這個知名的拖曳、縮放套件的話,那 Vue-Grid-Layout 對你來說應該會很容易上手。因為其背後使用的拖曳縮放技術,就是將 Interact.js 給包裹進來的。

2. EleResize.js

[email protected] 所撰寫的程式碼,目前在網路上普遍流傳使用中


需求

1. 每一個區塊要有「編輯模式」的區分,在編輯模式時,使用者才能調整區塊位置和縮放其大小
2. 在編輯模式時,區塊內的 EChart 不能被點擊
3. 當使用者進行縮放、移動的時候,要能夠取得新的放置位置或是高度
4. 手機板也要能夠正常使用拖曳和編輯功能
5. 當使用者使用「EChart 的區域縮放」功能時,可以回傳範圍的起始和終止時間點


技術點

CSS

1. 從父層要逐層 div 傳入 height:100%
2. 最外層的 #app 要下 box-sizing: border-box;

main.js

1. echarts 以 import * as echarts from ‘echarts’ 引入
2. 將 echarts 方法掛到 Vue.prototype.$echarts 中

EChartComponent

1. 統一撰寫的區塊模板,所需要的值都從父層傳入
2. 為了要取得渲染後的實際 DOM,在 mounted 內要設定 setTimeout 將執行序往後延
3. 切換頁面或是註銷 component,要將 EleResize 監聽的 div 和 echart instance 給關閉

Grid-Item

1. 利用 drag-allow-from 和 drag-ignore-from 決定觸發 drag 行為的範圍。換言之,你可以將 drag-allow-from 綁訂到一個 div class 上面,其餘的放到 drag-ignore-from 所自訂的 div class 中
2. @move  和 @resize 方法由於會頻繁的觸發,需要使用 debounce 方法來取得最後一個回傳值
3. 編輯按鈕透過 input 和 label 的組合,綁定 v-model 和相關的 css


程式碼

Github:https://github.com/andy922200/vue-grid-layout-echarts
vue-grid-layout-echarts demo


參考資料

1. Vue Grid Layout
2. js div resize
3. interact.js
4. ECharts圖表的釋放與清空
5. Convert a Unix timestamp to time in JavaScript
6. echarts dataZoom event does not return timestamp but only percentages

按讚加入粉絲團

延伸閱讀