一、圖表變形

使用Echarts繪制圖表時，可能會遇到變形的問題。如下圖：

其原因是Echarts在初始化實例的時候，對應(yīng)dom元素的寬高還沒有確定。
解決方案也很簡單：
監(jiān)聽對應(yīng)dom元素，如果大小發(fā)生變化，調(diào)用resize()方法。

import echarts from 'echarts';

...

const chartDom = document.getElementById('myChart');
let myChart = echarts.init(chartDom);
// 若dom尺寸變化，則resize
const chartObserver = new ResizeObserver(() => {
    myChart.resize();
});
chartObserver.observe(chartDom);

二、自適應(yīng)解決方案

自適應(yīng)是瀏覽器窗口變化的時候，echarts圖表大小能夠相應(yīng)的變化。可通過監(jiān)聽瀏覽器窗口實現(xiàn)。

window.onresize = () => {
    myChart.resize();
}

多個echarts圖的話，則

window.onresize = () => {
    myChart1.resize();
    myChart2.resize();
}

個別時候，也會遇到myChart1與myaChart2不在同一個作用域內(nèi)，如果多次調(diào)用window.onresize()，后一個將會覆蓋掉前一個。如下：

window.onresize = () => {
    myChart1.resize();
}

...

// 后一個執(zhí)行的代碼會覆蓋掉前一個window監(jiān)聽
window.onresize = () => {
    myChart2.resize();
}

這時，可以使用window.addEventListener('resize', callback)來避免監(jiān)聽被覆蓋：

window.addEventListener('resize', () => {
    myChart1.resize();
}, false); // false代表事件句柄在冒泡階段執(zhí)行

...

window.addEventListener('resize', () => {
    myChart2.resize();
}, false);

當(dāng)然，也可以跟最上面的處理一樣，使用ResizeObserver分別監(jiān)聽對應(yīng)dom元素，調(diào)用resize()解決。

參考：
ResizeObserver API：https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver