一扑毡、圖表變形
使用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);
當然，也可以跟最上面的處理一樣原探，使用ResizeObserver分別監(jiān)聽對應(yīng)dom元素乱凿，調(diào)用resize()解決。
參考：
ResizeObserver API：https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver
