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

小焱写作

发布于 2025-09-03 15:43:51

25100

代码可运行

运行总次数：0

代码可运行

在 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%'
        }]
      }
    }
  ]
};