如何在Apache ECharts中实现ChartJS式零值柱状图占满空间效果

不用自定义数据集也能实现这个需求，核心思路是动态调整对应分组中柱子的宽度，以下是具体实现方法：

动态设置柱子宽度 #

先遍历你的两组数据，判断每个年份下是否有数据集的值为0，然后给对应系列的柱子设置不同宽度：

• 当两个数据集都有值时，柱子宽度设为'40%'（两个柱子各占分组空间的40%，留20%间隙）；
• 当其中一个数据集值为0时，把另一个数据集的柱子宽度设为'100%'，直接占满整个分组空间。

示例代码如下：

// 示例原始数据
const yearList = ['2020', '2021', '2022', '2023'];
const dataset1 = [60, 0, 80, 40];
const dataset2 = [35, 70, 0, 55];

// 生成系列配置，动态设置每个数据项的柱子宽度
const barSeries = [
  {
    name: '数据集A',
    type: 'bar',
    data: dataset1.map((val, index) => ({
      value: val,
      // 当另一组数据为0时，当前柱子占满分组
      itemStyle: { width: dataset2[index] === 0 ? '100%' : '40%' }
    }))
  },
  {
    name: '数据集B',
    type: 'bar',
    data: dataset2.map((val, index) => ({
      value: val,
      itemStyle: { width: dataset1[index] === 0 ? '100%' : '40%' }
    }))
  }
];

// 初始化图表
const chartDom = document.getElementById('main');
const myChart = echarts.init(chartDom);
const option = {
  xAxis: {
    type: 'category',
    data: yearList
  },
  yAxis: {
    type: 'value'
  },
  series: barSeries
};
myChart.setOption(option);

替代方案：动态调整分组间隙 #

如果不想给每个数据项单独设置宽度，也可以通过调整categoryGap和barGap实现，但这种方式需要针对整个系列做判断，不如上面的方法精准。比如当某一年份有数据为0时，把对应系列的barGap设为'-100%'，但需要配合隐藏值为0的柱子，复杂度更高，不如动态宽度方案直接。

总结 #

自定义数据集完全不是唯一方案，上面的动态设置柱子宽度的方法不需要修改原始数据结构，只需要在配置系列时做简单的遍历判断，就能满足需求，实现起来高效且直观。

内容的提问来源于stack exchange，提问作者Simone