describir:
El contenedor de echarts estipula que el ancho y el alto deben ser fijos, y el intento anterior de usar porcentajes también fracasó. La razón es que su tamaño de contenedor solo se obtendrá una vez durante la carga inicial, ya sea fijo o porcentual, solo se obtendrá una vez. De esta forma, el contenedor cambia cuando se extrae la página, pero el gráfico no cambia.
resolver:
Configure el evento de escucha para la ventana y escuche el cambio de la ventana para volver a adquirir el tamaño del contenedor de echarts.
1. Primero, debe establecer el ancho y la altura del contenedor principal del contenedor (se puede usar el porcentaje o el píxel)
2. Establezca el ancho y la altura del contenedor como un porcentaje
#chart {
margin-top: 50px;
width: 100%;
height: 75%;
transform: translateY(-40px);
}3. Configure el temporizador después de la configuración
chart.setOption(option);
setTimeout(function() {
window.onresize = function() {
chart.resize();
};
});Representaciones:
Confundir:
Ahora no hay forma de escalar el contenedor del gráfico proporcionalmente. El resultado deseado debería ser mantener el centro horizontal y verticalmente (puede establecer el porcentaje de posición) y escalar el gráfico proporcionalmente.
Después de buscar, se encuentra que el método más común de escalar proporcionalmente el contenedor es reemplazar la altura con el relleno superior e inferior, porque el relleno se basa en el porcentaje del ancho. Pero para echarts, no se puede representar sin altura.
Por el momento, este efecto solo se puede lograr. Puede ser necesario obtener el ancho del contenedor en el ciclo creado, luego calcular la altura por porcentaje y devolverlo a css, y luego agregar esta función a la función de cambio de ventana para cambiar la altura del contenedor. Tener tiempo para intentarlo de nuevo.