From 9b8ed2dcc90dec6c847b1921cd6719f4f40c62d7 Mon Sep 17 00:00:00 2001
From: haoxinyan <19103470692@163.com>
Date: Sat, 4 Apr 2026 18:11:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E7=8E=AF=E5=BD=A2?=
=?UTF-8?q?=E5=9B=BE=E5=8F=8A=E7=82=B9=E5=87=BB=E5=BC=B9=E7=AA=97=E3=80=81?=
=?UTF-8?q?=E5=88=B7=E6=96=B0=E6=95=B0=E6=8D=AE=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
DEVELOPMENT.md | 126 ++++++++++++++++++++++++++++++++++++
package-lock.json | 32 ++++++---
src/components/Dashboard.js | 86 +++++++++++++++++++++++-
3 files changed, 231 insertions(+), 13 deletions(-)
create mode 100644 DEVELOPMENT.md
diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md
new file mode 100644
index 0000000..82d2c0c
--- /dev/null
+++ b/DEVELOPMENT.md
@@ -0,0 +1,126 @@
+# 仪表盘环形图功能开发文档
+
+## 新增功能
+
+在仪表盘页面添加了一个环形图，展示不同产品类别的销售额占比。
+
+## 实现细节
+
+### 1. 依赖库
+
+项目使用了以下依赖库：
+- React 18.3.1
+- Recharts 2.12.7（用于创建图表）
+- Lucide React 0.441.0（用于图标）
+
+### 2. 新增代码
+
+修改了 `src/components/Dashboard.js` 文件，添加了以下内容：
+
+1. **导入必要的组件**：
+ - 从 Recharts 库中导入 `PieChart`, `Pie`, `Cell`, `Legend` 组件
+ - 从 lucide-react 库中导入 `RefreshCw` 图标
+
+2. **数据生成函数**：
+ - 添加了 `generateProductCategoryData()` 函数，生成产品类别数据
+ - 添加了 `generateRandomProductCategoryData()` 函数，生成随机的产品类别数据
+ - 数据包括：电子产品、服装、书籍、其他，占比总和为 100%
+
+3. **状态管理**：
+ - 使用 `useState` 钩子管理产品类别数据，实现数据的动态更新
+
+4. **事件处理函数**：
+ - 添加了 `handlePieClick()` 函数，处理环形图扇形的点击事件
+ - 添加了 `handleRefreshData()` 函数，处理刷新数据按钮的点击事件
+
+5. **颜色配置**：
+ - 添加了 `COLORS` 数组，为环形图提供不同颜色
+
+6. **环形图组件**：
+ - 在仪表盘布局中添加了环形图卡片
+ - 在卡片顶部添加了"刷新数据"按钮
+ - 使用 `PieChart` 和 `Pie` 组件创建环形图
+ - 设置了 `innerRadius` 属性创建环形效果
+ - 添加了图例和悬停提示
+ - 为环形图添加了点击事件处理
+
+### 3. 代码结构
+
+```jsx
+// 数据生成函数
+const generateProductCategoryData = () => {
+ return [
+ { name: '电子产品', value: 40 },
+ { name: '服装', value: 30 },
+ { name: '书籍', value: 20 },
+ { name: '其他', value: 10 },
+ ];
+};
+
+// 组件中使用
+const Dashboard = () => {
+ // ... 其他代码 ...
+ const productCategoryData = generateProductCategoryData();
+ const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];
+
+ return (
+ // ... 其他代码 ...
+ {/* Product Category Chart */}
+
+
Product Category Distribution
+
+
+
+ `${name} ${(percent * 100).toFixed(0)}%`}
+ >
+ {productCategoryData.map((entry, index) => (
+ |
+ ))}
+
+ `${value}%`} />
+
+
+
+
+
@@ -78,6 +120,44 @@ const Dashboard = () => {
+ {/* Product Category Chart */}
+
+
+
Product Category Distribution
+
+
+
+
+
+ `${name} ${(percent * 100).toFixed(0)}%`}
+ onClick={handlePieClick}
+ >
+ {productCategoryData.map((entry, index) => (
+ |
+ ))}
+
+ `${value}%`} />
+
+
+
+
+
Recent Transactions