feat(ui): 引入图表库并构建资产配置环形图 (Donut Chart)

2026-04-27 23:18:37 +08:00
parent d6e064857d
commit 8f17573fa4
4 changed files with 475 additions and 1 deletions
@@ -0,0 +1,64 @@
+'use client';
+
+import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from 'recharts';
+
+interface AllocationChartProps {
+  data: { name: string; value: number; fill: string }[];
+}
+
+const CHART_COLORS = [
+  '#3b82f6',
+  '#8b5cf6',
+  '#10b981',
+  '#f59e0b',
+  '#ef4444',
+  '#06b6d4',
+];
+
+export default function AllocationChart({ data }: AllocationChartProps) {
+  if (!data || data.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-[300px] text-muted-foreground">
+        暂无数据
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-[300px] w-full">
+      <ResponsiveContainer width="100%" height="100%">
+        <PieChart>
+          <Pie
+            data={data}
+            cx="50%"
+            cy="50%"
+            innerRadius={60}
+            outerRadius={110}
+            paddingAngle={3}
+            dataKey="value"
+          >
+            {data.map((entry, index) => (
+              <Cell
+                key={`cell-${index}`}
+                fill={entry.fill || CHART_COLORS[index % CHART_COLORS.length]}
+              />
+            ))}
+          </Pie>
+          <Tooltip
+            contentStyle={{
+              backgroundColor: 'hsl(var(--card))',
+              borderColor: 'hsl(var(--border))',
+              borderRadius: '8px',
+              color: 'hsl(var(--foreground))',
+              fontSize: '14px',
+            }}
+            formatter={(value: number, name: string) => [
+              value.toLocaleString(),
+              name,
+            ]}
+          />
+        </PieChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}