js监听dom元素变化

今天在这里介绍一个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 );