如何在Recharts的同一响应式容器中叠加柱状图与折线图？

Recharts 原生支持在同一容器中叠加不同类型的图表，包括柱状图和折线图，且能轻松适配响应式布局。核心是使用 ComposedChart 组件组合多个图表系列，外层用 ResponsiveContainer 确保容器随父元素尺寸变化。

实现步骤与示例代码 #

• 用 ResponsiveContainer 作为外层容器，设置响应式宽高（比如宽度设为100%）
• 在 ComposedChart 内部同时声明 Bar（柱状图）和 Line（折线图）组件
• 配置共享坐标轴，若两个图表数据量级差异大，可通过 yAxisId 配置双Y轴

示例代码：

import { ResponsiveContainer, ComposedChart, Bar, Line, XAxis, YAxis, Tooltip, Legend } from 'recharts';

// 模拟数据
const chartData = [
  { period: 'Q1', 销售额: 12000, 同比增速: 8.5 },
  { period: 'Q2', 销售额: 15000, 同比增速: 12.3 },
  { period: 'Q3', 销售额: 11000, 同比增速: 4.1 },
  { period: 'Q4', 销售额: 18000, 同比增速: 15.7 },
];

export default function StackedBarLineChart() {
  return (
    // 响应式容器，占满父元素宽度，固定高度
    <ResponsiveContainer width="100%" height={400}>
      <ComposedChart data={chartData}>
        <XAxis dataKey="period" />
        {/* 左侧Y轴对应销售额 */}
        <YAxis yAxisId="sales" label={{ value: '销售额', angle: -90, position: 'insideLeft' }} />
        {/* 右侧Y轴对应增速 */}
        <YAxis yAxisId="growth" orientation="right" label={{ value: '同比增速(%)', angle: 90, position: 'insideRight' }} />
        <Tooltip />
        <Legend />
        {/* 柱状图绑定左侧Y轴 */}
        <Bar yAxisId="sales" dataKey="销售额" fill="#2f80ed" />
        {/* 折线图绑定右侧Y轴，使用monotone类型让线条更平滑 */}
        <Line yAxisId="growth" dataKey="同比增速" stroke="#f76707" type="monotone" dot={{ r: 4 }} />
      </ComposedChart>
    </ResponsiveContainer>
  );
}

关键细节说明 #

• 若两个图表数据量级相近，可省略 yAxisId，共用同一个Y轴
• 可通过调整 Bar 和 Line 的样式属性（如fill、stroke、dot）自定义视觉效果
• ResponsiveContainer 会自动监听容器尺寸变化，适配不同屏幕大小

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