如何使用Recharts实现下图所示的图表？

先确认你已安装 Recharts 依赖：

npm install recharts

根据你提供的图表样式，这是一个分组柱状图，以下是完整实现代码：

1. 定义模拟数据（可根据实际业务调整） #

const chartData = [
  { name: '类别1', 系列A: 420, 系列B: 330, 系列C: 250 },
  { name: '类别2', 系列A: 310, 系列B: 220, 系列C: 140 },
  { name: '类别3', 系列A: 500, 系列B: 410, 系列C: 320 },
  { name: '类别4', 系列A: 230, 系列B: 160, 系列C: 110 },
];

2. 编写图表组件 #

import React from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const TargetBarChart = () => {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <BarChart
        data={chartData}
        margin={{ top: 20, right: 30, left: 20, bottom: 10 }}
        barCategoryGap="30%"
        barGap={0}
      >
        {/* 网格线（可选，不需要可删除） */}
        <CartesianGrid strokeDasharray="3 3" stroke="#eee" />
        {/* X轴 */}
        <XAxis dataKey="name" />
        {/* Y轴 */}
        <YAxis />
        {/* 悬浮提示框 */}
        <Tooltip />
        {/* 图例 */}
        <Legend />
        {/* 各系列柱子，颜色可匹配原图调整 */}
        <Bar dataKey="系列A" fill="#8884d8" />
        <Bar dataKey="系列B" fill="#82ca9d" />
        <Bar dataKey="系列C" fill="#ffc658" />
      </BarChart>
    </ResponsiveContainer>
  );
};

export default TargetBarChart;

关键配置说明 #

• ResponsiveContainer：让图表自适应父容器宽度，适配不同屏幕
• barCategoryGap="30%"：控制不同类别组之间的间距，可按需调整
• barGap={0}：同组内柱子间的间距设为0，更贴合原图效果
• fill：设置每个系列柱子的颜色，可根据原图色值替换

如果原图是堆叠柱状图，只需给BarChart和每个Bar添加stackId属性即可：

<BarChart data={chartData} stackId="group">
  <Bar dataKey="系列A" fill="#8884d8" stackId="group" />
  <Bar dataKey="系列B" fill="#82ca9d" stackId="group" />
  <Bar dataKey="系列C" fill="#ffc658" stackId="group" />
</BarChart>

你可以根据实际需求调整数据、颜色、尺寸等细节，比如修改YAxis的刻度范围、自定义Tooltip样式等。

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