Echarts displays normally:
Switch the page and change the page window size, and then return to the original page:
methods: {
handlerResize(){
this.myChart.resize()
}
},
mounted(){
window.addEventListener('resize', this.handlerResize);
},
destroyed() {
window.removeEventListener('resize', this.handlerResize);
},It can be seen that even though we have called the resize method, we did not call it when entering the page, so the Echarts chart will not automatically return to its original appearance. At this time, if we change the current page window size, the chart can be called again. resize method and then restore the original size. So at this time we only need to manually call the resize method.
When should you manually call the resize method? We should manually call the resize method when entering the current component, that is, the activated life cycle:
activated(){
this.myChart.resize();
},At the same time, we can also use the in-component guard beforeRouterEnter provided by Vue Router to manually trigger the resize event of echarts, which will be triggered when entering the component route.
beforeRouteEnter(to, from, next) {
next(vm => {
// console.log(to)
if (to.path === '路由路径') {
vm.$nextTick(() => {
setTimeout(() => {
vm.myChart.resize();
},1000)
});
}
});
},The vm in the above code represents the vue component instance object.