如何将设置固定宽度与间距的柱状图系列左对齐而非居中？

我已为ECharts柱状图设置了固定宽度与固定间距，请问如何将柱状图系列左对齐而非居中？预期效果如下图所示，当前配置代码如下：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue'],
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200],
      type: 'bar',
      barWidth: 20,
      barGap: 30,
      barCategoryGap: 30,
      align: 'left'
    }
  ]
};

你当前配置里的align: 'left'是多系列柱状图专用的系列间对齐参数，对单系列柱子相对于分类轴的对齐没有作用。要实现单系列柱子左对齐到分类标签的起始位置，需要调整以下两个关键配置：

1. 修改xAxis的boundaryGap，让分类的起始点对齐到坐标轴左侧：

   xAxis: {
     type: 'category',
     data: ['Mon', 'Tue'],
     boundaryGap: [0, 1] // 左侧间隙设为0，右侧设为1，确保分类左对齐
   }
   

2. 将series中的barCategoryGap设为0，取消分类之间的默认额外间隙，同时保留barWidth和barGap来控制柱子宽度与间距：

   series: [
     {
       data: [120, 200],
       type: 'bar',
       barWidth: 20,
       barGap: 30,
       barCategoryGap: 0 // 移除分类间的默认间隙，让柱子紧贴分类起始位置
     }
   ]
   

最终完整配置如下：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue'],
    boundaryGap: [0, 1]
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200],
      type: 'bar',
      barWidth: 20,
      barGap: 30,
      barCategoryGap: 0
    }
  ]
};

调整后，柱子就会左对齐到每个分类的起始位置，匹配你想要的预期效果。

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