在vue中实现echarts图懒加载，与响应式调整大小

最近写了一个可以拖拽的数据可视化工具，其中用到了大量的echarts图渲染，每次加载的图一多就会卡，就考虑使用懒加载，监听echarts图是否在可看见的页面中，如果在才加载。

使用 IntersectionObserver这个 API 能够监测 dom元素是否进入或离开浏览器的视口。只有图表的dom元素进入视口（即用户滚动到图表位置时），图表才被初始化和渲染。

再就是拖拽或者调整页面之后，echarts图所在dom的大小可能改变，需要echarts图能够调整大小。

使用 ResizeObserver 监测dom容器大小的变化，确保图表能够在容器大小调整时调整自身大小。

具体代码如下：

import * as echarts from 'echarts';
import { nextTick } from 'vue';

function initChart(dom, option, theme) {
    let myChart;

    // 使用 IntersectionObserver 监听元素是否进入或离开视口，threshold: 0.1为10%
    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            // 元素进入视口时
            if (entry.isIntersecting) {
                // 初始化图表
                myChart = echarts.init(dom, theme.name);
                // 在下一次事件循环中设置图表选项
                nextTick(() => {
                    myChart.setOption(option);
                });
                // 停止监听元素
                observer.unobserve(dom);
            } 
            // 元素离开视口时
            else if (!entry.isIntersecting) {
                // 如果图表已被创建，销毁图表以释放资源
                if (myChart) {
                    console.log("销毁", myChart);
                    myChart.dispose();
                    // 清除图表实例
                    // myChart = null;
                }
            }
        });
    }, { threshold: 0.1 }); 

    // 开始监听图表容器
    observer.observe(dom);

    // 使用 ResizeObserver 监听容器尺寸变化
    const resizeObserver = new ResizeObserver(entries => {
        for (let entry of entries) {
            // 检查变化的容器是否是该图表的容器
            if (entry.target.id === dom.id) {
                // 如果图表实例存在，调整图表尺寸
                if (myChart) {
                    myChart.resize();
                }
            }
        }
    });
    // 开始监听容器大小变化
    resizeObserver.observe(dom);
}

export default initChart