feat(pie&donut): label and statistic value can be affected by scale (#1189)

Author: simaQ

__tests__/bugs/donut-statistic-spec.ts

@@ -0,0 +1,67 @@
+import { Donut } from '../../src';
+
+describe('Statistics scale format', () => {
+  const canvasDiv = document.createElement('div');
+  canvasDiv.style.width = '600px';
+  canvasDiv.style.height = '600px';
+  canvasDiv.style.left = '30px';
+  canvasDiv.style.top = '30px';
+  canvasDiv.id = 'canvas1';
+  document.body.appendChild(canvasDiv);
+
+  it('test', () => {
+    const data = [
+      {
+        type: '分类一',
+        value: 27,
+      },
+      {
+        type: '分类二',
+        value: 25,
+      },
+      {
+        type: '分类三',
+        value: 18,
+      },
+      {
+        type: '分类四',
+        value: 15,
+      },
+      {
+        type: '分类五',
+        value: 10,
+      },
+      {
+        type: '其它',
+        value: 5,
+      },
+    ];
+
+    const donutPlot = new Donut(canvasDiv, {
+      forceFit: true,
+      title: {
+        visible: true,
+        text: '环图',
+      },
+      description: {
+        visible: true,
+        text: '环图的外半径决定环图的大小，而内半径决定环图的厚度。',
+      },
+      meta: {
+        value: {
+          formatter: (v) => `-${v}-`,
+        },
+      },
+      radius: 0.8,
+      padding: 'auto',
+      data,
+      angleField: 'value',
+      colorField: 'type',
+      animation: false,
+    });
+    donutPlot.render();
+    // @ts-ignore
+    expect(donutPlot.getLayers()[0].labelComponent.arcPoints[0].name).toBe('-27-');
+    expect(canvasDiv.getElementsByClassName('ring-guide-value')[0].textContent).toBe('-100-');
+  });
+});

src/plots/donut/component/ring-statistic.ts

@@ -88,8 +88,19 @@ export default class RingStatistic extends StatisticHtml {
   }
 
   private parseStatisticData(data) {
-    const { angleField, colorField } = this.plot.options;
-    return colorField ? { name: data[colorField], value: data[angleField] } : data[angleField];
+    const plot = this.plot;
+    const { angleField, colorField } = plot.options;
+    const angleScale = plot.getScaleByField(angleField);
+    const colorScale = plot.getScaleByField(colorField);
+
+    if (colorField) {
+      return {
+        name: colorScale.getText(data[colorField]),
+        value: angleScale.getText(data[angleField]),
+      };
+    }
+
+    return angleScale.getText(data[angleField]);
   }
 
   private getStatisticTemplate(data) {

src/plots/pie/component/label/base-label.ts

@@ -347,7 +347,7 @@ export default abstract class PieBaseLabel {
       const angle = (startAngle + endAngle) / 2;
       const point = getEndPoint(center, angle, radius);
       startAngle = endAngle;
-      const name = `${originData[angleField]}`;
+      const name = scale.getText(originData[angleField]);
       const textAlign = point.x > center.x ? 'left' : 'right';
 
       return {