echarts 饼图pie文本过长时显示不全

Jun 21, 2024前端

如下图，文本过长会显示不全：

查看echarts文档，设置了label的宽度无效，设置overflow也无效。

找了一些方案，说设置startAngle也没用，文本一旦过长，依然会有问题。

最后，在网上找到最终方案，就是自己进行文本截断换行。

相关的代码如下：

javascript

/**
 * 饼图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)}`
    }
}

使用方式：

javascript

series: [
    {
        name: '',
        type: 'pie',
        radius: '40%',
        center: ['50%', '40%'],
        avoidLabelOverlap: true, // 是否启用防止标签重叠策略
        data: this.getSeriesData(),
        label: {
            formatter: this.pieLabelFormatter,
        },
    },
],

最终的显示效果如下：

Related posts