监视页面元素尺寸变化（echarts因为元素尺寸变化而没有resize）

背景

使用echarts，通常都会在浏览器窗口尺寸改变的时候resize图表。

const resize = () => {
    cInstance.current?.resize({
        animation: { duration: 300 },
    });
};    
useEffect(() => {
    window.addEventListener('resize', resize);
    return () => {
        window.removeEventListener('resize', resize);
    };
}, []);

在使用第三方组件库布组件后，常常会有菜单栏的收起和展开功能。通过菜单栏收放，content区的宽度会实时进行变化。但是该变化不属于浏览器大小变化，因此不会触发onResize。导致在content区中的echarts图表无法resize。

 

解决

ResizeObserver

ResizeObserver 接口监视 Element 内容盒或边框盒或者 SVGElement 边界尺寸的变化。

通过监听图表画布尺寸是否发生改变而进行图表resize操作

• cDom为画布节点，将画布节点作为目标节点进行监听
• new ResizeObserver()构造函数接受一个回调，基础为
  •   

    //entries 一个 ResizeObserverEntry 对象数组，可以用于获取每个元素改变后的新尺寸。
    (entries) => {
        for (let entry of entries) {
            if (entry.target === cDom.current) {
                ...
            }
        }
    }

• 通过ro对象调用observe api对具体节点进行监听
• 最后通过unobserve解除某个节点的监听，也可以通过ro.disconnect()解除所有监听

useEffect(() => {
    let ro = null;
    if (cDom.current) {
        ro = new ResizeObserver((entries) => {
            for (let entry of entries) {
                if (entry.target === cDom.current) resize();
            }
        });
        ro.observe(cDom.current);
    }
    return () => {
        if (cDom.current) ro?.unobserve(cDom.current);
    };
}, []);