La inicialización de vue e charts no se representa según el ancho máximo

This.$refs.chart.resize() es el método adaptativo proporcionado por el sitio web oficial.

El núcleo aquí es $nextTick. Esta función adaptativa se ejecuta después de la representación de la página. se completa

2) Adaptarse cuando la ventana cambia

window.addEventListener("resize", this.resizeTheChart //Esta oración está montada

); En métodos:

resizeTheChart() {

if (this.$refs amp; amp; this.$refs.echarts1) {

this.$refs .echarts1.resize ();

}

Aquí, agregue un monitor de función adaptativa a la ventana, cuando se cambie el tamaño de la pantalla, el lienzo también cambiará en consecuencia. .

Resumen

Todas las soluciones adaptativas proporcionadas en Internet solo abordan el problema de la adaptación de la ventana. De hecho, la adaptación de la ventana también se puede resolver, pero cuando se renderiza por primera vez. Habrá problemas de incompatibilidad que deberán solucionarse con nextTick.

Después de verificar, la longitud y el ancho predeterminados de los vue-echarts descargados son 600 px * 400 px. Si la longitud y el ancho del cuadro exterior son más pequeños que esto, lo excederá y la función adaptativa en sí. Resuelve este problema, pero parece ser asincrónico. Si solo lo escribe una vez en el modo montado, se ejecutará una vez antes de que se genere el lienzo, lo que no logrará el efecto deseado.