feat(v2/pie): 饼图数据全为 0 的处理 (#1335)

* feat(v2/pie): 饼图全 0 处理，调整position映射，不影响label和legend映射angleField

* feat(v2/pie): 增加 tooltip 显示单测

* refactor(v2/pie): 修改 cr 建议

Author: visiky

__tests__/unit/plots/pie/empty-data-spec.ts

@@ -0,0 +1,118 @@
+import { IGroup } from '@antv/g2/lib/dependents';
+import { every } from '@antv/util';
+import { Pie } from '../../../../src';
+import { createDiv } from '../../../utils/dom';
+import { delay } from '../../../utils/delay';
+
+describe('饼图 数据全空', () => {
+  const data = [];
+  for (let i = 0; i < 5; i++) {
+    data.push({ type: `类型 ${i}`, value: 0 });
+  }
+
+  it('数据全部为 0', () => {
+    const div = createDiv();
+    div.id = '#1';
+    const pie = new Pie(div, {
+      width: 400,
+      height: 400,
+      data,
+      angleField: 'value',
+      colorField: 'type',
+      label: {
+        callback: (value) => {
+          return {
+            content: value,
+          };
+        },
+      },
+      tooltip: {},
+    });
+
+    pie.render();
+
+    const elements = pie.chart.geometries[0].elements;
+    expect(elements.length).toBe(5);
+    expect(every(elements, (ele) => ele.getBBox().width > 0)).toBe(true);
+    const labels = pie.chart.geometries[0].labelsContainer.getChildren();
+    expect(every(labels, (label) => (label as IGroup).getChildren()[0].attr('text') === 0)).toBe(true);
+  });
+
+  it('数据全部为 0, 设置 angleField meta', async () => {
+    const pie = new Pie(createDiv(), {
+      width: 400,
+      height: 400,
+      data,
+      angleField: 'value',
+      colorField: 'type',
+      meta: {
+        value: {
+          formatter: (v) => `${v} 个`,
+        },
+      },
+      label: {},
+      tooltip: {},
+    });
+
+    pie.render();
+
+    const elements = pie.chart.geometries[0].elements;
+    expect(elements.length).toBe(5);
+    // @ts-ignore
+    expect(every(elements, (ele) => ele.getBBox().width > 0)).toBe(true);
+    const labels = pie.chart.geometries[0].labelsContainer.getChildren();
+    expect(every(labels, (label) => (label as IGroup).getChildren()[0].attr('text') === '0 个')).toBe(true);
+
+    const positionFields = pie.chart.geometries[0].getAttribute('position').getFields();
+    const point = pie.chart.getXY({ 1: data[0].type, [positionFields[1]]: 1 / data.length });
+    const tooltipItems = pie.chart.getTooltipItems(point);
+    expect(tooltipItems[1].value).toBe('0 个');
+  });
+
+  it('数据为 [], 延迟 3s 加载数据全为 0, 延迟 3s 加载数据正常', async () => {
+    const pie = new Pie(createDiv(), {
+      width: 400,
+      height: 400,
+      data: [],
+      angleField: 'value',
+      colorField: 'type',
+      label: {
+        callback: (value) => {
+          return {
+            content: value,
+          };
+        },
+      },
+      tooltip: {},
+    });
+    pie.render();
+
+    let elements = pie.chart.geometries[0].elements;
+    expect(elements.length).toBe(0);
+
+    await delay(500);
+    pie.update({
+      ...pie.options,
+      data,
+    });
+
+    elements = pie.chart.geometries[0].elements;
+    expect(every(elements, (ele) => ele.getBBox().width > 0)).toBe(true);
+    expect(elements.length).toBe(data.length);
+
+    await delay(300);
+    pie.update({
+      ...pie.options,
+      data: [{ type: '类型1', value: 1 }],
+      meta: {},
+    });
+
+    elements = pie.chart.geometries[0].elements;
+    expect(elements.length).toBe(1);
+    const labels = pie.chart.geometries[0].labelsContainer.getChildren();
+    expect(every(labels, (label) => (label as IGroup).getChildren()[0].attr('text') === 1)).toBe(true);
+    const point = pie.chart.getXY({ 1: '类型 1', value: 1 });
+    const tooltipItems = pie.chart.getTooltipItems(point);
+    expect(tooltipItems[0].value).toBe('1');
+  });
+});

src/plots/pie/adaptor.ts

@@ -1,4 +1,4 @@
-import { deepMix, each, get, isFunction } from '@antv/util';
+import { deepMix, each, every, get, isFunction } from '@antv/util';
 import { Params } from '../../core/adaptor';
 import { tooltip, interaction, animation, theme } from '../../common/adaptor';
 import { flow } from '../../utils';
@@ -14,8 +14,18 @@ function field(params: Params<PieOptions>): Params<PieOptions> {
   const { chart, options } = params;
   const { data, angleField, colorField, color } = options;
 
-  chart.data(data);
-  const geometry = chart.interval().position(`1*${angleField}`).adjust({ type: 'stack' });
+  const geometry = chart.interval();
+
+  const allZero = every(data, (d) => d[angleField] === 0);
+  if (allZero) {
+    // 数据全 0 处理，调整 position 映射
+    const percentageField = '$$percentage$$';
+    chart.data(data.map((d) => ({ ...d, [percentageField]: 1 / data.length })));
+    geometry.position(`1*${percentageField}`).adjust({ type: 'stack' }).tooltip(`${colorField}*${angleField}`);
+  } else {
+    chart.data(data);
+    geometry.position(`1*${angleField}`).adjust({ type: 'stack' });
+  }
 
   if (colorField) {
     geometry.color(colorField, color);