legend text is too long and too many
When we use charts and pie charts, we will find that the layout of the page is overlapped or unsightly due to too much data, such as the text of the label is too long, the number of legends is too large, and other problems, so today we will talk about encounters The problem with these problems is that they can be improved through those settings
The text is too long, wrap it
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;
// }
},
The following is the number of lines to deal with too long text, here is set to wrap more than 8 words
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
},
If there are too many legends, the method of paging processing is to add an type:scroll,orient: 'vertical'attribute to the legend to achieve the effect of paging
type: 'scroll', //legend要多，进行分页处理
orient: 'vertical',
If you need to modify the style and color of the text below the paging effect and the pagination arrow pageIconColor, you can modify it through the attribute
pageIconColor:'#ccc'
Color modification when the page turning button is inactive (that is, when the page is turned to the end)
pageIconInactiveColor : '#aaa'
The size of the paging buttons. It can be a number or an array, for example [12,5], it means[宽，高]
pageIconSize : 12
In the legend, the space between the button and the page information
pageButtonItemGap : 5
The display format of the paging information, if you want to display the total number of pages together
pageFormatter : '{current}/{total}'
//current与total，都必须是number数值型数字
The settings of paging icon arrows can be modified, and the original arrow mode can be used
pageIcons:{
horizontal
}
The modification of the text style of the paging information is a normal css style attribute, just remember to name it with camel case
pageTextStyle:{
color:'rgba(223, 231, 252, 0.996078431372549)', //分页数字
fontWeight:'400'
}