Recharts图表无数据显示、月份顺序混乱问题求助

一、图表空白的核心原因与修复 #

你的图表空白主要有两个问题：

• 数据字段不匹配：Area组件的dataKey设为了"uv"，但你传递的数据里销售额对应的字段是"Total Sales"，Recharts找不到对应数据所以无法渲染。
• Props传递与接收不统一：父组件传递的是data={orderStats}，但Chart组件接收的是orderStats参数，导致数据未正确传入AreaChart。

修复后的Chart.jsx：

const Chart = ({ stroke, color, data }) => {
  return (
    <AreaChart
      width={800}
      height={400}
      data={data}
      margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
    >
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      {/* 修正dataKey为实际字段名 */}
      <Area type="monotone" dataKey="Total Sales" stroke={stroke} fill={color} />
    </AreaChart>
  );
};

二、月份顺序混乱的修复 #

之前的代码直接按接口返回顺序拼接数据，无法保证是五月到十一月的固定顺序。解决方案是先把接口数据转为映射表，再按目标月份顺序生成有序数组。

修复后的statistics.js：

const MONTHS = useMemo(
  () => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
  []
);

// 定义需要展示的月份范围：五月到十一月（对应MONTHS的索引4-10）
const targetMonthIndices = useMemo(() => [4,5,6,7,8,9,10], []);

useEffect(() => {
  const getIncomeStats = async () => {
    try {
      const res = await userRequest.get(`/order/previousSales/${id}`);
      // 将接口数据转为{月份数字: 销售额}的映射表
      const salesMap = res.data.reduce((acc, item) => {
        acc[item._id] = item.total;
        return acc;
      }, {});
      // 按目标顺序生成有序数据数组，无数据的月份填充0
      const orderedStats = targetMonthIndices.map(index => ({
        name: MONTHS[index],
        "Total Sales": salesMap[index + 1] || 0 // 月份索引+1对应接口返回的item._id
      }));
      setOrderStats(orderedStats);
    } catch (error) {
      console.error('获取销售数据失败:', error); // 不要忽略错误，方便调试
    }
  };
  getIncomeStats();
}, [MONTHS, targetMonthIndices, id]); // 补充id到依赖项，避免id变化时不重新请求

额外调试建议 #

1. 在getIncomeStats里打印res.data，确认接口返回的item._id是正确的月份数字（比如5对应五月）。
2. 打印生成的orderedStats，检查每个对象的name和Total Sales是否符合预期。

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