Wenn Sie das Echarts-Diagramm verwenden, tritt nach dem Seitenwechsel, der Änderung der Seitenfenstergröße und dem anschließenden Zurückwechseln zur Originalseite ein Problem mit der Anzeige des Echarts-Diagramms auf.

Echarts zeigt normalerweise Folgendes an:

 Wechseln Sie die Seite, ändern Sie die Größe des Seitenfensters und kehren Sie dann zur Originalseite zurück:

methods: {
    handlerResize(){
        this.myChart.resize()
    }
},
mounted(){
     window.addEventListener('resize', this.handlerResize);
},
destroyed() {
    window.removeEventListener('resize', this.handlerResize);
},

Es ist ersichtlich, dass wir die Größenänderungsmethode zwar aufgerufen haben, sie jedoch beim Aufrufen der Seite nicht aufgerufen haben, sodass das Echarts-Diagramm nicht automatisch zu seinem ursprünglichen Erscheinungsbild zurückkehrt. Wenn wir zu diesem Zeitpunkt die aktuelle Seitenfenstergröße ändern, Das Diagramm kann erneut aufgerufen werden. resize-Methode und stellen Sie dann die ursprüngliche Größe wieder her. Zu diesem Zeitpunkt müssen wir also nur die Größenänderungsmethode manuell aufrufen.

Wann sollten Sie die Größenänderungsmethode manuell aufrufen? Wir sollten die Größenänderungsmethode manuell aufrufen, wenn wir die aktuelle Komponente eingeben, dh den aktivierten Lebenszyklus:

activated(){
    this.myChart.resize();
},

Gleichzeitig können wir auch den von Vue Router bereitgestellten In-Component-Guard beforeRouterEnter verwenden, um das Größenänderungsereignis von Echarts manuell auszulösen, das beim Eingeben der Komponentenroute ausgelöst wird.

beforeRouteEnter(to, from, next) {
    next(vm => {
        // console.log(to)
        if (to.path === '路由路径') {
            vm.$nextTick(() => {
                setTimeout(() => {
                    vm.myChart.resize();
                },1000) 
            });
        }
    });
},

Die VM im obigen Code stellt das Instanzobjekt der Vue-Komponente dar.