项目要做一个数据统计可视化的模块,按照官网做法调用resize方法时报错:
Wj2utK.png
卡了一整天,最后在官方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

Logo

前往低代码交流专区

更多推荐