From e36296b18d1f4ad133e5f1c6ed32dba525d1e476 Mon Sep 17 00:00:00 2001
From: Visiky <736929286@qq.com>
Date: Fri, 8 Oct 2021 11:01:54 +0800
Subject: [PATCH] =?UTF-8?q?feat(gauge):=20=E4=BB=AA=E8=A1=A8=E7=9B=98?=
=?UTF-8?q?=E6=94=AF=E6=8C=81=E8=87=AA=E5=AE=9A=E4=B9=89=E6=8C=87=E7=A4=BA?=
=?UTF-8?q?=E5=99=A8=20indicator=20(#2892)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* feat(gauge): 仪表盘支持自定义指针
* docs(gauge): 添加自定义仪表盘指示器的文档 & demo
* docs(gauge): 丰富自定义仪表盘指示器 demo
---
docs/api/plots/gauge.en.md | 3 +-
docs/api/plots/gauge.zh.md | 3 +-
docs/manual/plots/gauge.en.md | 4 +
docs/manual/plots/gauge.zh.md | 4 +
.../case/statistical-scenario/demo/meta.json | 26 ++---
examples/component/label/index.en.md | 4 +
examples/component/label/index.zh.md | 4 +
examples/progress-plots/gauge/API.en.md | 2 +-
.../gauge/demo/custom-indicator.ts | 57 +++++++++++
.../gauge/demo/custom-indicator2.ts | 94 +++++++++++++++++++
examples/progress-plots/gauge/demo/meta.json | 27 ++++++
.../gauge/demo/simple-indicator.ts | 57 +++++++++++
src/plots/gauge/adaptor.ts | 2 +-
src/plots/gauge/index.ts | 2 +-
.../gauge/shapes/{gauge.ts => indicator.ts} | 0
src/plots/gauge/types.ts | 2 +
16 files changed, 274 insertions(+), 17 deletions(-)
create mode 100644 examples/component/label/index.en.md
create mode 100644 examples/component/label/index.zh.md
create mode 100644 examples/progress-plots/gauge/demo/custom-indicator.ts
create mode 100644 examples/progress-plots/gauge/demo/custom-indicator2.ts
create mode 100644 examples/progress-plots/gauge/demo/simple-indicator.ts
rename src/plots/gauge/shapes/{gauge.ts => indicator.ts} (100%)
diff --git a/docs/api/plots/gauge.en.md b/docs/api/plots/gauge.en.md
index 775e83d44b..1f3be4b0d6 100644
--- a/docs/api/plots/gauge.en.md
+++ b/docs/api/plots/gauge.en.md
@@ -92,7 +92,7 @@ Indicates auxiliary shaft styles.
`markdown:docs/common/axis.en.md`
-#### indicator
+#### indicator ✨
**optional** _object_
@@ -100,6 +100,7 @@ Dashboard indicator style configuration. Divided into components as follows:
- `pointer`：Pointer style configuration in a pointer
- `pin`：The disc style configuration in the indicator
+- `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.)
They all have the following configuration items:
diff --git a/docs/api/plots/gauge.zh.md b/docs/api/plots/gauge.zh.md
index f8aec7fc10..e9269efae2 100644
--- a/docs/api/plots/gauge.zh.md
+++ b/docs/api/plots/gauge.zh.md
@@ -93,7 +93,7 @@ order: 5
`markdown:docs/common/axis.zh.md`
-#### indicator
+#### indicator ✨
**optional** _object_
@@ -101,6 +101,7 @@ order: 5
- `pointer`：指示器中的**指针**样式配置
- `pin`：指示器中的**圆盘**样式配置
+- `shape`：自定义指示器形状，需要搭配自定义 `registerShape` 使用. 默认: `gauge-indicator` (具体实现, 见: [gauge/shapes/indicator](https://github.com/antvis/g2plot/blob/master/plots/gauge/shapes/indicator.ts))
他们都有以下配置项：
diff --git a/docs/manual/plots/gauge.en.md b/docs/manual/plots/gauge.en.md
index 9fa6693106..f9dd657a34 100644
--- a/docs/manual/plots/gauge.en.md
+++ b/docs/manual/plots/gauge.en.md
@@ -127,3 +127,7 @@ Example:
同时还支持对 `steps` 以及 `stepRatio` 的设置，其中 `stepRatio` 代表着 step 和 gap 的比例关系，默认为：0.5，即默认 step 等于 gap 宽度，当 `stepRatio` 为 1 时，gap 为 0。
+
+### Custom gauge indicator
+
+
\ No newline at end of file
diff --git a/docs/manual/plots/gauge.zh.md b/docs/manual/plots/gauge.zh.md
index c83826dd28..09ced949b9 100644
--- a/docs/manual/plots/gauge.zh.md
+++ b/docs/manual/plots/gauge.zh.md
@@ -127,3 +127,7 @@ Example:
同时还支持对 `steps` 以及 `stepRatio` 的设置，其中 `stepRatio` 代表着 step 和 gap 的比例关系，默认为：0.5，即默认 step 等于 gap 宽度，当 `stepRatio` 为 1 时，gap 为 0。
+
+### 自定义仪表盘指示器
+
+
\ No newline at end of file
diff --git a/examples/case/statistical-scenario/demo/meta.json b/examples/case/statistical-scenario/demo/meta.json
index 9e4e0f1dad..0917952194 100644
--- a/examples/case/statistical-scenario/demo/meta.json
+++ b/examples/case/statistical-scenario/demo/meta.json
@@ -4,14 +4,6 @@
"en": "Category"
},
"demos": [
- {
- "filename": "compare-funnel.ts",
- "title": {
- "zh": "对比漏斗图",
- "en": "Compare Funnel Diagram"
- },
- "screenshot": "https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*gS12TpN1MN8AAAAAAAAAAAAAARQnAQ"
- },
{
"filename": "trend.jsx",
"title": {
@@ -34,15 +26,17 @@
"zh": "自定义分析漏斗图",
"en": "Funnel analysis"
},
+ "new": true,
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/3jrUoywaYN/339d1657-af7b-47d0-8434-da69979d597d.png"
},
{
- "filename": "pie.ts",
+ "filename": "compare-funnel.ts",
"title": {
- "zh": "饼图(占比)",
- "en": "Statistical Charts-Pie"
+ "zh": "对比漏斗图",
+ "en": "Compare Funnel Diagram"
},
- "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*OOnhQI4Sme4AAAAAAAAAAAAAARQnAQ"
+ "new": true,
+ "screenshot": "https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*gS12TpN1MN8AAAAAAAAAAAAAARQnAQ"
},
{
"filename": "trend-funnel.ts",
@@ -51,6 +45,14 @@
"en": "Statistical Charts-Funnel"
},
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/yYAiTdM%242e/case-funnel.png"
+ },
+ {
+ "filename": "pie.ts",
+ "title": {
+ "zh": "饼图(占比)",
+ "en": "Statistical Charts-Pie"
+ },
+ "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*OOnhQI4Sme4AAAAAAAAAAAAAARQnAQ"
}
]
}
diff --git a/examples/component/label/index.en.md b/examples/component/label/index.en.md
new file mode 100644
index 0000000000..0c0efecae0
--- /dev/null
+++ b/examples/component/label/index.en.md
@@ -0,0 +1,4 @@
+---
+title: Label
+order: 2
+---
diff --git a/examples/component/label/index.zh.md b/examples/component/label/index.zh.md
new file mode 100644
index 0000000000..229e0f4cec
--- /dev/null
+++ b/examples/component/label/index.zh.md
@@ -0,0 +1,4 @@
+---
+title: 数据标签 - Label
+order: 2
+---
diff --git a/examples/progress-plots/gauge/API.en.md b/examples/progress-plots/gauge/API.en.md
index 7ecf1b27fe..3fdf385b00 100644
--- a/examples/progress-plots/gauge/API.en.md
+++ b/examples/progress-plots/gauge/API.en.md
@@ -1 +1 @@
- `markdown:docs/api/plots/gauge.en.md`
+`markdown:docs/api/plots/gauge.en.md`
diff --git a/examples/progress-plots/gauge/demo/custom-indicator.ts b/examples/progress-plots/gauge/demo/custom-indicator.ts
new file mode 100644
index 0000000000..f3f26ecc75
--- /dev/null
+++ b/examples/progress-plots/gauge/demo/custom-indicator.ts
@@ -0,0 +1,57 @@
+import { Gauge, G2 } from '@antv/g2plot';
+
+const { registerShape, Util } = G2;
+
+// 自定义 Shape 部分
+registerShape('point', 'custom-gauge-indicator', {
+ draw(cfg, container) {
+ // 使用 customInfo 传递参数
+ const { indicator, defaultColor } = cfg.customInfo;
+ const { pointer } = indicator;
+
+ const group = container.addGroup();
+ // 获取极坐标系下画布中心点
+ const center = this.parsePoint({ x: 0, y: 0 });
+ // 绘制指针
+ if (pointer) {
+ const { startAngle, endAngle } = Util.getAngle(cfg, this.coordinate);
+ const radius = this.coordinate.getRadius();
+ const midAngle = (startAngle + endAngle) / 2;
+ const { x: x1, y: y1 } = Util.polarToCartesian(center.x, center.y, radius / 15, midAngle + 1 / Math.PI);
+ const { x: x2, y: y2 } = Util.polarToCartesian(center.x, center.y, radius / 15, midAngle - 1 / Math.PI);
+ const { x, y } = Util.polarToCartesian(center.x, center.y, radius * 0.65, midAngle);
+
+ const path = [['M', center.x, center.y], ['L', x1, y1], ['L', x, y], ['L', x2, y2], ['Z']];
+ // pointer
+ group.addShape('path', {
+ name: 'pointer',
+ attrs: {
+ path,
+ fill: defaultColor,
+ ...pointer.style,
+ },
+ });
+ }
+
+ return group;
+ },
+});
+
+const gauge = new Gauge('container', {
+ percent: 0.78,
+ range: {
+ color: '#30BF78',
+ },
+ indicator: {
+ shape: 'custom-gauge-indicator',
+ pointer: {
+ style: {
+ stroke: '#D0D0D0',
+ lineWidth: 1,
+ fill: '#D0D0D0',
+ },
+ },
+ },
+});
+
+gauge.render();
diff --git a/examples/progress-plots/gauge/demo/custom-indicator2.ts b/examples/progress-plots/gauge/demo/custom-indicator2.ts
new file mode 100644
index 0000000000..28432f5d0b
--- /dev/null
+++ b/examples/progress-plots/gauge/demo/custom-indicator2.ts
@@ -0,0 +1,94 @@
+import { Gauge, G2 } from '@antv/g2plot';
+
+const { registerShape, Util } = G2;
+
+// 自定义 Shape 部分
+registerShape('point', 'custom-gauge-indicator2', {
+ draw(cfg, container) {
+ // 使用 customInfo 传递参数
+ const { indicator, defaultColor } = cfg.customInfo;
+ const { pointer, pin } = indicator;
+
+ const group = container.addGroup();
+ // 获取极坐标系下画布中心点
+ const center = this.parsePoint({ x: 0, y: 0 });
+ // 绘制指针
+ if (pointer) {
+ const { startAngle, endAngle } = Util.getAngle(cfg, this.coordinate);
+ const radius = this.coordinate.getRadius();
+ const midAngle = (startAngle + endAngle) / 2;
+ const { x: x1, y: y1 } = Util.polarToCartesian(center.x, center.y, radius / 15, midAngle + 1 / Math.PI);
+ const { x: x2, y: y2 } = Util.polarToCartesian(center.x, center.y, radius / 15, midAngle - 1 / Math.PI);
+ const { x, y } = Util.polarToCartesian(center.x, center.y, radius * 0.65, midAngle);
+ const { x: x0, y: y0 } = Util.polarToCartesian(center.x, center.y, radius * 0.1, midAngle + Math.PI);
+
+ const path = [['M', x0, y0], ['L', x1, y1], ['L', x, y], ['L', x2, y2], ['Z']];
+ // pointer
+ group.addShape('path', {
+ name: 'pointer',
+ attrs: {
+ path,
+ fill: defaultColor,
+ ...pointer.style,
+ },
+ });
+ }
+
+ if (pin) {
+ const pinStyle = pin.style || {};
+ const { lineWidth = 2, fill = defaultColor, stroke = defaultColor } = pinStyle;
+ const r = 6;
+ group.addShape('circle', {
+ name: 'pin-outer',
+ attrs: {
+ x: center.x,
+ y: center.y,
+ ...pin.style,
+ fill: 'transparent',
+ r: r * 1.5,
+ lineWidth,
+ stroke: stroke,
+ },
+ });
+
+ group.addShape('circle', {
+ name: 'pin-inner',
+ attrs: {
+ x: center.x,
+ y: center.y,
+ r,
+ stroke: 'transparent',
+ fill,
+ },
+ });
+ }
+
+ return group;
+ },
+});
+
+const gauge = new Gauge('container', {
+ percent: 0.78,
+ range: {
+ color: '#30BF78',
+ },
+ indicator: {
+ shape: 'custom-gauge-indicator2',
+ pointer: {
+ style: {
+ stroke: '#D0D0D0',
+ lineWidth: 1,
+ fill: '#D0D0D0',
+ },
+ },
+ pin: {
+ style: {
+ lineWidth: 2,
+ stroke: '#D0D0D0',
+ fill: '#D0D0D0',
+ },
+ },
+ },
+});
+
+gauge.render();
diff --git a/examples/progress-plots/gauge/demo/meta.json b/examples/progress-plots/gauge/demo/meta.json
index 3e8f49f7d5..b0347de5a7 100644
--- a/examples/progress-plots/gauge/demo/meta.json
+++ b/examples/progress-plots/gauge/demo/meta.json
@@ -59,6 +59,33 @@
"en": "Meter gauge plot (custom steps and stepRatio)"
},
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/wqWYdQwQlc/demo1.gif"
+ },
+ {
+ "filename": "custom-indicator.ts",
+ "title": {
+ "zh": "自定义仪表盘指示器",
+ "en": "Custom gauge indicator"
+ },
+ "new": true,
+ "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/DUTCv9MXHO/71a294f0-99ed-4c41-9592-83add57871bc.png"
+ },
+ {
+ "filename": "custom-indicator2.ts",
+ "title": {
+ "zh": "自定义仪表盘指示器",
+ "en": "Custom gauge indicator"
+ },
+ "new": true,
+ "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/%26tVjT99wV1/6dae1f99-b160-4c6d-9769-b0972d02fd19.png"
+ },
+ {
+ "filename": "simple-indicator.ts",
+ "title": {
+ "zh": "简易仪表盘指示器",
+ "en": "Custom simple gauge indicator"
+ },
+ "new": true,
+ "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/2RRg9bSnn2/380b6b20-aed3-44e2-9afe-5532b1f9daea.png"
}
]
}
diff --git a/examples/progress-plots/gauge/demo/simple-indicator.ts b/examples/progress-plots/gauge/demo/simple-indicator.ts
new file mode 100644
index 0000000000..9bcd9d3d75
--- /dev/null
+++ b/examples/progress-plots/gauge/demo/simple-indicator.ts
@@ -0,0 +1,57 @@
+import { Gauge, G2 } from '@antv/g2plot';
+
+const { registerShape, Util } = G2;
+
+// 自定义 Shape 部分
+registerShape('point', 'triangle-gauge-indicator', {
+ draw(cfg, container) {
+ // 使用 customInfo 传递参数
+ const { indicator, defaultColor } = cfg.customInfo;
+ const { pointer } = indicator;
+
+ const group = container.addGroup();
+
+ // 获取极坐标系下画布中心点
+ const center = this.parsePoint({ x: 0, y: 0 });
+ // 绘制指针
+ if (pointer) {
+ const { startAngle, endAngle } = Util.getAngle(cfg, this.coordinate);
+ const radius = this.coordinate.getRadius();
+ const midAngle = (startAngle + endAngle) / 2;
+
+ const { x: x1, y: y1 } = Util.polarToCartesian(center.x, center.y, radius * 0.52, midAngle + Math.PI / 30);
+ const { x: x2, y: y2 } = Util.polarToCartesian(center.x, center.y, radius * 0.52, midAngle - Math.PI / 30);
+ const { x, y } = Util.polarToCartesian(center.x, center.y, radius * 0.6, midAngle);
+
+ const path = [['M', x1, y1], ['L', x, y], ['L', x2, y2], ['Z']];
+ // pointer
+ group.addShape('path', {
+ name: 'pointer',
+ attrs: {
+ path,
+ fill: defaultColor,
+ ...pointer.style,
+ },
+ });
+ }
+
+ return group;
+ },
+});
+
+const gauge = new Gauge('container', {
+ percent: 0.48,
+ range: {
+ color: '#30BF78',
+ },
+ indicator: {
+ shape: 'triangle-gauge-indicator',
+ pointer: {
+ style: {
+ fill: '#30BF78',
+ },
+ },
+ },
+});
+
+gauge.render();
diff --git a/src/plots/gauge/adaptor.ts b/src/plots/gauge/adaptor.ts
index 1470b76324..672af04002 100644
--- a/src/plots/gauge/adaptor.ts
+++ b/src/plots/gauge/adaptor.ts
@@ -29,7 +29,7 @@ function geometry(params: Params): Params {
v1.point()
.position(`${PERCENT}*1`)
- .shape('gauge-indicator')
+ .shape(indicator.shape || 'gauge-indicator')
// 传入指针的样式到自定义 shape 中
.customInfo({
defaultColor: chart.getTheme().defaultColor,
diff --git a/src/plots/gauge/index.ts b/src/plots/gauge/index.ts
index be2a8a2dad..265ad732f8 100644
--- a/src/plots/gauge/index.ts
+++ b/src/plots/gauge/index.ts
@@ -7,7 +7,7 @@ import { INDICATEOR_VIEW_ID, RANGE_VIEW_ID, DEFAULT_OPTIONS } from './constants'
import { getIndicatorData, getRangeData } from './utils';
// 注册 shape
-import './shapes/gauge';
+import './shapes/indicator';
import './shapes/meter-gauge';
export type { GaugeOptions };
diff --git a/src/plots/gauge/shapes/gauge.ts b/src/plots/gauge/shapes/indicator.ts
similarity index 100%
rename from src/plots/gauge/shapes/gauge.ts
rename to src/plots/gauge/shapes/indicator.ts
diff --git a/src/plots/gauge/types.ts b/src/plots/gauge/types.ts
index ac9a671885..c42c07633e 100644
--- a/src/plots/gauge/types.ts
+++ b/src/plots/gauge/types.ts
@@ -12,6 +12,8 @@ export type Indicator = {
readonly pin?: {
readonly style?: ShapeStyle; // 只允许静态的 object
};
+ // 自定义指针 shape. 默认: 'gauge-indicator'
+ readonly shape?: string;
};
export type Range = {