如下图，文本过长会显示不全：
查看echarts文档，设置了label的宽度无效，设置overflow也无效。
找了一些方案，说设置startAngle也没用，文本一旦过长，依然会有问题。
最后，在网上找到最终方案，就是自己进行文本截断换行。
相关的代码如下：
/**
* 饼图label手动换行
* @param {*} label 显示的文本
* @param {*} lineLength 每行显示的字符长度
* @returns 返回处理后的文本
*/
export function pieLabelFormatter(label, lineLength = 8) {
// 手动换行
if (label.length <= lineLength) {
return `${label}`
} else if (label.length > lineLength && label.length <= 2 * lineLength) {
return `${label.slice(0, lineLength)}\n${label.slice(lineLength)}`
} else if (label.length > 2 * lineLength && label.length <= 3 * lineLength) {
return `${label.slice(0, lineLength)}\n${label.slice(lineLength, 2 * lineLength)}\n${label.slice(2 * lineLength)}`
} else if (label.length > 3 * lineLength && label.length <= 4 * lineLength) {
return `${label.slice(0, lineLength)}\n${label.slice(lineLength, 2 * lineLength)}\n${label.slice(
2 * lineLength,
3 * lineLength,
)}\n${label.slice(3 * lineLength)}`
} else {
return `${label.slice(0, lineLength)}\n${label.slice(lineLength, 2 * lineLength)}\n${label.slice(
2 * lineLength,
3 * lineLength,
)}\n${label.slice(3 * lineLength, 4 * lineLength)}\n${label.slice(4 * lineLength)}`
}
}
使用方式：
series: [
{
name: '',
type: 'pie',
radius: '40%',
center: ['50%', '40%'],
avoidLabelOverlap: true, // 是否启用防止标签重叠策略
data: this.getSeriesData(),
label: {
formatter: this.pieLabelFormatter,
},
},
],
最终的显示效果如下：
