Skip to content

Commit e36296b

Browse files
visikyvisiky
authored
feat(gauge): 仪表盘支持自定义指示器 indicator (#2892)
* feat(gauge): 仪表盘支持自定义指针 * docs(gauge): 添加自定义仪表盘指示器的文档 & demo * docs(gauge): 丰富自定义仪表盘指示器 demo
1 parent 5ad43b7 commit e36296b

File tree

16 files changed

+274
-17
lines changed

16 files changed

+274
-17
lines changed

‎docs/api/plots/gauge.en.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -92,14 +92,15 @@ Indicates auxiliary shaft styles.
9292

9393
`markdown:docs/common/axis.en.md`
9494

95-
#### indicator
95+
#### indicator ✨
9696

9797
<description>**optional** _object_</description>
9898

9999
Dashboard indicator style configuration. Divided into components as follows:
100100

101101
- `pointer`：Pointer style configuration in a pointer
102102
- `pin`：The disc style configuration in the indicator
103+
- `shape`：Custom shape of indicator, used with the API `registerShape`. Default: `gauge-indicator` (Go to [gauge/shapes/indicator](https://github.com/antvis/g2plot/blob/master/plots/gauge/shapes/indicator.ts) see details.)
103104

104105
They all have the following configuration items:
105106

‎docs/api/plots/gauge.zh.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -93,14 +93,15 @@ order: 5
9393

9494
`markdown:docs/common/axis.zh.md`
9595

96-
#### indicator
96+
#### indicator ✨
9797

9898
<description>**optional** _object_</description>
9999

100100
仪表盘**指示器**样式配置。按照组件分成为：
101101

102102
- `pointer`：指示器中的**指针**样式配置
103103
- `pin`：指示器中的**圆盘**样式配置
104+
- `shape`：自定义指示器形状，需要搭配自定义 `registerShape` 使用. 默认: `gauge-indicator` (具体实现, 见: [gauge/shapes/indicator](https://github.com/antvis/g2plot/blob/master/plots/gauge/shapes/indicator.ts))
104105

105106
他们都有以下配置项：
106107

‎docs/manual/plots/gauge.en.md

+4
Original file line numberDiff line numberDiff line change
@@ -127,3 +127,7 @@ Example:
127127
同时还支持对 `steps` 以及 `stepRatio` 的设置，其中 `stepRatio` 代表着 step 和 gap 的比例关系，默认为：0.5，即默认 step 等于 gap 宽度，当 `stepRatio` 为 1 时，gap 为 0。
128128

129129
<playground path="progress-plots/gauge/demo/custom-meter-step.ts" rid="rect3"></playground>
130+
131+
### Custom gauge indicator
132+
133+
<playground path="progress-plots/gauge/demo/custom-indicator.ts" rid="custom-gauge-indicator"></playground>

‎docs/manual/plots/gauge.zh.md

+4
Original file line numberDiff line numberDiff line change
@@ -127,3 +127,7 @@ Example:
127127
同时还支持对 `steps` 以及 `stepRatio` 的设置，其中 `stepRatio` 代表着 step 和 gap 的比例关系，默认为：0.5，即默认 step 等于 gap 宽度，当 `stepRatio` 为 1 时，gap 为 0。
128128

129129
<playground path="progress-plots/gauge/demo/custom-meter-step.ts" rid="rect3"></playground>
130+
131+
### 自定义仪表盘指示器
132+
133+
<playground path="progress-plots/gauge/demo/custom-indicator.ts" rid="custom-gauge-indicator"></playground>

‎examples/case/statistical-scenario/demo/meta.json

+14-12
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,6 @@
44
"en": "Category"
55
},
66
"demos": [
7-
{
8-
"filename": "compare-funnel.ts",
9-
"title": {
10-
"zh": "对比漏斗图",
11-
"en": "Compare Funnel Diagram"
12-
},
13-
"screenshot": "https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*gS12TpN1MN8AAAAAAAAAAAAAARQnAQ"
14-
},
157
{
168
"filename": "trend.jsx",
179
"title": {
@@ -34,15 +26,17 @@
3426
"zh": "自定义分析漏斗图",
3527
"en": "Funnel analysis"
3628
},
29+
"new": true,
3730
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/3jrUoywaYN/339d1657-af7b-47d0-8434-da69979d597d.png"
3831
},
3932
{
40-
"filename": "pie.ts",
33+
"filename": "compare-funnel.ts",
4134
"title": {
42-
"zh": "饼图(占比)",
43-
"en": "Statistical Charts-Pie"
35+
"zh": "对比漏斗图",
36+
"en": "Compare Funnel Diagram"
4437
},
45-
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*OOnhQI4Sme4AAAAAAAAAAAAAARQnAQ"
38+
"new": true,
39+
"screenshot": "https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*gS12TpN1MN8AAAAAAAAAAAAAARQnAQ"
4640
},
4741
{
4842
"filename": "trend-funnel.ts",
@@ -51,6 +45,14 @@
5145
"en": "Statistical Charts-Funnel"
5246
},
5347
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/yYAiTdM%242e/case-funnel.png"
48+
},
49+
{
50+
"filename": "pie.ts",
51+
"title": {
52+
"zh": "饼图(占比)",
53+
"en": "Statistical Charts-Pie"
54+
},
55+
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*OOnhQI4Sme4AAAAAAAAAAAAAARQnAQ"
5456
}
5557
]
5658
}

‎examples/component/label/index.en.md

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
title: Label
3+
order: 2
4+
---

‎examples/component/label/index.zh.md

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
title: 数据标签 - Label
3+
order: 2
4+
---

‎examples/progress-plots/gauge/API.en.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
`markdown:docs/api/plots/gauge.en.md`
1+
`markdown:docs/api/plots/gauge.en.md`

‎examples/progress-plots/gauge/demo/custom-indicator.ts

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { Gauge, G2 } from '@antv/g2plot';
2+
3+
const { registerShape, Util } = G2;
4+
5+
// 自定义 Shape 部分
6+
registerShape('point', 'custom-gauge-indicator', {
7+
draw(cfg, container) {
8+
// 使用 customInfo 传递参数
9+
const { indicator, defaultColor } = cfg.customInfo;
10+
const { pointer } = indicator;
11+
12+
const group = container.addGroup();
13+
// 获取极坐标系下画布中心点
14+
const center = this.parsePoint({ x: 0, y: 0 });
15+
// 绘制指针
16+
if (pointer) {
17+
const { startAngle, endAngle } = Util.getAngle(cfg, this.coordinate);
18+
const radius = this.coordinate.getRadius();
19+
const midAngle = (startAngle + endAngle) / 2;
20+
const { x: x1, y: y1 } = Util.polarToCartesian(center.x, center.y, radius / 15, midAngle + 1 / Math.PI);
21+
const { x: x2, y: y2 } = Util.polarToCartesian(center.x, center.y, radius / 15, midAngle - 1 / Math.PI);
22+
const { x, y } = Util.polarToCartesian(center.x, center.y, radius * 0.65, midAngle);
23+
24+
const path = [['M', center.x, center.y], ['L', x1, y1], ['L', x, y], ['L', x2, y2], ['Z']];
25+
// pointer
26+
group.addShape('path', {
27+
name: 'pointer',
28+
attrs: {
29+
path,
30+
fill: defaultColor,
31+
...pointer.style,
32+
},
33+
});
34+
}
35+
36+
return group;
37+
},
38+
});
39+
40+
const gauge = new Gauge('container', {
41+
percent: 0.78,
42+
range: {
43+
color: '#30BF78',
44+
},
45+
indicator: {
46+
shape: 'custom-gauge-indicator',
47+
pointer: {
48+
style: {
49+
stroke: '#D0D0D0',
50+
lineWidth: 1,
51+
fill: '#D0D0D0',
52+
},
53+
},
54+
},
55+
});
56+
57+
gauge.render();

‎examples/progress-plots/gauge/demo/custom-indicator2.ts

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import { Gauge, G2 } from '@antv/g2plot';
2+
3+
const { registerShape, Util } = G2;
4+
5+
// 自定义 Shape 部分
6+
registerShape('point', 'custom-gauge-indicator2', {
7+
draw(cfg, container) {
8+
// 使用 customInfo 传递参数
9+
const { indicator, defaultColor } = cfg.customInfo;
10+
const { pointer, pin } = indicator;
11+
12+
const group = container.addGroup();
13+
// 获取极坐标系下画布中心点
14+
const center = this.parsePoint({ x: 0, y: 0 });
15+
// 绘制指针
16+
if (pointer) {
17+
const { startAngle, endAngle } = Util.getAngle(cfg, this.coordinate);
18+
const radius = this.coordinate.getRadius();
19+
const midAngle = (startAngle + endAngle) / 2;
20+
const { x: x1, y: y1 } = Util.polarToCartesian(center.x, center.y, radius / 15, midAngle + 1 / Math.PI);
21+
const { x: x2, y: y2 } = Util.polarToCartesian(center.x, center.y, radius / 15, midAngle - 1 / Math.PI);
22+
const { x, y } = Util.polarToCartesian(center.x, center.y, radius * 0.65, midAngle);
23+
const { x: x0, y: y0 } = Util.polarToCartesian(center.x, center.y, radius * 0.1, midAngle + Math.PI);
24+
25+
const path = [['M', x0, y0], ['L', x1, y1], ['L', x, y], ['L', x2, y2], ['Z']];
26+
// pointer
27+
group.addShape('path', {
28+
name: 'pointer',
29+
attrs: {
30+
path,
31+
fill: defaultColor,
32+
...pointer.style,
33+
},
34+
});
35+
}
36+
37+
if (pin) {
38+
const pinStyle = pin.style || {};
39+
const { lineWidth = 2, fill = defaultColor, stroke = defaultColor } = pinStyle;
40+
const r = 6;
41+
group.addShape('circle', {
42+
name: 'pin-outer',
43+
attrs: {
44+
x: center.x,
45+
y: center.y,
46+
...pin.style,
47+
fill: 'transparent',
48+
r: r * 1.5,
49+
lineWidth,
50+
stroke: stroke,
51+
},
52+
});
53+
54+
group.addShape('circle', {
55+
name: 'pin-inner',
56+
attrs: {
57+
x: center.x,
58+
y: center.y,
59+
r,
60+
stroke: 'transparent',
61+
fill,
62+
},
63+
});
64+
}
65+
66+
return group;
67+
},
68+
});
69+
70+
const gauge = new Gauge('container', {
71+
percent: 0.78,
72+
range: {
73+
color: '#30BF78',
74+
},
75+
indicator: {
76+
shape: 'custom-gauge-indicator2',
77+
pointer: {
78+
style: {
79+
stroke: '#D0D0D0',
80+
lineWidth: 1,
81+
fill: '#D0D0D0',
82+
},
83+
},
84+
pin: {
85+
style: {
86+
lineWidth: 2,
87+
stroke: '#D0D0D0',
88+
fill: '#D0D0D0',
89+
},
90+
},
91+
},
92+
});
93+
94+
gauge.render();

‎examples/progress-plots/gauge/demo/meta.json

+27
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,33 @@
5959
"en": "Meter gauge plot (custom steps and stepRatio)"
6060
},
6161
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/wqWYdQwQlc/demo1.gif"
62+
},
63+
{
64+
"filename": "custom-indicator.ts",
65+
"title": {
66+
"zh": "自定义仪表盘指示器",
67+
"en": "Custom gauge indicator"
68+
},
69+
"new": true,
70+
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/DUTCv9MXHO/71a294f0-99ed-4c41-9592-83add57871bc.png"
71+
},
72+
{
73+
"filename": "custom-indicator2.ts",
74+
"title": {
75+
"zh": "自定义仪表盘指示器",
76+
"en": "Custom gauge indicator"
77+
},
78+
"new": true,
79+
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/%26tVjT99wV1/6dae1f99-b160-4c6d-9769-b0972d02fd19.png"
80+
},
81+
{
82+
"filename": "simple-indicator.ts",
83+
"title": {
84+
"zh": "简易仪表盘指示器",
85+
"en": "Custom simple gauge indicator"
86+
},
87+
"new": true,
88+
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/2RRg9bSnn2/380b6b20-aed3-44e2-9afe-5532b1f9daea.png"
6289
}
6390
]
6491
}

