如何让Recharts柱状图自适应全屏宽度？

你的代码里有两个关键问题导致自适应失效：

• ResponsiveContainer和BarChart之间多了一层div，这会破坏Recharts的自适应布局逻辑
• BarChart设置了固定的width={900}和height={400}，直接覆盖了ResponsiveContainer的自适应配置

按照下面的步骤修改即可：

1. 移除中间的冗余div，让ResponsiveContainer直接包裹BarChart
2. 删除BarChart的width和height属性，交给ResponsiveContainer控制尺寸
3. 确保ResponsiveContainer的父容器有明确的宽度（比如设置width: 100%），如果需要高度自适应，给父容器设置合适的高度或min-height

修改后的代码示例：

// 给外层容器添加样式，确保宽度铺满且有基础高度
<div style={{ width: '100%', minHeight: '400px' }}>
  <ResponsiveContainer width="100%" height="100%">
    <BarChart
      className='m-auto'
      data={data}
      margin={{
        top: 20,
        right: 30,
        left: 30,
        bottom: 5,
      }}
    >
      <XAxis dataKey="你的数据键名" />
      {/* 补充其他图表组件（YAxis、Bar、Tooltip等） */}
    </BarChart>
  </ResponsiveContainer>
</div>

额外注意：

• 如果滚动页面时图表高度异常，可以把ResponsiveContainer的height设为具体数值（比如height={400}），或者确保父容器有确定的高度值
• className='m-auto'的居中效果需要父容器宽度大于图表宽度才会生效，自适应铺满后该样式可能无需保留

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