Skip to content

Commit 40eda4d

Browse files
tangying1027tangying1027
committed
chore: 增加旭日图&treemap文档
1 parent 2f75603 commit 40eda4d

File tree

2 files changed

+271
-0
lines changed

2 files changed

+271
-0
lines changed

‎site/docs/api/chart/sunburst.md‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
---
2+
title: 旭日图 - Sunburst
3+
order: 6
4+
---
5+
6+
旭日图是一种用于展示层级数据的径向图表，通过同心圆的形式展示数据的层级结构。每一层圆环代表数据的一个层级，扇形的大小表示数据的数值，适合展示具有层级关系的数据结构。
7+
8+
## Usage
9+
10+
```jsx
11+
import { jsx, Canvas, Sunburst } from '@antv/f2';
12+
13+
const data = {
14+
name: 'flare',
15+
children: [
16+
{
17+
name: 'analytics',
18+
children: [
19+
{
20+
name: 'cluster',
21+
children: [
22+
{ name: 'AgglomerativeCluster', value: 3938 },
23+
{ name: 'CommunityStructure', value: 3812 },
24+
{ name: 'HierarchicalCluster', value: 6714 },
25+
{ name: 'MergeEdge', value: 743 },
26+
],
27+
},
28+
],
29+
},
30+
],
31+
};
32+
33+
const colors = [
34+
'rgb(110, 64, 170)',
35+
'rgb(191, 60, 175)',
36+
'rgb(254, 75, 131)',
37+
'rgb(255, 120, 71)',
38+
'rgb(226, 183, 47)',
39+
'rgb(175, 240, 91)',
40+
'rgb(82, 246, 103)',
41+
'rgb(29, 223, 163)',
42+
'rgb(35, 171, 216)',
43+
'rgb(76, 110, 219)',
44+
];
45+
46+
const { props } = (
47+
<Canvas context={context} pixelRatio={1}>
48+
<Sunburst
49+
data={data.children}
50+
coord={{
51+
type: 'polar',
52+
}}
53+
color={{
54+
field: 'name',
55+
range: colors,
56+
}}
57+
value="value"
58+
/>
59+
</Canvas>
60+
);
61+
```
62+
63+
## Props
64+
65+
| 属性名 | 类型 | 描述 |
66+
| ------- | -------------------------- | ----------------------------------------------------- |
67+
| data | `Array` | 数据源，必须是具有层级结构的数组 |
68+
| coord | `CoordProps` | 坐标系配置，旭日图通常使用极坐标系 `polar` |
69+
| color | `ColorAttrObject \| any[]` | 颜色映射配置，可以是颜色数组或包含字段映射的对象 |
70+
| value | `string` | 用于确定扇形大小的数值字段名 |
71+
| sort | `boolean \| Function` | 是否对数据进行排序，默认为 `true`，按数值大小降序排列 |
72+
| onClick | `Function` | 点击事件回调函数 |
73+
74+
### ColorAttrObject
75+
76+
| 属性名 | 类型 | 描述 |
77+
| -------- | ---------------- | -------------------- |
78+
| field | `string` | 用于颜色映射的字段名 |
79+
| range | `any[]` | 颜色范围数组 |
80+
| callback | `(value) => any` | 自定义颜色映射函数 |
81+
82+
## 数据结构
83+
84+
旭日图需要具有层级结构的数据，示例如下：
85+
86+
```js
87+
const data = {
88+
name: 'flare',
89+
children: [
90+
{
91+
name: 'analytics',
92+
children: [
93+
{
94+
name: 'cluster',
95+
children: [
96+
{ name: 'AgglomerativeCluster', value: 3938 },
97+
{ name: 'CommunityStructure', value: 3812 },
98+
{ name: 'HierarchicalCluster', value: 6714 },
99+
{ name: 'MergeEdge', value: 743 },
100+
],
101+
},
102+
// 更多数据...
103+
],
104+
},
105+
// 更多数据...
106+
],
107+
};
108+
```

