Skip to content

Commit 20d4dd9

Browse files
foolvipfoolvip
authored
docs: 改造文档「核心概念 - 标记（Mark）- vector」(#6668) (#6858)
1 parent a6d7cbe commit 20d4dd9

File tree

1 file changed

+133
-64
lines changed

1 file changed

+133
-64
lines changed

‎site/docs/manual/core/mark/vector.zh.md

+133-64
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ title: vector
33
order: 26
44
---
55

6+
## 概述
7+
68
Vector 图形是将数据映射成为`箭头`的样式去可视化展示，通过控制箭头的位置、大小、颜色、角度等信息，去可视化一些向量场数据。它具备有以下视觉通道：
79

810
- `x`：水平方向的位置，对 x 轴刻度对应
@@ -15,74 +17,141 @@ Vector 图形标记会将数据通过上述通道映射成向量数据：`[start
1517

1618
<img alt="vector" src="https://gw.alipayobjects.com/zos/antfincdn/c9nPWlX5Au/vector.png" width="300" />
1719

18-
## 开始使用
19-
20-
<img alt="wind vector" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*6fDIT50ZKnEAAAAAAAAAAAAADmJ7AQ/fmt.webp" width="600" />
21-
22-
```ts
23-
import { Chart } from '@antv/g2';
24-
25-
const chart = new Chart({
26-
container: 'container',
27-
});
28-
29-
chart
30-
.vector()
31-
.data({
32-
type: 'fetch',
33-
value: 'https://gw.alipayobjects.com/os/antfincdn/F5VcgnqRku/wind.json',
34-
})
35-
.encode('x', 'longitude')
36-
.encode('y', 'latitude')
37-
.encode('rotate', ({ u, v }) => (Math.atan2(v, u) * 180) / Math.PI)
38-
.encode('size', ({ u, v }) => Math.hypot(v, u))
39-
.encode('color', ({ u, v }) => Math.hypot(v, u))
40-
.scale('size', { range: [6, 20] })
41-
.scale('color', { type: 'sequential', palette: 'viridis' })
42-
.axis('x', { grid: false })
43-
.axis('y', { grid: false })
44-
.legend(false);
45-
46-
chart.render();
47-
```
48-
49-
更多的案例，可以查看[图表示例](/examples)页面。
50-
51-
## 选项
52-
53-
目前仅有一种同名的图形 `vector`，下面描述一下所有的 `style` 配置项。
54-
55-
### vector
20+
```js | ob
21+
(() => {
22+
const chart = new G2.Chart();
23+
chart.options({
24+
type: 'vector',
25+
data: [
26+
{ longitude: 3.375, latitude: 45.625, u: -1.3287959, v: -2.6778967 },
27+
{ longitude: 3.625, latitude: 45.625, u: -1.012322, v: -2.8640392 },
28+
{ longitude: 3.875, latitude: 45.625, u: -0.7947747, v: -3.0722558 },
29+
{ longitude: 4.125, latitude: 45.625, u: -0.70024896, v: -3.311115 },
30+
{ longitude: 4.375, latitude: 45.625, u: -0.62092346, v: -3.5720115 },
31+
{ longitude: 4.625, latitude: 45.625, u: -0.54210645, v: -3.798527 },
32+
{ longitude: 4.875, latitude: 45.625, u: -0.531152, v: -3.6907976 },
33+
{ longitude: 5.125, latitude: 45.625, u: -0.58284736, v: -3.2739944 },
34+
{ longitude: 5.375, latitude: 45.625, u: -0.6388908, v: -2.8400586 },
35+
{ longitude: 5.625, latitude: 45.625, u: -0.68683237, v: -2.4499083 },
36+
{ longitude: 5.875, latitude: 45.625, u: -0.6949226, v: -2.2482452 },
37+
{ longitude: 6.125, latitude: 45.625, u: -0.67617714, v: -2.189318 },
38+
{ longitude: 6.375, latitude: 45.625, u: -0.6690367, v: -2.1100578 },
39+
{ longitude: 6.625, latitude: 45.625, u: -0.6749189, v: -2.0985062 },
40+
{ longitude: 6.875, latitude: 45.625, u: -0.61023676, v: -2.067676 },
41+
{ longitude: 7.125, latitude: 45.625, u: -0.46769565, v: -1.9350243 },
42+
{ longitude: 7.375, latitude: 45.625, u: -0.31841764, v: -1.7978805 },
43+
{ longitude: 7.625, latitude: 45.625, u: -0.296789, v: -1.6545589 },
44+
{ longitude: 7.875, latitude: 45.625, u: -0.49164182, v: -1.6660733 },
45+
{ longitude: 8.125, latitude: 45.625, u: -0.7730643, v: -1.8458021 },
46+
{ longitude: 8.375, latitude: 45.625, u: -1.0214152, v: -2.0177982 },
47+
{ longitude: 8.625, latitude: 45.625, u: -1.131555, v: -2.0604942 },
48+
{ longitude: 8.875, latitude: 45.625, u: -1.143751, v: -1.9134171 },
49+
{ longitude: 9.125, latitude: 45.625, u: -1.1628431, v: -1.6859006 },
50+
{ longitude: 9.375, latitude: 45.625, u: -1.1996219, v: -1.4945693 },
51+
{ longitude: 9.625, latitude: 45.625, u: -1.2651129, v: -1.385864 },
52+
{ longitude: 9.875, latitude: 45.625, u: -1.340052, v: -1.3189282 },
53+
],
54+
encode: {
55+
x: 'longitude',
56+
y: 'latitude',
57+
rotate: ({ u, v }) => (Math.atan2(v, u) * 180) / Math.PI,
58+
size: 30,
59+
color: ({ u, v }) => Math.hypot(v, u),
60+
},
61+
scales: {
62+
size: { range: [6, 20] },
63+
color: { type: 'sequential', palette: 'viridis' },
64+
},
65+
axis: {
66+
x: { grid: false },
67+
y: { grid: false },
68+
},
69+
style: {
70+
arrowSize: 10,
71+
},
72+
legend: false,
73+
});
5674

57-
| 属性 | 描述 | 类型 | 默认值 |
58-
| ------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | --------- |
59-
| arrowSize | 箭头图标的大小，可以指定像素值、也可以指定箭头长度的相对值。 | `string` \| `number` | '40%' |
60-
| fill | 图形的填充色 | `string` \| `Function<string>` | - |
61-
| fillOpacity | 图形的填充透明度 | `number` \| `Function<number>` | - |
62-
| stroke | 图形的描边 | `string` \| `Function<string>` | - |
63-
| strokeOpacity | 描边透明度 | `number` \| `Function<number>` | - |
64-
| lineWidth | 图形描边的宽度 | `number` \| `Function<number>` | - |
65-
| lineDash | 描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为[0, 0]的效果为没有描边。 | `[number,number]` \| `Function<[number, number]>` | - |
66-
| opacity | 图形的整体透明度 | `number` \| `Function<number>` | - |
67-
| shadowColor | 图形阴影颜色 | `string` \| `Function<string>` | - |
68-
| shadowBlur | 图形阴影的高斯模糊系数 | `number` \| `Function<number>` | - |
69-
| shadowOffsetX | 设置阴影距图形的水平距离 | `number` \| `Function<number>` | - |
70-
| shadowOffsetY | 设置阴影距图形的垂直距离 | `number` \| `Function<number>` | - |
71-
| cursor | 鼠标样式。同 css 的鼠标样式，默认 'default'。 | `string` \| `Function<string>` | 'default' |
75+
chart.render();
76+
return chart.getContainer();
77+
})();
78+
```
7279

73-
## FAQ
80+
## 配置项
81+
82+
| 属性 | 描述 | 类型 | 默认值 | 必选 |
83+
| ------ | ---------------------------------------------------------------------------------------------------- | ----------------- | ------ | ---- |
84+
| encode | 配置 `vector` 标记的视觉通道，包括`x`、`y`、`rotate`、`size`等，用于指定视觉元素属性和数据之间的关系 | [encode](#encode) | - | ✓ |
85+
| style | 配置 `vector` 标记的图形样式 | [style](#style) | - | |
86+
87+
### encode
88+
89+
| 属性 | 描述 | 类型 | 默认值 | 必选 |
90+
| ------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | ------ | ---- |
91+
| x | 绑定 `vector` 标记的 `x` 属性通道，绑定水平方向的位置，与 x 轴刻度对应 | [encode](/manual/core/encode) | - | ✓ |
92+
| y | 绑定 `vector` 标记的 `y` 属性通道，绑定垂直方向的位置，与 y 轴刻度对应，位置锚点定位为箭头的中心 | [encode](/manual/core/encode) | - | ✓ |
93+
| size | 绑定 `vector` 标记的 `size` 属性通道，改变图形标记的大小，`size` 视觉通道映射在箭头的长度上 | [encode](/manual/core/encode) | - | ✓ |
94+
| rotate | 绑定 `vector` 标记的 `rotate` 属性通道, 用于将数据字段映射为箭头的旋转角度 | [encode](/manual/core/encode) | - | ✓ |
95+
| color | 绑定 `vector` 标记的 color 属性通道，如果将数据字段映射到颜色通道，会对数据进行分组，不同的颜色对应不同的分组, `color`视觉通道映射在箭头的颜色上。 | [encode](/manual/core/encode) | - | |
96+
97+
### style
98+
99+
| 属性 | 描述 | 类型 | 默认值 | 必选 |
100+
| ------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | --------- | ---- |
101+
| arrowSize | 箭头图标的大小，可以指定像素值、也可以指定箭头长度的相对值。 | `string` \| `number` | '40%' | |
102+
| fill | 图形的填充色 | `string` \| `Function<string>` | - | |
103+
| fillOpacity | 图形的填充透明度 | `number` \| `Function<number>` | - | |
104+
| stroke | 图形的描边 | `string` \| `Function<string>` | - | |
105+
| strokeOpacity | 描边透明度 | `number` \| `Function<number>` | - | |
106+
| lineWidth | 图形描边的宽度 | `number` \| `Function<number>` | - | |
107+
| lineDash | 描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为[0, 0]的效果为没有描边。 | `[number,number]` \| `Function<[number, number]>` | - | |
108+
| opacity | 图形的整体透明度 | `number` \| `Function<number>` | - | |
109+
| shadowColor | 图形阴影颜色 | `string` \| `Function<string>` | - | |
110+
| shadowBlur | 图形阴影的高斯模糊系数 | `number` \| `Function<number>` | - | |
111+
| shadowOffsetX | 设置阴影距图形的水平距离 | `number` \| `Function<number>` | - | |
112+
| shadowOffsetY | 设置阴影距图形的垂直距离 | `number` \| `Function<number>` | - | |
113+
| cursor | 鼠标样式。同 css 的鼠标样式，默认 'default'。 | `string` \| `Function<string>` | 'default' | |
114+
115+
## 示例
74116

75117
- 怎么指定箭头图标的长度？
76118

77-
有两种指定箭头图标长度的方式，一种是通过填写像素值，比如 `40`，来指定为固定长度；另外一种是通过指定一个百分比，比如 `30%`，来指定参考箭头长度的相对长度。默认值为 `40%`。如下示例：
78-
79-
```ts
80-
chart
81-
.vector()
82-
// ...
83-
.shape('vector')
84-
.style({
85-
arrowSize: 40,
86-
// arrowSize: '30%',
119+
有两种指定箭头图标长度的方式，一种是通过填写像素值，比如 `4`，来指定为固定长度；另外一种是通过指定一个百分比，比如 `30%`，来指定参考箭头长度的相对长度。默认值为 `40%`。如下示例：
120+
121+
```js | ob
122+
(() => {
123+
const chart = new G2.Chart();
124+
chart.options({
125+
type: 'vector',
126+
data: {
127+
type: 'fetch',
128+
value: 'https://gw.alipayobjects.com/os/antfincdn/F5VcgnqRku/wind.json',
129+
},
130+
encode: {
131+
x: 'longitude',
132+
y: 'latitude',
133+
rotate: ({ u, v }) => (Math.atan2(v, u) * 180) / Math.PI,
134+
size: ({ u, v }) => Math.hypot(v, u),
135+
color: ({ u, v }) => Math.hypot(v, u),
136+
},
137+
scales: {
138+
size: { range: [6, 20] },
139+
color: { type: 'sequential', palette: 'viridis' },
140+
},
141+
axis: {
142+
x: { grid: false },
143+
y: { grid: false },
144+
},
145+
style: {
146+
arrowSize: 4,
147+
// arrowSize: '30%',
148+
},
149+
legend: false,
87150
});
151+
152+
chart.render();
153+
return chart.getContainer();
154+
})();
88155
```
156+
157+
更多的案例，可以查看[图表示例](/examples#general-vector)页面。

0 commit comments

Comments
 (0)