如何在堆叠条形图各堆叠的上下方添加数据及自定义标签

AI 小北

2026-10-2

堆叠条形图自定义标签实现方案

若使用ECharts开发
直接修改对应系列的label配置即可：
堆叠分段上方标签设置position: 'top'，下方标签设置position: 'bottom'，通过formatter回调函数返回对应数据项里的公司名称字段值，不需要改动现有数据渲染逻辑。
若使用D3.js开发
绘制完每个堆叠矩形后，单独新增text元素，通过获取当前矩形的x、y、height属性计算坐标：下方标签y坐标取矩形y+height值，上方标签y坐标取矩形y值，绑定对应公司名渲染即可。
若使用Highcharts开发
在plotOptions.bar.dataLabels下新增两组配置，分别设置verticalAlign为top和bottom，通过formatter返回自定义的公司名称内容即可。