一、圖表變形

使用Echarts繪制圖表時(shí)，可能會(huì)遇到變形的問題。如下圖：

其原因是Echarts在初始化實(shí)例的時(shí)候，對(duì)應(yīng)dom元素的寬高還沒有確定。
解決方案也很簡(jiǎn)單：
監(jiān)聽對(duì)應(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)是瀏覽器窗口變化的時(shí)候，echarts圖表大小能夠相應(yīng)的變化?？赏ㄟ^監(jiān)聽瀏覽器窗口實(shí)現(xiàn)。

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

多個(gè)echarts圖的話，則

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

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

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

...

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

這時(shí)，可以使用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)聽對(duì)應(yīng)dom元素，調(diào)用resize()解決。

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