echarts圖隨窗口大小的變化而變化

參考https://blog.csdn.net/Kimser/article/details/106683221

var myChart = echarts.init(document.getElementById(domid));
window.addEventListener('resize',function () {//執行
    myChart.resize();
})
//或者
window.onresize = function () {//不執行
       myChart.resize();
}

 

法二：

使用插件：resize-detector:  https://github.com/Justineo/resize-detector

1.  安裝包

npm i --save resize-detector

2. 組件中引入

import { addListener, removeListener } from 'resize-detector'

// adding listener
addListener(elem, callback)

// removing listener, callback can be omitted to indicate that
// all event listeners should be removed
removeListener(elem, callback)

 

 

 addListener：監聽echarts dom，調用resize()方法

離開頁面的時候，銷毀組件:  removeListener;  銷毀chart

 

優化：

由於頁面大小變化時，會多次觸發resize()，所以可以添加防抖：

 在created鈎子里處理過后，resize都是經過防抖處理的，，提升性能。

 

番外：

當把chart封裝成一個組件時，只需向組件里傳遞option即可，

 

 

所以在chart組件里接收option，並且深度監聽option：因為例如只是更改了data里的某個數據，

是watch不到的，chart並不會更新，所以需要深度監聽。