‎examples/progress-plots/gauge/demo/simple-indicator.ts

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { Gauge, G2 } from '@antv/g2plot';
2+
3+
const { registerShape, Util } = G2;
4+
5+
// 自定义 Shape 部分
6+
registerShape('point', 'triangle-gauge-indicator', {
7+
draw(cfg, container) {
8+
// 使用 customInfo 传递参数
9+
const { indicator, defaultColor } = cfg.customInfo;
10+
const { pointer } = indicator;
11+
12+
const group = container.addGroup();
13+
14+
// 获取极坐标系下画布中心点
15+
const center = this.parsePoint({ x: 0, y: 0 });
16+
// 绘制指针
17+
if (pointer) {
18+
const { startAngle, endAngle } = Util.getAngle(cfg, this.coordinate);
19+
const radius = this.coordinate.getRadius();
20+
const midAngle = (startAngle + endAngle) / 2;
21+
22+
const { x: x1, y: y1 } = Util.polarToCartesian(center.x, center.y, radius * 0.52, midAngle + Math.PI / 30);
23+
const { x: x2, y: y2 } = Util.polarToCartesian(center.x, center.y, radius * 0.52, midAngle - Math.PI / 30);
24+
const { x, y } = Util.polarToCartesian(center.x, center.y, radius * 0.6, midAngle);
25+
26+
const path = [['M', x1, y1], ['L', x, y], ['L', x2, y2], ['Z']];
27+
// pointer
28+
group.addShape('path', {
29+
name: 'pointer',
30+
attrs: {
31+
path,
32+
fill: defaultColor,
33+
...pointer.style,
34+
},
35+
});
36+
}
37+
38+
return group;
39+
},
40+
});
41+
42+
const gauge = new Gauge('container', {
43+
percent: 0.48,
44+
range: {
45+
color: '#30BF78',
46+
},
47+
indicator: {
48+
shape: 'triangle-gauge-indicator',
49+
pointer: {
50+
style: {
51+
fill: '#30BF78',
52+
},
53+
},
54+
},
55+
});
56+
57+
gauge.render();

