feat(pie): support spider-label (#1601)

* feat(pie): support spider-label

* feat(example): 更新 spider-label 的截图

Author: visiky

examples/pie/basic/demo/meta.json

@@ -20,6 +20,22 @@
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*ZztJQa4RLwoAAAAAAAAAAABkARQnAQ"
     },
+    {
+      "filename": "outer-label.ts",
+      "title": {
+        "zh": "饼图-外部图形标签",
+        "en": "Pie chart - outter label"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*ZztJQa4RLwoAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "spider-label.ts",
+      "title": {
+        "zh": "饼图-蜘蛛布局标签",
+        "en": "Pie chart - spider label"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*QyXPRK-URmUAAAAAAAAAAAAAARQnAQ"
+    },
     {
       "filename": "pie-state.ts",
       "title": {

examples/pie/basic/demo/spider-label.ts

@@ -0,0 +1,24 @@
+import { Pie } from '@antv/g2plot';
+
+const data = [
+  { type: '分类一', value: 27 },
+  { type: '分类二', value: 25 },
+  { type: '分类三', value: 18 },
+  { type: '分类四', value: 15 },
+  { type: '分类五', value: 10 },
+  { type: '其他', value: 5 },
+];
+
+const piePlot = new Pie('container', {
+  appendPadding: 10,
+  data,
+  angleField: 'value',
+  colorField: 'type',
+  radius: 0.8,
+  label: {
+    type: 'spider',
+    content: '{name}\n{percentage}',
+  },
+});
+
+piePlot.render();

src/plots/pie/adaptor.ts

@@ -3,7 +3,6 @@ import { Params } from '../../core/adaptor';
 import { legend, tooltip, interaction, animation, theme, state, annotation } from '../../adaptor/common';
 import { Data } from '../../types';
 import { flow, LEVEL, log, template } from '../../utils';
-import { Annotation } from '../../types/annotation';
 import { interval } from '../../adaptor/geometries';
 import { PieOptions } from './types';
 import { getTotalValue } from './utils';
@@ -147,10 +146,12 @@ function label(params: Params<PieOptions>): Params<PieOptions> {
     const LABEL_TYPE_MAP = {
       inner: 'pie-inner',
       outer: 'pie',
+      spider: 'pie',
     };
     const LABEL_LAYOUT_TYPE_MAP = {
       inner: '',
       outer: 'pie-outer',
+      spider: 'pie-spider',
     };
     const labelType = LABEL_TYPE_MAP[labelCfg.type] || 'pie';
     const labelLayoutType = LABEL_LAYOUT_TYPE_MAP[labelCfg.type] || 'pie-outer';