Echarts图表变形与自适应解决方案

Posted 2022-11-29 仲夏の梦

原因：是Echarts在初始化实例的时候，对应dom元素的宽高还没有确定。

1. 监听对应dom元素，如果大小发生变化，调用resize()方法。

let chartDom = document.getElementById('myChart');
let myChart = echarts.init(chartDom);
// 若dom尺寸变化，则resize

const chartObserver = new ResizeObserver(() => 
    myChart.resize();
);
chartObserver.observe(chartDom);

2. 自适应是浏览器窗口变化的时候，echarts图表大小能够相应的变化。可通过监听浏览器窗口实现

// 单个
window.onresize = () => 
    myChart.resize();


// 不在同一个作用域内，如果多次调用window.onresize()，后一个将会覆盖掉前一个
window.onresize = () =>  
    myChart1.resize();
    myChart2.resize();


// 完美解决方案 window.addEventListener('resize', callback)
window.addEventListener('resize', () => 
    myChart1.resize();
, false);// false代表事件句柄在冒泡阶段执行

...

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