‎site/docs/api/chart/treemap.md‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
---
2+
title: 矩形树图 - Treemap
3+
order: 7
4+
---
5+
6+
矩形树图是一种用于展示层级数据的可视化图表，通过矩形的大小和颜色来表示数据的数值和分类。它将数据按照层级结构进行分割，每个矩形代表一个数据项，矩形的面积与数据的数值成正比。
7+
8+
## Usage
9+
10+
## 示例
11+
12+
```jsx
13+
import { jsx, Canvas, Treemap } from '@antv/f2';
14+
15+
const data = [
16+
{
17+
name: '贵州茅台',
18+
value: 0.16,
19+
rate: 0.1,
20+
},
21+
{
22+
name: '贵州茅台1',
23+
value: 0.1,
24+
rate: -0.1,
25+
},
26+
{
27+
name: '五粮液',
28+
value: 0.13,
29+
rate: -0.1,
30+
},
31+
{
32+
name: '五粮液',
33+
value: 0.12,
34+
rate: -0.01,
35+
},
36+
{
37+
name: '招商银行',
38+
value: 0.15,
39+
rate: 0,
40+
},
41+
{
42+
name: '招商银行',
43+
value: 0.08,
44+
rate: 0,
45+
},
46+
{
47+
name: '中国平安',
48+
value: 0.07,
49+
rate: 0.1,
50+
},
51+
{
52+
name: '中国平安',
53+
value: 0.06,
54+
rate: 0.1,
55+
},
56+
{
57+
name: '同花顺',
58+
value: 0.1,
59+
rate: 0,
60+
},
61+
{
62+
name: '同花顺',
63+
value: 0.03,
64+
rate: 0,
65+
},
66+
];
67+
68+
const { props } = (
69+
<Canvas context={context} pixelRatio={window.devicePixelRatio}>
70+
<Treemap
71+
data={data}
72+
color={{
73+
field: 'name',
74+
}}
75+
value="value"
76+
space={4}
77+
label={true}
78+
onClick={(record) => {
79+
console.log('点击了:', record.origin);
80+
}}
81+
selection={{
82+
triggerOn: 'click',
83+
selectedStyle: {
84+
fillOpacity: 1,
85+
},
86+
unSelectedStyle: {
87+
fillOpacity: 0.4,
88+
},
89+
}}
90+
/>
91+
</Canvas>
92+
);
93+
```
94+
95+
## Props
96+
97+
| 属性名 | 类型 | 描述 |
98+
| --------- | ------------------------------ | -------------------------------- |
99+
| data | `Array` | 数据源，必须是具有层级结构的数组 |
100+
| value | `string` | 用于确定矩形大小的数值字段名 |
101+
| coord | `CoordProps` | 坐标系配置 |
102+
| color | `ColorAttrObject` | 颜色映射配置 |
103+
| space | `number` | 矩形之间的间距，默认为 0 |
104+
| theme | `Record<string, any>` | 主题配置 |
105+
| nodes | `RecordNode[]` | 节点数据 |
106+
| selection | `any` | 选择配置 |
107+
| label | `boolean \| TextStyleProps` | 是否显示标签，默认为 `false` |
108+
| onClick | `(record: RecordNode) => void` | 点击事件回调函数 |
109+
110+
### ColorAttrObject
111+
112+
| 属性名 | 类型 | 描述 |
113+
| -------- | ----------------------------- | -------------------- |
114+
| field | `string` | 用于颜色映射的字段名 |
115+
| range | `string[] \| number[]` | 颜色范围数组 |
116+
| callback | `(value) => string \| number` | 自定义颜色映射函数 |
117+
118+
### Selection 配置
119+
120+
| 属性名 | 类型 | 描述 |
121+
| --------------- | ------------------------ | ------------------------------- |
122+
| triggerOn | `string` | 触发选择的事件类型，如 'click' |
123+
| type | `'single' \| 'multiple'` | 选择类型，默认为 'single' |
124+
| cancelable | `boolean` | 是否允许取消选择，默认为 `true` |
125+
| defaultSelected | `any[]` | 默认选中的数据项 |
126+
| selectedStyle | `object \| Function` | 选中项的样式 |
127+
| unSelectedStyle | `object \| Function` | 未选中项的样式 |
128+
129+
## 数据结构
130+
131+
矩形树图需要具有层级结构的数据，示例如下：
132+
133+
```js
134+
const data = [
135+
{
136+
name: '贵州茅台',
137+
value: 0.16,
138+
rate: 0.1,
139+
},
140+
{
141+
name: '五粮液',
142+
value: 0.13,
143+
rate: -0.1,
144+
},
145+
{
146+
name: '招商银行',
147+
value: 0.15,
148+
rate: 0,
149+
},
150+
// 更多数据...
151+
];
152+
```
153+
154+
## 使用场景
155+
156+
矩形树图适用于以下场景：
157+
158+
1. 文件系统目录结构展示
159+
2. 组织架构的可视化
160+
3. 分类数据的层级展示
161+
4. 预算分配和资源分布分析
162+
5. 股票市值分布展示
163+
6. 网站流量分析

0 commit comments

Comments
 (0)