86 lines
2.3 KiB
TypeScript
86 lines
2.3 KiB
TypeScript
"use client"
|
|
|
|
import {
|
|
LineChart as RechartsLineChart,
|
|
Line,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
} from "recharts"
|
|
import { BarChart as RechartsBarChart, Bar } from "recharts"
|
|
|
|
const lineData = [
|
|
{ name: "周一", 新增微信号: 12 },
|
|
{ name: "周二", 新增微信号: 19 },
|
|
{ name: "周三", 新增微信号: 3 },
|
|
{ name: "周四", 新增微信号: 5 },
|
|
{ name: "周五", 新增微信号: 2 },
|
|
{ name: "周六", 新增微信号: 3 },
|
|
{ name: "周日", 新增微信号: 10 },
|
|
]
|
|
|
|
const barData = [
|
|
{ name: "周一", 新增好友: 120 },
|
|
{ name: "周二", 新增好友: 190 },
|
|
{ name: "周三", 新增好友: 30 },
|
|
{ name: "周四", 新增好友: 50 },
|
|
{ name: "周五", 新增好友: 20 },
|
|
{ name: "周六", 新增好友: 30 },
|
|
{ name: "周日", 新增好友: 100 },
|
|
]
|
|
|
|
export function LineChart() {
|
|
return (
|
|
<ResponsiveContainer width="100%" height={180}>
|
|
<RechartsLineChart data={lineData}>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis dataKey="name" />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Line type="monotone" dataKey="新增微信号" stroke="#8884d8" />
|
|
</RechartsLineChart>
|
|
</ResponsiveContainer>
|
|
)
|
|
}
|
|
|
|
export function BarChart() {
|
|
return (
|
|
<ResponsiveContainer width="100%" height={180}>
|
|
<RechartsBarChart data={barData}>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis dataKey="name" />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Bar dataKey="新增好友" fill="#82ca9d" />
|
|
</RechartsBarChart>
|
|
</ResponsiveContainer>
|
|
)
|
|
}
|
|
|
|
export function TrendChart({ data, dataKey = "value", height = 300 }) {
|
|
return (
|
|
<div className="w-full" style={{ height: `${height}px` }}>
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<RechartsLineChart data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis dataKey="name" />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Line
|
|
type="monotone"
|
|
dataKey={dataKey}
|
|
stroke="#3b82f6"
|
|
strokeWidth={2}
|
|
dot={{ r: 4, fill: "#3b82f6" }}
|
|
activeDot={{ r: 6, fill: "#3b82f6" }}
|
|
isAnimationActive={true}
|
|
/>
|
|
</RechartsLineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
)
|
|
}
|
|
|