feat(gauge): 仪表盘支持自定义指示器 indicator (#2892)

* feat(gauge): 仪表盘支持自定义指针 * docs(gauge): 添加自定义仪表盘指示器的文档 & demo * docs(gauge): 丰富自定义仪表盘指示器 demo
antvis · Oct 8, 2021 · e36296b · e36296b
1 parent 5ad43b7
commit e36296b
Show file tree

Hide file tree

Showing 16 changed files with 274 additions and 17 deletions.
diff --git a/docs/api/plots/gauge.en.md b/docs/api/plots/gauge.en.md
@@ -92,14 +92,15 @@ Indicates auxiliary shaft styles.
 
 `markdown:docs/common/axis.en.md`
 
-#### indicator
+#### indicator ✨
 
 <description>**optional** _object_</description>
 
 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
@@ -93,14 +93,15 @@ order: 5
 
 `markdown:docs/common/axis.zh.md`
 
-#### indicator
+#### indicator ✨
 
 <description>**optional** _object_</description>
 
 仪表盘**指示器**样式配置。按照组件分成为：
 
 - `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
@@ -127,3 +127,7 @@ Example:
 同时还支持对 `steps` 以及 `stepRatio` 的设置，其中 `stepRatio` 代表着 step 和 gap 的比例关系，默认为：0.5，即默认 step 等于 gap 宽度，当 `stepRatio` 为 1 时，gap 为 0。
 
 <playground path="progress-plots/gauge/demo/custom-meter-step.ts" rid="rect3"></playground>
+
+### Custom gauge indicator
+
+<playground path="progress-plots/gauge/demo/custom-indicator.ts" rid="custom-gauge-indicator"></playground>
diff --git 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。
 
 <playground path="progress-plots/gauge/demo/custom-meter-step.ts" rid="rect3"></playground>
+
+### 自定义仪表盘指示器
+
+<playground path="progress-plots/gauge/demo/custom-indicator.ts" rid="custom-gauge-indicator"></playground>
diff --git 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
@@ -0,0 +1,4 @@
+---
+title: Label
+order: 2
+---
diff --git a/examples/component/label/index.zh.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -29,7 +29,7 @@ function geometry(params: Params<GaugeOptions>): Params<GaugeOptions> {
 
     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
@@ -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 → src/plots/gauge/shapes/indicator.ts b/src/plots/gauge/shapes/gauge.ts → src/plots/gauge/shapes/indicator.ts
diff --git 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 = {