如何在React Apexcharts中为每个series的柱状图条块添加间距？

开发者阿泽

2026-10-7

React Apexcharts 多系列柱状图条块间距设置方案

核心通过修改图表配置中plotOptions.bar的相关属性实现间距调整，具体规则如下：

调整同分类下不同系列柱子的间距：修改barPercentage属性，取值范围0-1，值越小单根柱子宽度越窄，同组内柱子间距越大，默认值为0.7
调整不同分类的柱子组之间的间距：修改categoryPercentage属性，取值范围0-1，值越小柱子组整体宽度越窄，不同组的间距越大，默认值为0.8
调整图表整体与边框的间距：修改chart.spacing属性，传入四个数值分别对应上、右、下、左的内边距，单位为像素

完整代码示例

import React from "react";
import Chart from "react-apexcharts";

const SpacedBarChart = () => {
  const chartOptions = {
    chart: {
      type: "bar",
      // 可选：配置图表整体内边距
      spacing: [15, 10, 15, 10]
    },
    plotOptions: {
      bar: {
        // 同组内柱子占比，值越小同组间距越大
        barPercentage: 0.5,
        // 柱子组在分类宽度中的占比，值越小组间间距越大
        categoryPercentage: 0.6
      }
    },
    series: [
      {
        name: "销售额",
        data: [30, 40, 35, 50, 49, 60, 70]
      },
      {
        name: "利润",
        data: [12, 18, 15, 22, 19, 25, 28]
      }
    ],
    xaxis: {
      categories: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"]
    }
  };

  return <Chart options={chartOptions} series={chartOptions.series} type="bar" height={350} />;
};

export default SpacedBarChart;