本文详解如何通过 legend.formatter 自定义 apexcharts 图例，使其在饼图（如 donut 类型）中清晰展示每个系列的名称和对应数值，并提供可复用的格式化函数与 css 样式方案。
本文详解如何通过 legend.formatter 自定义 apexcharts 图例，使其在饼图（如 donut 类型）中清晰展示每个系列的名称和对应数值，并提供可复用的格式化函数与 css 样式方案。
在 ApexCharts 中，默认图例仅显示系列名称（如 "Completed"、"WIP"），但实际业务场景常需同时呈现名称与数值（例如 "Completed: 32"），以提升图表信息密度与可读性。这可通过 legend.formatter 配置项实现——它允许你传入一个函数，动态生成每个图例项的 HTML 内容。
以下是完整、可直接集成的解决方案：
✅ 步骤一：定义统一的图例格式化函数
该函数接收系列名称（seriesName）和上下文对象（opts），从中提取对应数值，并返回结构化 HTML：
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>
`;
};⚠️ 注意：opts.w.globals.series 是当前图表的原始数据数组（非百分比），确保你传入的是数值型数据（如 [32, 2, 1, 1]），而非字符串。
✅ 步骤二：在图表配置中启用自定义图例
将 customLegendFormatter 赋值给 legend.formatter，并可选调整图例位置与间距：
new ApexCharts(document.querySelector("#noOfPoc"), {
series: [pocCompleted, pocWip, pocOnHold, pocDrop],
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: 2px 0;
}
.legend-label {
font-weight: 500;
min-width: 90px;
}
.legend-value {
font-family: monospace;
font-weight: 600;
color: #444;
text-align: right;
min-width: 40px;
}? 补充说明
- legend.formatter 会为每个系列调用一次，opts.seriesIndex 精确指向当前项索引；
- 若需显示百分比（如 "Completed: 88%"），可改用 opts.w.globals.seriesPercentages[opts.seriesIndex]；
- 该方案兼容所有支持图例的图表类型（pie/donut/bar/line），无需修改 dataLabels 配置；
- 推荐将 customLegendFormatter 封装为工具函数，在多个图表中复用，保障 UI 一致性。
通过以上三步，你的 ApexCharts 图例即可专业、直观地呈现「名称 + 数值」双信息结构，显著提升数据传达效率。
