Vue3+echarts5踩坑,resize方法报错
项目要做一个数据统计可视化的模块,按照官网做法调用resize方法时报错:卡了一整天,最后在官方issues上找到了原因,记录一下。原因:Vue3使用了proxy,Echarts无法从中获取内部变量解决方法:不要在data中定义chart,或者使用shallowRefmounted() {// 注:图表不能放进data,vue3使用proxy,echarts无法从中获取变量let charts =
·
项目要做一个数据统计可视化的模块,按照官网做法调用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
更多推荐
已为社区贡献8条内容
所有评论(0)