今天在这里介绍一个js API的用法 ResizeObserver
先看下他的兼容性
https://caniuse.com/?search=ResizeObserver
在他出现之前,我们更新 echarts图表尺寸变化 都是监听的 window.onresize
有了他我们可以更直接,更全面的监听到包括echarts元素的大小变化,而不是依赖浏览器窗口的变化了
使用例子如下
// 获取 .canvas-pie 元素
const canvasPie = document.querySelector('.canvas-pie');
// 创建 ResizeObserver 实例
const observer = new ResizeObserver(() => {
// 监听到变化 做你的处理
// 一般都是调用 你创建的echarts实例的resize()方法
});
// 监听 .canvas-pie 元素的大小变化
observer.observe(canvasPie );