如何在React中基于MongoDB数据使用Recharts开发饼图

整体实现逻辑 #

你需要先搭建后端接口从MongoDB读取并聚合分类数据，再在React前端请求接口数据，处理后传入饼图组件即可。 #

第一步：编写后端接口（以Express + Mongoose为例） #

1. 安装所需依赖
   npm install express mongoose cors
2. 后端核心代码

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const app = express();
app.use(cors());

// 连接MongoDB
mongoose.connect('mongodb://localhost:27017/你的数据库名', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

// 定义Wallet数据模型
const walletSchema = new mongoose.Schema({
  name: String,
  balance: Number,
  category: String
});
const Wallet = mongoose.model('Wallet', walletSchema);

// 接口：返回分类聚合后的总余额
app.get('/api/wallets/category-stats', async (req, res) => {
  try {
    const stats = await Wallet.aggregate([
      {
        $group: {
          _id: '$category', // 按category分组
          total: { $sum: '$balance' } // 汇总同分类的balance总和
        }
      }
    ]);
    // 格式化返回格式适配前端
    const result = stats.map(item => ({
      name: item._id,
      value: item.total
    }));
    res.json(result);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

app.listen(3001, () => console.log('后端运行在端口3001'));

第二步：修改React前端代码 #

替换你原来的模拟数据逻辑，改为请求后端接口获取数据：

import { useEffect, useState } from 'react';
import { PieChart, Pie, Tooltip } from 'recharts';

function App() {
  const [dataPie, setDataPie] = useState([]);
  const [loading, setLoading] = useState(true);

  // 组件挂载时请求后端数据
  useEffect(() => {
    fetch('http://localhost:3001/api/wallets/category-stats')
      .then(res => res.json())
      .then(data => {
        setDataPie(data);
        setLoading(false);
      })
      .catch(err => console.error('请求数据失败:', err));
  }, []);

  if (loading) return <div>加载中...</div>;

  return (
    <div className="App">
      <div>
        <h1>Balance of Each Category</h1>
        <PieChart width={400} height={400} test="hey, world!">
          <Pie
            dataKey="value"
            isAnimationActive={true}
            data={dataPie}
            cx="50%"
            cy="50%"
            outerRadius={80}
            fill="#8884d8"
            label
          />
          <Tooltip />
        </PieChart>
      </div>
    </div>
  );
}

export default App;

注意事项 #

• 启动项目前先确保MongoDB服务正常运行，且数据库中已有对应结构的钱包数据
• 如果前端运行在3000端口、后端在3001端口，记得后端开启cors配置避免跨域报错
• 若你用其他后端框架（如Next.js API路由、Django等），只需按照相同逻辑实现分类聚合接口即可

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