ECharts 中调整柱状图的宽度（即柱子的粗细）或间距

在 ECharts 中调整柱状图的宽度（即柱子的粗细）或间距，可以通过以下几种方式实现：

1. 使用 barWidth 直接设置柱子宽度

通过 series.barWidth 固定柱子的像素宽度，不受数据量影响：

option = {
   
  series: [{
   
    type: 'bar',
    barWidth: 15,  // 柱子宽度为 15px
    data: [10, 20, 30, 40, 50]
  }]
};

2. 使用 barMaxWidth 限制最大宽度

当数据量较少时，避免柱子过宽：

option = {
   
  series: [{
   
    type: 'bar',
    barMaxWidth: 30,  // 柱子最大宽度为 30px
    data: [10, 20, 30, 40, 50]
  }]
};

3. 使用 barCategoryGap 调整类目间距

控制同一类目下不同系列柱子之间的间距（百分比）：

option = {
   
  series: [{
   
    type: 'bar',
    barCategoryGap: '50%',  // 类目间距为柱子宽度的 50%
    data: [10, 20, 30, 40, 50]
  }]
};

4. 组合使用 barWidth 和 barGap

同时控制柱子宽度和间距：

option = {
   
  series: [{
   
    type: 'bar',
    barWidth: '30%',       // 柱子宽度为类目宽度的 30%
    barGap: '20%',         // 不同系列之间的间距为柱子宽度的 20%
    data: [10, 20, 30, 40, 50]
  }]
};

5. 完整示例：调整柱子粗细和间距

option = {
   
  xAxis: {
   
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月']
  },
  yAxis: {
   
    type: 'value'
  },
  series: [{
   
    type: 'bar',
    barWidth: '20%',       // 柱子宽度为类目宽度的 20%（变细）
    barCategoryGap: '40%', // 类目间距为柱子宽度的 40%
    data: [10, 20, 30, 40, 50]
  }]
};

6. 响应式调整

结合 mediaQuery 根据容器尺寸动态调整：

option = {
   
  mediaQuery: [
    {
   
      // 大屏幕：柱子稍宽
      query: {
    minWidth: 768 },
      option: {
   
        series: [{
   
          barWidth: '30%'
        }]
      }
    },
    {
   
      // 小屏幕：柱子更细，避免拥挤
      option: {
   
        series: [{
   
          barWidth: '15%'
        }]
      }
    }
  ]
};

注意事项

• 百分比 vs 像素：barWidth 可以是像素值（如 15）或百分比（如 '30%'），百分比相对于类目宽度计算。
• 多系列柱状图：如果有多个系列（如对比不同产品数据），使用 barGap 控制系列间间距。
• 数据量影响：数据量越多，柱子会自动变细，可结合 barMaxWidth 限制最大宽度。

通过以上配置，你可以灵活调整柱状图的粗细和间距，让图表更加美观和易读。