Caso 1: Cuando el contenido de las coordenadas es texto
Para un histograma horizontal como el de arriba, si el contenido del eje de coordenadas y es demasiado largo, la visualización estará incompleta.
Debido a que los datos se transmiten desde el back-end, algunos serán muy largos y otros relativamente cortos. Si solo ajusta la cuadrícula a ciegas, habrá demasiado espacio en blanco antes de los datos cortos y el diseño no será razonable. En este momento, necesita usar algunos otros atributos.
Solución:
Agregue la siguiente configuración de atributos a axisLabel en yAxis:
Notas:
width: 60,//将内容的宽度固定
overflow: 'truncate',//超出的部分截断
truncate: '...',//截断的部分用...代替Adjunte una captura de pantalla del documento oficial:
Caso 2: Si la ordenada es un número
Como se muestra en la figura, los datos de la izquierda estarán incompletos
1. Primero, puede configurar la autoadaptación de la red
grid: {
top: "15%",
left: "2%",
right: "2%",
bottom: "2%",
containLabel: true
},Después de esta configuración, los números se mostrarán completos:
Pero surgen nuevos requisitos: si los datos son particularmente grandes, los datos de la izquierda ocuparán una posición cada vez más amplia, lo que dará como resultado un diseño antiestético, por lo que podemos lidiar con este número.
Configure el formateador en el atributo axisLabel de yAxis
formatter(v) {
v = v.toString()
if (v >= 100000000000) {
return (v.substring(0, 5) / 10) + '亿'
} else if (v >= 10000000000) {
return (v.substring(0, 4) / 10) + '亿'
} else if (v >= 1000000000) {
return (v.substring(0, 3) / 10) + '亿'
} else if (v >= 100000000) {
return (v.substring(0, 2) / 10) + '亿'
} else if (v >= 10000000) {
return v.substring(0, 4) + '万'
} else if (v >= 1000000) {
return v.substring(0, 3) + '万'
} else if (v >= 100000) {
return v.substring(0, 2) + '万'
} else if (v >= 10000) {
return (v.substring(0, 2) / 10) + '万'
} else if (v >= 1000) {
return v
} else {
return v
}
},El efecto después de esta configuración es el siguiente:
La ventaja de esta configuración es que el lado izquierdo no expandirá una vez el ancho del lado izquierdo de la tabla porque los datos son demasiado grandes.