echarts監控容器ResizeObserver

當resize遇到節流

記得銷毀

我們在使用echarts繪圖的時候往往需要我們監控瀏覽器或者圖表容器的寬高來實現echarts圖表的resize()功能。這裡總結了幾種方法來實現

最常見的就是監控瀏覽器視窗的大小

window.
addeventlistener
('resize'
,this
.chartresize)

其中

this
.echartsobj =
this
.$echarts.
init
(document.
getelementbyid
('testid'))
...chartresize()
,

這種方法自然是有用的，但是有些場景不適用。

如果我們有個可以收縮的側邊欄，當我們收縮側邊欄的時候其實瀏覽器視窗大小是沒有變化的，但由於我們的頁面是響應式的，所以內容區域容器大小是變化的，所以這個時候我們要監控的就是容器大小來實現echarts圖表的resize()

web api提供了乙個方法resizeobserver來實現

const resizeobserver =
newresizeobserver((
)=>
this
.chartresize()
)resizeobserver.
observe
(document.
getelementbyid
('testid'
)

npm提供了乙個庫element-resize-detector，同樣可以幫助我們實現這個功能

import elementresizedetector from
'element-resize-detector'
...let erd =
elementresizedetector()
erd.
listento
(document.
getelementbyid
('testid'),
this
.chartresize)

我們在使用以上功能時，可能會結合節流，比如我們的側邊欄的收縮使用了css3的transition過渡效果的時候，這時候可能展開一次，會執行多個this.chartresize()，這就需要我們使用節流來提供效能。

安裝：

npm i lodash

element-resize-detector中使用節流很簡單：

import elementresizedetector from
'element-resize-detector'
...let erd =
elementresizedetector()
erd.
listento
(document.
getelementbyid
('testid'
), _.
throttle
(this
.chartresize)
,300
)

但是，如果我們在resizeobserver中這樣使用就不起效果：

const resizeobserver =
newresizeobserver((
)=>
)resizeobserver.
observe
(document.
getelementbyid
('testid'
)

那麼要如何實現節流呢？自己寫乙個節流總可以吧（參考之前的文章如何理解js中的函式節流和防抖）：

canresize:
true
...const resizeobserver =
newresizeobserver((
)=>
this
.canresize =
false
settimeout((
)=>
,300)}
)resizeobserver.
observe
(document.
getelementbyid
('testid'
)

銷毀可以選擇在beforedestroy生命鉤子中進行，通常很容易忘記，所以可以選擇在監聽的地方隨手銷毀：

...
resizeobserver.
observe
(document.
getelementbyid
('testid'
)this
.$once
('hook:beforedestroy',(
)=>
)

echarts監控容器ResizeObserver

docker容器監控

TIG監控平台監控docker容器

容器監控實踐 Heapster

echarts監控容器ResizeObserver

docker容器監控

TIG監控平台監控docker容器

容器監控實踐 Heapster

相關推薦