‎src/plots/gauge/adaptor.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ function geometry(params: Params<GaugeOptions>): Params<GaugeOptions> {
2929

3030
v1.point()
3131
.position(`${PERCENT}*1`)
32-
.shape('gauge-indicator')
32+
.shape(indicator.shape || 'gauge-indicator')
3333
// 传入指针的样式到自定义 shape 中
3434
.customInfo({
3535
defaultColor: chart.getTheme().defaultColor,

‎src/plots/gauge/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { INDICATEOR_VIEW_ID, RANGE_VIEW_ID, DEFAULT_OPTIONS } from './constants'
77
import { getIndicatorData, getRangeData } from './utils';
88

99
// 注册 shape
10-
import './shapes/gauge';
10+
import './shapes/indicator';
1111
import './shapes/meter-gauge';
1212

1313
export type { GaugeOptions };

‎src/plots/gauge/shapes/gauge.ts renamed to ‎src/plots/gauge/shapes/indicator.ts

File renamed without changes.

‎src/plots/gauge/types.ts

+2
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ export type Indicator = {
1212
readonly pin?: {
1313
readonly style?: ShapeStyle; // 只允许静态的 object
1414
};
15+
// 自定义指针 shape. 默认: 'gauge-indicator'
16+
readonly shape?: string;
1517
};
1618

1719
export type Range = {

0 commit comments

Comments
 (0)