65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
'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>
|
|
);
|
|
}
|