ECharts横向柱状图调整柱子高度与解决y轴标签截断问题

云上老周

2026-10-20

ECharts 横向柱状图问题修复方案

修复逻辑

调整柱子高度：在series的柱状图配置项中增加barWidth参数自定义柱子宽度（横向柱状图中对应视觉上的高度），如果数据量较多可以同时调整grid配置扩大图表绘制区域，给柱子预留更多展示空间。
修复左侧标签截断：调整grid.left参数给y轴类目标签预留足够的展示宽度，也可以额外配置yAxis.axisLabel的换行规则避免长标签溢出。

完整可用配置示例

option = {
  // 扩大图表区域，left给y轴标签留空间，上下边距调整预留柱子空间
  grid: {
    left: '150px', // 可根据实际标签长度调整数值
    top: '20px',
    bottom: '20px',
    right: '20px'
  },
  xAxis: {
  },
  yAxis: {
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    axisLabel: {
      // 可选：长标签自动换行，避免特别长的标签还是被截断
      width: 120,
      overflow: 'break'
    }
  },
  series: [{
    name: "Sale",
    type: "bar",
    data: [5, 20, 36, 10, 10, 20, 4],
    barWidth: '20px' // 自定义柱子宽度，可根据需求调整，也可填百分比如60%自适应
  }]
}