React中用Recharts实现按账户类型统计的柱状图需求

1. 替换Recharts组件导入 #

将原折线图组件替换为柱状图所需组件，保留基础的坐标轴、提示框等工具组件：

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

2. 添加账户类型统计逻辑 #

在组件内新增统计逻辑，将原始accounts数组转换为按type分组的计数数据。用useMemo缓存计算结果，避免重复渲染：

import { useState, useEffect, useMemo } from "react";
// ... 其他代码

// 按type字段统计各类账户数量
const typeStats = useMemo(() => {
  const countMap = {};
  accounts.forEach(account => {
    const type = account.type;
    countMap[type] = (countMap[type] || 0) + 1;
  });
  // 转换为Recharts兼容的数组格式
  return Object.entries(countMap).map(([type, count]) => ({ type, count }));
}, [accounts]);

3. 配置柱状图组件 #

替换原折线图为柱状图，绑定统计后的数据，配置坐标轴与柱子的对应字段：

return (
  <div>
    <ResponsiveContainer width="100%" height={400}>
      <BarChart
        data={typeStats}
        margin={{ top: 5, right: 20, left: 10, bottom: 5 }}
      >
        <CartesianGrid stroke="#f5f5f5" />
        <XAxis dataKey="type" label={{ value: '账户类型', position: 'insideBottom', offset: -5 }} />
        <YAxis label={{ value: '账户数量', angle: -90, position: 'insideLeft' }} />
        <Tooltip formatter={(value) => [`${value} 个`, '数量']} />
        <Legend />
        <Bar dataKey="count" fill="#387908" name="账户数量" />
      </BarChart>
    </ResponsiveContainer>
  </div>
);

完整修改后的代码 #

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

import { useState, useEffect, useMemo } from "react";
import axios from "axios";
const endpoint = "http://localhost:8000/api";

function PanelAdmin() {
  const [accounts, setAccounts] = useState([]);

  useEffect(() => {
    getAllAccounts();
  }, []);

  const getAllAccounts = async () => {
    const response = await axios.get(`${endpoint}/accounts`);
    setAccounts(response.data);
  };

  // 按type统计账户数量
  const typeStats = useMemo(() => {
    const countMap = {};
    accounts.forEach(account => {
      const type = account.type;
      countMap[type] = (countMap[type] || 0) + 1;
    });
    return Object.entries(countMap).map(([type, count]) => ({ type, count }));
  }, [accounts]);

  return (
    <div>
      <ResponsiveContainer width="100%" height={400}>
        <BarChart
          data={typeStats}
          margin={{ top: 5, right: 20, left: 10, bottom: 5 }}
        >
          <CartesianGrid stroke="#f5f5f5" />
          <XAxis dataKey="type" label={{ value: '账户类型', position: 'insideBottom', offset: -5 }} />
          <YAxis label={{ value: '账户数量', angle: -90, position: 'insideLeft' }} />
          <Tooltip formatter={(value) => [`${value} 个`, '数量']} />
          <Legend />
          <Bar dataKey="count" fill="#387908" name="账户数量" />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}

export default PanelAdmin;

关键说明 #

• useMemo依赖accounts数组，仅当账户数据更新时重新计算统计结果，优化渲染性能
• 使用ResponsiveContainer替代固定宽高，让图表自适应容器尺寸
• 自定义坐标轴标签和提示框格式，提升图表可读性
• 柱状图的dataKey绑定统计后的count字段，X轴直接绑定账户类型type字段

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