El texto de la leyenda es demasiado largo y hay demasiados.
Cuando usamos gráficos y gráficos circulares, encontraremos que el diseño de la página se superpone o es antiestético debido a demasiados datos, como el texto de la etiqueta es demasiado largo, el número de leyendas es demasiado grande y otros problemas, por lo que hoy hablaremos de encuentros. A estos problemas, se puede mejorar con esas configuraciones.
El texto es demasiado largo, envuélvalo.
legend: {
icon: 'circle',
top: '',
right: '0px',
// width: 120,
// height:'100%',
type: 'scroll', //legend要多，进行分页处理
orient: 'vertical',
textStyle: {
color: 'rgba(223, 231, 252, 0.996078431372549)',
fontSize: 14,
},
data: listData[0].name,
pageIconColor: '#ccc',//分页按钮颜色
pageTextStyle:{
color:'rgba(223, 231, 252, 0.996078431372549)' //分页数字
},
formatter: (name) => {
if (!name) return ''
return this.LineFeedLabel(name, 8) // 根据你的需求修改参数
}
// formatter: function (name) {
// return name;
// }
},
El siguiente es el número de líneas para tratar con texto demasiado largo; aquí está configurado para contener más de 8 palabras.
LineFeedLabel (data, length) {
//data 要处理的字符串
//length 每行显示长度
let word = ''
let num = Math.ceil(data.length / length) // 向上取整数
// 一行展示length个
if (num > 1) {
for (let i = 1; i <= num; i++) {
word += data.substr((i - 1) * length, length)
if (i < num) {
word += '\n'
}
}
} else {
word += data.substr(0, length)
}
return word
},
Si hay demasiadas leyendas, el método de procesamiento de paginación es agregar un type:scroll,orient: 'vertical'atributo a la leyenda para lograr el efecto de paginación.
type: 'scroll', //legend要多，进行分页处理
orient: 'vertical',
Si necesita modificar el estilo y color del texto debajo del efecto de paginación y la flecha de paginación pageIconColor, puede modificarlo a través del atributo
pageIconColor:'#ccc'
Modificación de color cuando el botón de pasar página está inactivo (es decir, cuando se pasa la página hasta el final)
pageIconInactiveColor : '#aaa'
El tamaño de los botones de paginación. Puede ser un número o una matriz, por ejemplo [12,5], significa[宽，高]
pageIconSize : 12
En la leyenda, el espacio entre el botón y la información de la página.
pageButtonItemGap : 5
El formato de visualización de la información de paginación, si desea mostrar el número total de páginas juntas
pageFormatter : '{current}/{total}'
//current与total，都必须是number数值型数字
La configuración de las flechas del icono de paginación se puede modificar y se puede utilizar el modo de flecha original.
pageIcons:{
horizontal
}
La modificación del estilo del texto de la información de paginación es un atributo de estilo CSS normal, solo recuerda nombrarlo con mayúsculas y minúsculas.
pageTextStyle:{
color:'rgba(223, 231, 252, 0.996078431372549)', //分页数字
fontWeight:'400'
}