Echarts正常显示:

页面切换并改变了页面窗口大小,再回到原来页面:

methods: {
handlerResize(){
this.myChart.resize()
}
},
mounted(){
window.addEventListener('resize', this.handlerResize);
},
destroyed() {
window.removeEventListener('resize', this.handlerResize);
},
可以看到,即使我们已经调用了resize方法,但是在进入页面的时候并没有去调用,所以Echarts图表不会自动恢复原来的样子,这时候我们再改变一下当前页面窗口大小,图表又可以再次调用resize方法,然后恢复原来的大小。所以这时候只需要我们手动调用一下resize方法就可以了。
什么时候去手动调用resize方法呢?我们应该在进入当前组件的时候,也就是activated生命周期去手动调用一下resize方法:
activated(){
this.myChart.resize();
},
同时,我们还可以使用Vue Router提供的组件内守卫 beforeRouterEnter 来手动触发echarts的resize事件,它会在进入组件路由时触发。
beforeRouteEnter(to, from, next) {
next(vm => {
// console.log(to)
if (to.path === '路由路径') {
vm.$nextTick(() => {
setTimeout(() => {
vm.myChart.resize();
},1000)
});
}
});
},
上述代码中的vm表示vue组件实例对象。
当页面切换或窗口大小改变后,Echarts图表可能无法正确显示。为解决此问题,可以在Vue的`activated`生命周期钩子中或使用`beforeRouteEnter`组件内守卫手动调用`resize`方法,确保图表能适应新的尺寸。这将确保图表在进入或重新进入视图时调整到正确大小。
978

被折叠的 条评论
为什么被折叠?



