Vue3+echarts5踩坑，resize方法报错

项目要做一个数据统计可视化的模块，按照官网做法调用resize方法时报错：

卡了一整天，最后在官方issues上找到了原因，记录一下。
原因：Vue3使用了proxy，Echarts无法从中获取内部变量
解决方法：不要在data中定义chart，或者使用shallowRef

mounted() {
            // 注：图表不能放进data，vue3使用proxy，echarts无法从中获取变量
            let charts = [
                { id: 'yearChart', chart: null, options: yearOption },
                { id: 'monthChart', chart: null, options: monthOption }
            ]

            // 使用刚指定的配置项和数据显示图表。
            this.$nextTick(() => {
                this.charts.forEach(p => {
                    p.chart = echarts.init(document.getElementById(p.id));
                    p.chart.setOption(p.options);
                })
            })

            // 监听窗口变化，重绘图表
            window.addEventListener("resize", (() => {
                this.charts.forEach(p => {
                    setTimeout(() => { // 避免多图同时加载卡顿
                        p.chart.resize();
                    }, 200)
                })
            }));
        },

参考：官方issues
————————————————
版权声明：本文为CSDN博主「B_rabbit_d」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/B_rabbit_d/article/details/119275715