Skip to content

Commit a9c9ce9

Browse files
ai-qing-haiwb-xcf804241
ai-qing-hai
and
wb-xcf804241
authored
feat(docs): update docs, image、linX、lineY、link、liquid、polygon (#6635)
* feat(docs): update docs, image、linX、lineY、link、liquid、polygon * feat(docs): update docs, image、linX、lineY、link、liquid、polygon * feat(docs): update docs, image、linX、lineY、link、liquid、polygon * feat(docs): update docs, image、linX、lineY、link、liquid、polygon * feat(docs): update docs, image、linX、lineY、link、liquid、polygon --------- Co-authored-by: wb-xcf804241 <wb-xcf804241@alibaba-inc.com>
1 parent d82be1a commit a9c9ce9

File tree

14 files changed

+815
-399
lines changed

14 files changed

+815
-399
lines changed

‎site/.dumi/global.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ if (window) {
3434
(window as any).React = require('react');
3535
(window as any).dataSet = require('@antv/data-set');
3636
(window as any).lodash = require('lodash');
37+
(window as any).rewind = require('@mapbox/geojson-rewind');
3738
(window as any).table = table;
3839
(window as any).dirichlet = require('dirichlet');
3940
}

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

Lines changed: 76 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -3,108 +3,88 @@ title: image
33
order: 10
44
---
55

6-
`Image` 标记和 [`Point`](/manual/core/mark/point) 标记很类似，都是以 `x`，`y` 数据通道作为位置居中定位，区别在于 `Image` 提供一个特殊的 `src` 数据通道，来指定图片的远程地址或者 base64。
7-
8-
## 开始使用
9-
10-
这里有一个简单的浏览器占比数据，我们对它进行可视化，便于看到不同浏览器的占比对比。
11-
12-
<img alt="image" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*fLQ2R4lOY3IAAAAAAAAAAAAADmJ7AQ/fmt.webp" width="600" />
13-
14-
```ts
15-
import { Chart } from '@antv/g2';
16-
17-
const data = [
18-
{
19-
name: 'Internet Explorer',
20-
value: 26,
21-
url: 'https://gw.alipayobjects.com/zos/rmsportal/eOYRaLPOmkieVvjyjTzM.png',
22-
},
23-
{
24-
name: 'Chrome',
25-
value: 40,
26-
url: 'https://gw.alipayobjects.com/zos/rmsportal/dWJWRLWfpOEbwCyxmZwu.png',
27-
},
28-
{
29-
name: 'Firefox',
30-
value: 30,
31-
url: 'https://gw.alipayobjects.com/zos/rmsportal/ZEPeDluKmAoTioCABBTc.png',
32-
},
33-
{
34-
name: 'Safari',
35-
value: 24,
36-
url: 'https://gw.alipayobjects.com/zos/rmsportal/eZYhlLzqWLAYwOHQAXmc.png',
37-
},
38-
{
39-
name: 'Opera',
40-
value: 15,
41-
url: 'https://gw.alipayobjects.com/zos/rmsportal/vXiGOWCGZNKuVVpVYQAw.png',
42-
},
43-
{
44-
name: 'Undetectable',
45-
value: 8,
46-
url: 'https://gw.alipayobjects.com/zos/rmsportal/NjApYXminrnhBgOXyuaK.png',
47-
},
48-
];
49-
50-
const chart = new Chart({
51-
container: 'container',
52-
});
53-
54-
chart.data(data);
55-
56-
chart
57-
.link()
58-
.encode('x', ['name', 'name'])
59-
.encode('y', (d) => [0, d.value])
60-
.style('stroke', '#dfdfdf')
61-
.style('lineDash', [2, 2]);
62-
63-
chart
64-
.line()
65-
.encode('x', 'name')
66-
.encode('y', 'value')
67-
.encode('shape', 'smooth')
68-
.scale('x', { type: 'band' })
69-
.scale('y', { domain: [0, 50] })
70-
.style('opacity', 0.5);
71-
72-
chart
73-
.image()
74-
.encode('x', 'name')
75-
.encode('y', 'value')
76-
.encode('src', 'url')
77-
.scale('x', { type: 'band' })
78-
.scale('y', { domain: [0, 50] });
79-
80-
chart.render();
6+
## 概述
7+
8+
`image` 图片标记通常不会单独出现，主要在其他的标记基础上进行添加使用，可以增强数据的可视化效果，帮助更直观地传达信息。和[`point`](/manual/core/mark/point) 标记很类似都是以 `x`，`y` 数据通道作为位置居中定位，区别在于 `image` 提供一个特殊的 `src` 数据通道，来指定图片的远程地址或者 base64。
9+
10+
```js | ob
11+
(() => {
12+
const chart = new G2.Chart();
13+
14+
chart.options({
15+
width: 200,
16+
height: 60,
17+
type: 'image',
18+
data: [
19+
{ x: '1', y: 1, url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*TRZHTaTeWfEAAAAAAAAAAAAAemJ7AQ/original' },
20+
{ x: '2', y: 1, url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*TRZHTaTeWfEAAAAAAAAAAAAAemJ7AQ/original' },
21+
{ x: '3', y: 1, url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*TRZHTaTeWfEAAAAAAAAAAAAAemJ7AQ/original' },
22+
{ x: '4', y: 1, url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*qCegRabhuUIAAAAAAAAAAAAAemJ7AQ/original' },
23+
{ x: '5', y: 1, url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*GNP1RLFfQV0AAAAAAAAAAAAAemJ7AQ/original' },
24+
25+
{ x: '1', y: 2, url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*TRZHTaTeWfEAAAAAAAAAAAAAemJ7AQ/original' },
26+
{ x: '2', y: 2, url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*TRZHTaTeWfEAAAAAAAAAAAAAemJ7AQ/original' },
27+
{ x: '3', y: 2, url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*qCegRabhuUIAAAAAAAAAAAAAemJ7AQ/original' },
28+
{ x: '4', y: 2, url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*GNP1RLFfQV0AAAAAAAAAAAAAemJ7AQ/original' },
29+
{ x: '5', y: 2, url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*GNP1RLFfQV0AAAAAAAAAAAAAemJ7AQ/original' },
30+
],
31+
// 配置视觉通道
32+
encode: {
33+
x: 'x', // 配置x通道
34+
y: 'y', // 配置y通道
35+
src: 'url', // 配置 图片src 通道
36+
},
37+
axis: { x: false, y: false },
38+
});
39+
40+
chart.render();
41+
42+
return chart.getContainer();
43+
})();
8144
```
8245

83-
更多的案例，可以查看[图表示例](/examples)页面。
46+
更多的案例，可以查看[图表示例 - 图片](/examples#general-image)页面。
8447

85-
## 选项
48+
## 配置项
8649

87-
目前仅有一种同名的图形 `image`，下面描述一下所有的 `style` 配置项。
50+
| 属性 | 描述 | 类型 | 默认值 | 必选 |
51+
| ---------- | -------------------------------------------------------------------------------------------------- | ------------------------- | ---------------------- | ---- |
52+
| encode | 配置 `image` 标记的视觉通道，包括`x`、`y`、`src`、`size`等，用于指定视觉元素属性和数据之间的关系 | [encode](#encode) | - | ✓ |
53+
| style | 配置 `image` 标记的图形样式 | [style](#style) | - | |
8854

89-
### image
55+
### encode
9056

91-
| 属性 | 描述 | 类型 | 默认值 |
92-
|----------------|------------------------------------------------|---------------------|------------|
93-
| fill | 图形的填充色 | `string` \| `Function<string>` | - |
94-
| fillOpacity | 图形的填充透明度 | `number` \| `Function<number>` | - |
95-
| stroke | 图形的描边 | `string` \| `Function<string>` | - |
96-
| strokeOpacity | 描边透明度 | `number` \| `Function<number>` | - |
97-
| lineWidth | 图形描边的宽度 | `number` \| `Function<number>` | - |
98-
| lineDash | 描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为[0, 0]的效果为没有描边。 | `[number,number]` \| `Function<[number, number]>` | - |
99-
| opacity | 图形的整体透明度 | `number` \| `Function<number>` | - |
100-
| shadowColor | 图形阴影颜色 | `string` \| `Function<string>` | - |
101-
| shadowBlur | 图形阴影的高斯模糊系数 | `number` \| `Function<number>` | - |
102-
| shadowOffsetX | 设置阴影距图形的水平距离 | `number` \| `Function<number>` | - |
103-
| shadowOffsetY | 设置阴影距图形的垂直距离 | `number` \| `Function<number>` | - |
104-
| cursor | 鼠标样式。同 css 的鼠标样式，默认 'default'。 | `string` \| `Function<string>` | 'default' |
57+
配置 `image` 标记的视觉通道。
10558

106-
## FAQ
59+
| 属性 | 描述 | 类型 | 默认值 | 必选 |
60+
| ----- | ------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | ------ | ---- |
61+
| x | 绑定 `image` 标记的 `x` 属性通道，一般是 `data` 中的数值或字符，用于确定图片的 `x` 位置 | [encode](/manual/core/encode) | - | ✓ |
62+
| y | 绑定 `image` 标记的 `y` 属性通道，一般是 `data` 中的数值或字符，用于确定图片的 `y` 位置 | [encode](/manual/core/encode) | - | ✓ |
63+
| size | 绑定 `image` 标记的 `size` 大小通道，用于控制图片展示的大小，一般图片中所存储的信息越多，越需要放大 | [encode](/manual/core/encode) | - | |
64+
| src | 绑定 `image` 标记的 `src` 图片通道 ，会更具对应的数据显示图片 | | - | ✓ |
10765

108-
- 图片的 src 通道支持哪些数据类型？
66+
#### src
10967

110-
最终的绘制都是调用 G 去渲染，所以支持的数据类型和 G 的原子 Image 图形保持一致，支持：`远程地址`、`base64`、`blob`、`file`。
68+
最终的绘制都是调用 G 去渲染，所以支持的数据类型和 G 的原子 Image 图形保持一致，支持：
69+
70+
1. `远程地址`：网络地址
71+
2. `file`：本地图片地址
72+
3. `base64`：图表base64格式字符串
73+
4. `blob`：图片请求返回的Blob对象
74+
75+
### style
76+
77+
| 属性 | 描述 | 类型 | 默认值 | 必选 |
78+
|----------------|------------------------------------------------|---------------------|------------|-------|
79+
| width | 图形的宽度, 如果没有配置 图片按照 自宽高 和 `size` 大小 默认显示 | _number_ \| _Function\<number\>_ | - | |
80+
| height | 图形的高度, 如果没有配置 图片按照 自宽高 和 `size` 大小 默认显示 | _number_ \| _Function\<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`| |
87+
88+
尝试一下：
89+
90+
<Playground path="style/general/image/demo/contributor.ts" rid="image-style"></playground>

0 commit comments

Comments
 (0)