67 lines
1.2 KiB
Markdown
67 lines
1.2 KiB
Markdown
# 图表 SDK
|
|
|
|
基于 ECharts 封装的图表组件库，供项目统一调用。
|
|
|
|
## 组件
|
|
|
|
### MembersMap 成员地图
|
|
|
|
中国地图 + 城市散点，展示成员分布。
|
|
|
|
```tsx
|
|
import { MembersMap } from "@/app/lib/charts";
|
|
import { MAP_CITIES } from "@/app/data/map-cities";
|
|
|
|
<MembersMap
|
|
data={MAP_CITIES}
|
|
locale="zh"
|
|
dark={false}
|
|
onCityHover={(city) => setHoveredCity(city)}
|
|
/>
|
|
```
|
|
|
|
### BarChart 柱状图
|
|
|
|
```tsx
|
|
import { BarChart } from "@/app/lib/charts";
|
|
|
|
<BarChart
|
|
data={[{ name: "上海", value: 1200 }, { name: "深圳", value: 850 }]}
|
|
title="城市排名"
|
|
dark={false}
|
|
/>
|
|
```
|
|
|
|
### PieChart 饼图
|
|
|
|
```tsx
|
|
import { PieChart } from "@/app/lib/charts";
|
|
|
|
<PieChart
|
|
data={[{ name: "华东", value: 3200 }, { name: "华南", value: 1800 }]}
|
|
title="区域分布"
|
|
dark={false}
|
|
/>
|
|
```
|
|
|
|
### LineChart 折线图
|
|
|
|
```tsx
|
|
import { LineChart } from "@/app/lib/charts";
|
|
|
|
<LineChart
|
|
data={{
|
|
xAxis: ["1月", "2月", "3月"],
|
|
series: [{ name: "新增成员", data: [320, 480, 520] }],
|
|
}}
|
|
title="增长趋势"
|
|
dark={false}
|
|
/>
|
|
```
|
|
|
|
## 类型
|
|
|
|
- `MapCity`: 地图城市数据
|
|
- `BarChartDataItem`: 柱状图数据项
|
|
- `PieChartDataItem`: 饼图数据项
|