使用Echarts图表时，页面切换后并且改变页面窗口大小，再切回原来页面Echarts图表显示有问题

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组件实例对象。