React Apexchart多系列柱状图：如何解决柱状过细问题？

解决方法 #

方案一：重构数据为单系列（推荐） #

你当前的问题根源是为了适配多系列图表而填充大量null值，导致每个柱子被分摊到极小的空间里。最直接的解决方式是重构数据，用单系列实现，完全不需要null值。

1. 更新数据结构

把原来的多个series合并成一个，labels对应每个出版物名称，data对应数值：

const data = {
  labels: ["New York Times", "CNET", "Fox News", "The Best BBQ in St. Louis", ...],
  series: [
    {
      name: "出版物",
      data: [5674, 2637, 2524, 2178, ...]
    }
  ]
};

2. 调整图表配置

在plotOptions.bar里开启distributed模式，让每个柱子单独显示在图例中，同时设置合适的barHeight调整柱子粗细：

plotOptions: {
  bar: {
    horizontal: true,
    distributed: true, // 使每个柱子在图例中单独展示
    barHeight: "80%", // 调整柱子高度，建议在60%-90%之间，避免100%导致溢出
    barSpacing: 10, // 可选：设置柱子间的间距
  }
}

这种方式彻底消除了null值的需求，柱子会自动占据每个分类的大部分空间，不会再出现过细的问题，同时图例也能显示每个出版物的名称，完全匹配你的原始需求。

方案二：保留多系列结构并调整配置 #

如果必须保留多系列结构，可以通过调整柱子组宽度让柱子更粗：

更新图表配置

plotOptions: {
  bar: {
    horizontal: true,
    barGroupWidth: "95%", // 让每个柱子占据分类的大部分高度
    barHeight: "80%", // 不要设置为100%，避免溢出屏幕
  }
}

另外，检查图表高度是否足够，如果柱子仍有溢出，可以增大<Chart>组件的height值（比如设为600）。

额外提示 #

• 移除冲突的高度设置：你当前在options里设置了chart.height:350，同时组件里又设了height="500"，保留其中一个即可，避免布局混乱。
• 测试barHeight值：可以用百分比（60%-90%）或者固定像素值（比如30）来找到合适的粗细，同时不会溢出屏幕。

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