关于前端:Echarts图表自适应你可以这样做

36次阅读

共计 1027 个字符，预计需要花费 3 分钟才能阅读完成。

应用 Echarts 绘制图表时，可能会遇到变形的问题。如下图：

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

解决方案也很简略：
监听对应 dom 元素，如果大小发生变化，调用 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);

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

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

多个 echarts 图的话，则

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

个别时候，也会遇到 myChart1 与myaChart2不在同一个作用域内，如果屡次调用window.onresize()，后一个将会笼罩掉前一个。如下：


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

...

// 后一个执行的代码会笼罩掉前一个 window 监听
window.onresize = () => {myChart2.resize();
}

这时，能够应用 window.addEventListener('resize', callback) 来防止监听被笼罩：

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

...

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

当然，也能够跟最下面的解决一样，应用 ResizeObserver 别离监听对应 dom 元素，调用 resize() 解决。

参考资料：

ResizeObserver API：https://developer.mozilla.org…

本文由 mdnice 多平台公布

正文完