74 lines
2.0 KiB
TypeScript
74 lines
2.0 KiB
TypeScript
"use client"
|
|
|
|
import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis, Tooltip, CartesianGrid } from "recharts"
|
|
|
|
const data = [
|
|
{
|
|
name: "1月",
|
|
对话: 4000,
|
|
卡牌激活: 2400,
|
|
},
|
|
{
|
|
name: "2月",
|
|
对话: 4500,
|
|
卡牌激活: 2800,
|
|
},
|
|
{
|
|
name: "3月",
|
|
对话: 5000,
|
|
卡牌激活: 3200,
|
|
},
|
|
{
|
|
name: "4月",
|
|
对话: 6000,
|
|
卡牌激活: 3600,
|
|
},
|
|
{
|
|
name: "5月",
|
|
对话: 5500,
|
|
卡牌激活: 3300,
|
|
},
|
|
{
|
|
name: "6月",
|
|
对话: 7000,
|
|
卡牌激活: 4000,
|
|
},
|
|
{
|
|
name: "7月",
|
|
对话: 8500,
|
|
卡牌激活: 4800,
|
|
},
|
|
]
|
|
|
|
export function Overview() {
|
|
return (
|
|
<ResponsiveContainer width="100%" height={350}>
|
|
<BarChart data={data}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
|
|
<XAxis dataKey="name" stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
|
|
<YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} tickFormatter={(value) => `${value}`} />
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: "white",
|
|
borderRadius: "8px",
|
|
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
|
|
border: "none",
|
|
}}
|
|
/>
|
|
<Bar dataKey="对话" fill="url(#colorUv)" radius={[4, 4, 0, 0]} barSize={30} animationDuration={1500} />
|
|
<Bar dataKey="卡牌激活" fill="url(#colorPv)" radius={[4, 4, 0, 0]} barSize={30} animationDuration={1500} />
|
|
<defs>
|
|
<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="5%" stopColor="#d946ef" stopOpacity={0.8} />
|
|
<stop offset="95%" stopColor="#d946ef" stopOpacity={0.3} />
|
|
</linearGradient>
|
|
<linearGradient id="colorPv" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="5%" stopColor="#8b5cf6" stopOpacity={0.8} />
|
|
<stop offset="95%" stopColor="#8b5cf6" stopOpacity={0.3} />
|
|
</linearGradient>
|
|
</defs>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
)
|
|
}
|