本文介绍如何通过自定义 legend.formatter 函数，为 apexcharts 的饼图（donut）图例同时显示系列名称和对应数值，并提供可复用的样式与代码结构。
本文介绍如何通过自定义 legend.formatter 函数，为 apexcharts 的饼图（donut）图例同时显示系列名称和对应数值，并提供可复用的样式与代码结构。
ApexCharts 默认的图例仅显示系列名称（如 “Completed”、“WIP”），但实际业务中常需在图例旁同步展示具体数值（例如 “Completed: 32”），以提升图表可读性与信息密度。官方提供了 legend.formatter 配置项，允许开发者完全控制图例每一项的 HTML 渲染内容，从而实现名称 + 数值的组合展示。
以下是一个完整、可直接运行的配置示例（适用于 Donut 图）：
const customLegendFormatter = (seriesName, opts) => {
const value = opts.w.globals.series[opts.seriesIndex];
return `
<div class="legend-item">
<span class="legend-label">${seriesName}</span>
<span class="legend-value">${value}</span>
</div>
`;
};
new ApexCharts(document.querySelector("#noOfPoc"), {
series: [32, 2, 1, 1],
chart: {
height: 350,
type: 'donut',
toolbar: { show: true }
},
labels: ['Completed', 'WIP', 'Drop', 'On Hold'],
dataLabels: {
formatter: (val, opts) => opts.w.config.series[opts.seriesIndex]
},
legend: {
position: 'left',
offsetY: 80,
formatter: customLegendFormatter // ✅ 关键：注入自定义渲染函数
}
}).render();
配套 CSS（建议添加到页面
.legend-item {
display: flex;
justify-content: space-between;
width: 100%;
padding: 4px 0;
}
.legend-label {
font-weight: 500;
color: #444;
}
.legend-value {
font-weight: 600;
color: #2c3e50;
min-width: 36px;
text-align: right;
}
⚠️ 注意事项：
- opts.w.globals.series 是当前图表渲染时的原始数值数组（非百分比），确保你传入的是 series 数组而非 dataLabels.formatter 返回值；
- 若使用动态数据（如 pocCompleted, pocWip 等变量），请确保它们已正确定义且为数字类型，否则图例中可能显示 NaN；
- legend.formatter 接收两个参数：seriesName（即 labels 数组中对应项）和 opts（含 seriesIndex 等上下文），不可省略或错序；
- 多图表复用时，该 customLegendFormatter 函数可全局声明一次，避免重复定义。
通过上述方式，你不仅能精准控制图例内容，还能灵活扩展（例如添加单位、颜色标识、图标等），真正实现“所见即所需”的专业级图表体验。
