ECharts饼图如何在扇区内显示百分比？

Question

在使用 ECharts 绘制饼图时，开发者常遇到“如何在扇区内准确显示百分比数值”的问题。默认情况下，ECharts 可通过 `label` 配置项展示数据，但部分用户发现百分比未自动计算或显示位置不合理。常见疑问包括：如何格式化 label 以显示保留两位小数的百分比？如何确保百分比文本居中显示在每个扇区内部？尤其是在扇区角度较小时，文本重叠或溢出该如何处理？此外，结合 `formatter` 函数自定义内容时，如何正确获取百分比值并避免显示 NaN 或 undefined？这些问题影响可视化效果与用户体验。

Answer 1

一、ECharts 饼图百分比显示基础配置

在 ECharts 中，饼图的标签通过 series.label 属性进行控制。默认情况下，label 可以显示数据名称或数值，但不会自动计算并展示百分比。要实现百分比显示，需手动启用 formatter 函数。

series: [{
    type: 'pie',
    label: {
        show: true,
        formatter: '{b}: {d}%'
    },
    data: [
        { value: 40, name: '前端' },
        { value: 30, name: '后端' },
        { value: 20, name: '测试' },
        { value: 10, name: '运维' }
    ]
}]
    

其中，{d} 表示当前扇区对应的百分比（自动计算），{b} 表示数据项名称。这是最基础的百分比显示方式。

二、格式化百分比：保留两位小数与单位添加

实际项目中，用户常要求百分比保留两位小数，并带有“%”符号。虽然 {d} 默认保留整数，但可通过 formatter 结合 JavaScript 方法实现精确控制。

label: {
    show: true,
    formatter: function(params) {
        return params.name + ': ' + params.percent.toFixed(2) + '%';
    }
}
    

注意：params.percent 是 ECharts 提供的原始百分比值（0~100），直接调用 toFixed(2) 即可保留两位小数。

三、文本位置优化：确保百分比居中于扇区内

默认 label 位置为 "outside"，容易导致文本远离扇区中心。若希望文本显示在扇区内部且居中，应设置 position: 'inside'。

position 值	说明
'outside'	标签在扇区外侧（默认）
'inside'	标签位于扇区内部，适合居中显示百分比
'center'	所有标签集中在中心点

label: {
    show: true,
    position: 'inside',
    formatter: '{d:.2f}%'
}
    

四、小角度扇区的文本处理策略

当某个数据项占比极小（如小于 5%），其扇区角度过窄，可能导致文本溢出或重叠。此时可采用条件判断，在小比例时隐藏 label 或调整位置。

label: {
    show: true,
    position: 'inside',
    formatter: function(params) {
        const percent = params.percent;
        return percent < 5 ? '' : `${percent.toFixed(2)}%`;
    }
}
    

也可结合 minAngle 配置最小扇区角度，避免视觉上无法容纳文本。

五、使用 formatter 安全获取百分比：避免 NaN 和 undefined

开发者在自定义 formatter 时常忽略参数结构，导致访问 params.value 或 params.percent 时出现 NaN 或 undefined。正确的做法是先校验数据完整性。

1. 确保 series 数据格式正确（包含 name 和 value）
2. 在 formatter 中使用可选链或默认值
3. 对 percent 做类型检查

formatter: function(params) {
    if (!params || typeof params.percent !== 'number') {
        return 'N/A';
    }
    return `${params.name}: ${params.percent.toFixed(2)}%`;
}
    

六、高级布局：结合 rich 文本实现多样化样式

对于复杂需求，如同时显示名称、数值和百分比，且不同部分样式不同，可使用 rich 配置。

label: {
    show: true,
    position: 'inside',
    formatter: function(params) {
        return `{name|${params.name}}\n{percent|${params.percent.toFixed(2)}%}`;
    },
    rich: {
        name: { fontSize: 12, color: '#fff', align: 'center' },
        percent: { fontSize: 10, color: '#eee' }
    }
}
    

七、响应式适配与用户体验优化流程图

针对不同屏幕尺寸和数据分布，需动态调整 label 显示逻辑。以下为处理流程：

graph TD A[开始绘制饼图] --> B{扇区角度 > 30°?} B -- 是 --> C[显示完整百分比文本] B -- 否 --> D{占比 > 3%?} D -- 是 --> E[仅显示百分比数字] D -- 否 --> F[隐藏 label] C --> G[居中显示 inside] E --> G F --> H[结束]

八、性能与可维护性建议

在大型系统中，频繁重绘饼图可能影响性能。建议：

• 将 formatter 抽离为独立函数，便于单元测试
• 避免在 formatter 内执行复杂计算或 DOM 操作
• 使用 labelLine 控制引导线，提升可读性
• 对国际化场景，封装 formatPercent 工具函数

function formatPieLabel(params) {
    const p = Math.round(params.percent * 100) / 100;
    return `${params.name}: ${p}%`;
}