Skip to content

Commit 0b01ee2

Browse files
louhaojie99娄豪杰
louhaojie99
and
娄豪杰
authored
docs: mark-range、mark-rangeX、mark-rangeY (#6641)
* docs: mark-range 文档改造 * docs: mark-rangeX 文档改造 * docs: mark-rangeY 文档改造 --------- Co-authored-by: 娄豪杰 <[email protected]>
1 parent 73daf22 commit 0b01ee2

File tree

3 files changed

+271
-192
lines changed

3 files changed

+271
-192
lines changed

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

+116-75
Original file line numberDiff line numberDiff line change
@@ -3,84 +3,125 @@ title: range
33
order: 20
44
---
55

6-
使用一组 `x`(x1, x2) 和一组 `y`(y1, y2) 来定位一个矩形区域，常用于绘制辅助背景区域。
7-
8-
## 开始使用
9-
10-
<img alt="range" src="https://mdn.alipayobjects.com/mdn/huamei_qa8qxu/afts/img/A*6JLeTLg7YQoAAAAAAAAAAAAADmJ7AQ" width="600" />
11-
12-
```ts
13-
import { Chart } from '@antv/g2';
14-
15-
const chart = new Chart({ container: 'container' });
16-
17-
chart.data({
18-
type: 'fetch',
19-
value:
20-
'https://gw.alipayobjects.com/os/bmw-prod/0b37279d-1674-42b4-b285-29683747ad9a.json',
21-
});
22-
23-
chart.lineX().data([0]);
24-
chart.lineY().data([0]);
25-
26-
chart
27-
.range()
28-
.data([
29-
{ x: [-25, 0], y: [-30, 0], region: '1' },
30-
{ x: [-25, 0], y: [0, 20], region: '2' },
31-
{ x: [0, 5], y: [-30, 0], region: '2' },
32-
{ x: [0, 5], y: [0, 20], region: '1' },
33-
])
34-
.encode('x', 'x')
35-
.encode('y', 'y')
36-
.encode('color', 'region')
37-
.scale('color', {
38-
range: ['#d8d0c0', '#a3dda1'],
39-
independent: true,
40-
guide: null,
41-
})
42-
.style('fillOpacity', 0.2);
43-
44-
chart
45-
.point()
46-
.encode('x', 'change in female rate')
47-
.encode('y', 'change in male rate')
48-
.encode('size', 'pop')
49-
.encode('color', 'continent')
50-
.encode('shape', 'point')
51-
.scale('color', {
52-
range: ['#ffd500', '#82cab2', '#193442', '#d18768', '#7e827a'],
53-
})
54-
.axis('x', { title: false })
55-
.axis('y', { title: false })
56-
.scale('x', { domain: [-25, 5] })
57-
.scale('y', { domain: [-30, 20] })
58-
.scale('size', { range: [4, 30] })
59-
.style('stroke', '#bbb')
60-
.style('fillOpacity', 0.8);
61-
62-
chart.render();
6+
## 概述
7+
8+
`range` 是用来定义一个矩形区域的工具。这个矩形的位置和大小可以通过两组数字来确定：一组用于水平方向（x1, x2），另一组用于垂直方向（y1, y2）。它常用于绘制辅助背景区域或标记某个区域。
9+
10+
- 水平方向（x1, x2）：
11+
12+
- `x1`：矩形在水平方向上从哪里开始。
13+
- `x2`：矩形在水平方向上到哪里结束。
14+
15+
- 垂直方向（y1, y2）：
16+
17+
- `y1`：矩形在垂直方向上从哪里开始。
18+
- `y2`：矩形在垂直方向上到哪里结束。
19+
20+
```js | ob
21+
(() => {
22+
const chart = new G2.Chart();
23+
24+
chart.options({
25+
type: 'view',
26+
data: {
27+
type: 'fetch',
28+
value:
29+
'https://gw.alipayobjects.com/os/bmw-prod/0b37279d-1674-42b4-b285-29683747ad9a.json',
30+
},
31+
children: [
32+
{ type: 'lineX', data: [0] },
33+
{ type: 'lineY', data: [0] },
34+
{
35+
type: 'range',
36+
// 区域图的数据
37+
data: [
38+
{ x: [-25, 0], y: [-30, 0], region: '1' },
39+
{ x: [-25, 0], y: [0, 20], region: '2' },
40+
{ x: [0, 5], y: [-30, 0], region: '2' },
41+
{ x: [0, 5], y: [0, 20], region: '1' },
42+
],
43+
// 编码规则，x 和 y 对应数据中的字段，color 对应 region 字段
44+
encode: { x: 'x', y: 'y', color: 'region' },
45+
scale: {
46+
color: {
47+
range: ['#d8d0c0', '#a3dda1'],
48+
independent: true,
49+
guide: null,
50+
},
51+
},
52+
53+
style: {
54+
fillOpacity: 0.2,
55+
},
56+
},
57+
{
58+
type: 'point',
59+
encode: {
60+
x: 'change in female rate',
61+
y: 'change in male rate',
62+
size: 'pop',
63+
color: 'continent',
64+
shape: 'point',
65+
},
66+
scale: {
67+
color: {
68+
range: ['#ffd500', '#82cab2', '#193442', '#d18768', '#7e827a'],
69+
},
70+
x: { domain: [-25, 5] },
71+
y: { domain: [-30, 20] },
72+
size: { range: [4, 30] },
73+
},
74+
style: { stroke: '#bbb', fillOpacity: 0.8 },
75+
axis: { x: { title: false }, y: { title: false } },
76+
},
77+
],
78+
});
79+
80+
chart.render();
81+
82+
return chart.getContainer();
83+
})();
6384
```
6485

65-
更多的案例，可以查看[图表示例](/examples)页面。
86+
## 配置项
87+
88+
| 属性 | 描述 | 类型 | 默认值 | 必选 |
89+
| ------ | --------------------------------------------------------------------------------------------------- | ----------------- | ------ | ---- |
90+
| encode | 配置 `range` 标记的视觉通道，包括`x`、`y`、`color`、`shape`等，用于指定视觉元素属性和数据之间的关系 | [encode](#encode) | - | ✓ |
91+
| style | 配置 `range` 标记的图形样式 | [style](#style) | - | |
92+
93+
### encode
94+
95+
配置 `range` 标记的视觉通道。
96+
97+
| 属性 | 描述 | 类型 | 默认值 | 必选 |
98+
| ---- | ---------------------------------------------------------------------- | -------- | ------ | ---- |
99+
| x | 绑定 `range` 标记的 `x` 属性通道，一般是 `data` 中的时间或有序名词字段 | `string` | - | ✓ |
100+
| y | 绑定 `range` 标记的 `y` 属性通道，一般是 `data` 中的数值或数组字段 | `string` | - | ✓ |
101+
102+
更多的 `encode` 配置，可以查看 [编码（Encode）](/manual/core/encode) 介绍页面。
103+
104+
### style
105+
106+
配置 `range` 标记的样式。
66107

67-
## 选项
108+
| 属性 | 描述 | 类型 | 默认值 | 必选 |
109+
| ------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | --------- | ---- |
110+
| fill | 图形的填充色 | `string` \| `Function<string>` | - | |
111+
| fillOpacity | 图形的填充透明度 | `number` \| `Function<number>` | - | |
112+
| stroke | 图形的描边 | `string` \| `Function<string>` | - | |
113+
| strokeOpacity | 描边透明度 | `number` \| `Function<number>` | - | |
114+
| lineWidth | 图形描边的宽度 | `number` \| `Function<number>` | - | |
115+
| lineDash | 描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为[0, 0]的效果为没有描边。 | `[number,number]` \| `Function<[number, number]>` | - | |
116+
| opacity | 图形的整体透明度 | `number` \| `Function<number>` | - | |
117+
| shadowColor | 图形阴影颜色 | `string` \| `Function<string>` | - | |
118+
| shadowBlur | 图形阴影的高斯模糊系数 | `number` \| `Function<number>` | - | |
119+
| shadowOffsetX | 设置阴影距图形的水平距离 | `number` \| `Function<number>` | - | |
120+
| shadowOffsetY | 设置阴影距图形的垂直距离 | `number` \| `Function<number>` | - | |
121+
| cursor | 鼠标样式。同 css 的鼠标样式，默认 'default'。 | `string` \| `Function<string>` | 'default' | |
68122

69-
目前 range 只有一种同名的 shape 图形。
123+
更多的 `style` 配置，可以查看 [样式（Style）](/manual/core/style) 介绍页面。
70124

71-
### range
125+
## 示例
72126

73-
| 属性 | 描述 | 类型 | 默认值 |
74-
|----------------|------------------------------------------------|---------------------|------------|
75-
| fill | 图形的填充色 | `string` \| `Function<string>` | - |
76-
| fillOpacity | 图形的填充透明度 | `number` \| `Function<number>` | - |
77-
| stroke | 图形的描边 | `string` \| `Function<string>` | - |
78-
| strokeOpacity | 描边透明度 | `number` \| `Function<number>` | - |
79-
| lineWidth | 图形描边的宽度 | `number` \| `Function<number>` | - |
80-
| lineDash | 描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为[0, 0]的效果为没有描边。 | `[number,number]` \| `Function<[number, number]>` | - |
81-
| opacity | 图形的整体透明度 | `number` \| `Function<number>` | - |
82-
| shadowColor | 图形阴影颜色 | `string` \| `Function<string>` | - |
83-
| shadowBlur | 图形阴影的高斯模糊系数 | `number` \| `Function<number>` | - |
84-
| shadowOffsetX | 设置阴影距图形的水平距离 | `number` \| `Function<number>` | - |
85-
| shadowOffsetY | 设置阴影距图形的垂直距离 | `number` \| `Function<number>` | - |
86-
| cursor | 鼠标样式。同 css 的鼠标样式，默认 'default'。 | `string` \| `Function<string>` | 'default' |
127+
更多的案例，可以查看 [图表示例 - 数据标注](/examples#annotation-range) 页面。

0 commit comments

Comments
 (0)