如果你遇到使用饼状图时,左侧的文字太长会被覆盖,该怎么解决呢
方法一:在legend中修改formatter,这个是超出后面添加…
legend: {
type: 'scroll',
scrollDataIndex: 0,
orient: 'vertical',
left: 10,
data: dataName,
itemGap: 20,
top: 'middle',
align: 'left',
icon: 'circle',
formatter: (name) => {
if (!name) return ''
if (name.length > 10) { 10是截取的字符串长度,根据你的情况调整数值
name = name.slice(0, 10) + '...'
}
return name
}
}
方法二:在legend中修改formatter,超出换行显示
legend: {
type: 'scroll',
scrollDataIndex: 0,
orient: 'vertical',
left: 10,
data: dataName,
itemGap: 20,
top: 'middle',
align: 'left',
icon: 'circle',
formatter: (name) => {
if (!name) return ''
return this.getEqualNewlineString(name, 10) // 根据你的需求修改参数
}
}
超出换行的方法
//params 要处理的字符串
//length 每行显示长度
getEqualNewlineString (params, length) {
let text = ''
let count = Math.ceil(params.length / length) // 向上取整数
// 一行展示length个
if (count > 1) {
for (let z = 1; z <= count; z++) {
text += params.substr((z - 1) * length, length)
if (z < count) {
text += '\n'
}
}
} else {
text += params.substr(0, length)
}
return text
}
下图为超出指定字符串换行的效果图
饼图series的label显示修改
var option = {
series: [
{
label: {
normal: {
show: true,
textStyle: {
fontSize: 10
},
formatter: (params) => {
//调用自定义显示格式
return this.getEqualNewlineString(params.name,10);
},
},
emphasis: {
show: true
}
},
}
]
}