如何使用Recharts制作区间型柱状图

先拆解目标图的核心特征（从你提供的图来看）：

• 分组柱状布局：同一分类下有多根并列柱子
• 柱子样式差异化：部分柱子为空心带边框，部分为实心填充
• 坐标轴与图例匹配：对应不同样式的柱子要有明确图例

以下是具体实现步骤：

1. 构造适配的数据结构 #

给每个数据项添加类型标识对应的字段，方便后续区分样式：

const chartData = [
  { name: '分类1', 实际值: 80, 目标值: 100 },
  { name: '分类2', 实际值: 65, 目标值: 90 },
  { name: '分类3', 实际值: 95, 目标值: 95 },
  // ... 补充更多分类数据
];

2. 用BarChart+多Bar组件实现分组与样式差异 #

通过两个Bar组件分别渲染不同类型的柱子，绑定对应数据字段同时设置差异化样式：

<BarChart width={600} height={300} data={chartData}>
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Legend />
  {/* 实心填充柱子：绑定实际值字段 */}
  <Bar dataKey="实际值" fill="#2e86ab" radius={[4, 4, 0, 0]} barSize={22} />
  {/* 空心带边框柱子：绑定目标值字段 */}
  <Bar 
    dataKey="目标值" 
    fill="transparent" 
    stroke="#f2a365" 
    strokeWidth={2} 
    radius={[4, 4, 0, 0]}
    barSize={22}
  />
</BarChart>

3. 细节优化调整 #

• 柱子间距：通过BarChart的barGap（同组柱子间距）和categoryGap（不同组间距）属性调整
• 样式自定义：如果需要给空心柱子加浅底色，直接修改fill为浅色系即可；若要调整柱子圆角，修改radius数组的数值
• 图例定制：使用Legend组件的formatter属性，自定义图例的显示文本

4. 特殊场景扩展 #

如果目标图是分组+堆叠的混合结构，可以给Bar组件添加stackId属性，实现同组内部分柱子的堆叠效果，配合分组逻辑完成复杂布局。

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