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組件實例對象。