tangweijie
e0a6ba2dc4
- Vite + React 18 + TypeScript - TailwindCSS 暗色主题 - 仪表板、分析、事件浏览页面 - Recharts 图表组件 - Zustand 状态管理 - TanStack Query 数据请求
61 lines
1.4 KiB
TypeScript
61 lines
1.4 KiB
TypeScript
import {
|
|
BarChart,
|
|
Bar,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
} from 'recharts';
|
|
|
|
const data = [
|
|
{ hour: '00', events: 120 },
|
|
{ hour: '04', events: 80 },
|
|
{ hour: '08', events: 450 },
|
|
{ hour: '12', events: 380 },
|
|
{ hour: '16', events: 520 },
|
|
{ hour: '20', events: 280 },
|
|
];
|
|
|
|
export default function ActivityChart() {
|
|
return (
|
|
<div className="h-64">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart data={data}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#27272a" />
|
|
<XAxis
|
|
dataKey="hour"
|
|
stroke="#71717a"
|
|
fontSize={12}
|
|
tickLine={false}
|
|
axisLine={false}
|
|
tickFormatter={(value) => `${value}:00`}
|
|
/>
|
|
<YAxis
|
|
stroke="#71717a"
|
|
fontSize={12}
|
|
tickLine={false}
|
|
axisLine={false}
|
|
/>
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: '#18181b',
|
|
border: '1px solid #27272a',
|
|
borderRadius: '8px',
|
|
fontSize: '12px',
|
|
}}
|
|
formatter={(value: number) => [value, '事件数']}
|
|
/>
|
|
<Bar
|
|
dataKey="events"
|
|
fill="#d946ef"
|
|
radius={[4, 4, 0, 0]}
|
|
opacity={0.8}
|
|
/>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
}
|
|
|