'x'
This commit is contained in:
66
app/lib/charts/README.md
Normal file
66
app/lib/charts/README.md
Normal file
@@ -0,0 +1,66 @@
|
||||
# 图表 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`: 饼图数据项
|
||||
Reference in New Issue
Block a user