ECharts堆叠柱状图存在间隙问题求助

AI 小北

2026-7-7

ECharts堆叠柱状图间隙问题修复方案

问题定位

堆叠柱状图出现间隙，通常由配置不一致或间距参数设置不当导致，结合配置示例可通过以下步骤修复：

统一堆叠标识：所有需要堆叠的系列，必须将stack属性设置为相同值（例如"stackGroup"）。若系列间stack值不同，会导致堆叠逻辑失效，出现错位间隙。
示例代码：
```
series: [
  { name: 'A', type: 'bar', stack: 'stackGroup', data: [...] },
  { name: 'B', type: 'bar', stack: 'stackGroup', data: [...] }
]
```
消除柱子间距：在系列配置中添加barGap: '0%'，同时在xAxis配置中设置barCategoryGap: '0%'，彻底移除堆叠柱子及类目间的间隙。
示例代码：
```
xAxis: {
  type: 'category',
  data: [...],
  barCategoryGap: '0%'
},
series: [
  {
    type: 'bar',
    stack: 'stackGroup',
    barGap: '0%',
    data: [...]
  }
]
```
检查数据完整性：确认每个系列的data数组长度与x轴类目数量一致，避免因null/undefined数据造成的堆叠断层。