Vue3+echarts5踩坑，resize方法报错

最新推荐文章于 2025-09-15 09:28:12 发布

原创最新推荐文章于 2025-09-15 09:28:12 发布 · 4.2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue #echarts #js

vue3踩坑专栏收录该内容

3 篇文章

订阅专栏

博客讲述了在Vue3项目中使用Echarts进行数据统计可视化时遇到的问题，由于Vue3的proxy特性导致Echarts无法获取内部变量，从而在调用resize方法时出错。解决方案是避免在data中定义chart，或者改用shallowRef。博主通过官方issues找到解决方法，并分享了代码实现，包括初始化图表和监听窗口尺寸变化以重绘图表。

项目要做一个数据统计可视化的模块，按照官网做法调用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)
                })
            }));
        },