一据沈、圖表變形
使用Echarts繪制圖表時(shí)莺奔，可能會(huì)遇到變形的問(wèn)題。如下圖：
其原因是Echarts在初始化實(shí)例的時(shí)候遗淳，對(duì)應(yīng)dom元素的寬高還沒(méi)有確定拍柒。
解決方案也很簡(jiǎn)單：
監(jiān)聽(tīng)對(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)的變化疆液∫磺Γ可通過(guò)監(jiān)聽(tīng)瀏覽器窗口實(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)聽(tīng)
window.onresize = () => {
myChart2.resize();
}
這時(shí)，可以使用window.addEventListener('resize', callback)來(lái)避免監(jiān)聽(tīng)被覆蓋：
window.addEventListener('resize', () => {
myChart1.resize();
}, false); // false代表事件句柄在冒泡階段執(zhí)行
...
window.addEventListener('resize', () => {
myChart2.resize();
}, false);
當(dāng)然眶明，也可以跟最上面的處理一樣艰毒，使用ResizeObserver分別監(jiān)聽(tīng)對(duì)應(yīng)dom元素，調(diào)用resize()解決搜囱。
參考：
ResizeObserver API：https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver
