feat(v2/pie): 饼图字段配置错误处理

__tests__/bugs/issue-1245-spec.ts

@@ -0,0 +1,98 @@
+import { Pie } from '../../src';
+import { createDiv } from '.././utils/dom';
+
+describe('donut plot', () => {
+  test('angleField & colorField 配置交换, 不会触发 out-of-memory, 但是坐标为 NaN', () => {
+    const data = [
+      {
+        type: '分类一',
+        value: 27,
+      },
+      {
+        type: '分类二',
+        value: 25,
+      },
+      {
+        type: '分类三',
+        value: 18,
+      },
+      {
+        type: '分类四',
+        value: 15,
+      },
+      {
+        type: '分类五',
+        value: 10,
+      },
+      {
+        type: '其它',
+        value: 5,
+      },
+    ];
+
+    const donutPlot = new Pie(createDiv(), {
+      width: 640,
+      height: 400,
+      radius: 0.8,
+      innerRadius: 0.64,
+      padding: 'auto',
+      data,
+      angleField: 'type',
+      colorField: 'value',
+    });
+
+    donutPlot.render();
+
+    expect(donutPlot).toBeDefined();
+    expect(donutPlot.chart.geometries[0].elements.length).toBe(0);
+  });
+
+  test('value 数据出现字母或其他不合法情况，不会触发 out-of-memory', () => {
+    const data = [
+      {
+        type: '分类一',
+        value: 27,
+      },
+      {
+        type: '分类二',
+        value: 25,
+      },
+      {
+        type: '分类三',
+        value: 18,
+      },
+      {
+        type: '分类四',
+        value: 15,
+      },
+      {
+        type: '分类五',
+        value: 10,
+      },
+      {
+        type: '其它',
+        value: '11a',
+      },
+    ];
+
+    const piePlot = new Pie(createDiv(), {
+      width: 640,
+      height: 400,
+      radius: 0.8,
+      padding: 'auto',
+      data,
+      angleField: 'value',
+      colorField: 'type',
+    });
+
+    piePlot.render();
+    expect(piePlot).toBeDefined();
+    expect(piePlot.chart.geometries[0].elements.length).toBe(data.length - 1);
+
+    piePlot.update({
+      ...piePlot.options,
+      data: data.map((d, idx) => (idx !== 0 ? { ...d, value: null } : d)),
+    });
+    expect(piePlot.chart.geometries[0].elements.length).toBe(data.length);
+  });
+});

src/plots/pie/adaptor.ts

@@ -1,4 +1,4 @@
-import { deepMix, each, every, get, isFunction } from '@antv/util';
+import { deepMix, each, every, get, isFunction, filter, isNil } from '@antv/util';
 import { Params } from '../../core/adaptor';
 import { tooltip, interaction, animation, theme } from '../../common/adaptor';
 import { flow } from '../../utils';
@@ -16,14 +16,20 @@ function field(params: Params<PieOptions>): Params<PieOptions> {
 
   const geometry = chart.interval();
 
-  const allZero = every(data, (d) => d[angleField] === 0);
+  // 处理不合法的数据
+  const processData = filter(data, (d) => typeof d[angleField] === 'number' || isNil(d[angleField]));
+  if (processData.length !== data.length) {
+    console.error('Please check whether there exists illegal data');
+  }
+
+  const allZero = every(processData, (d) => d[angleField] === 0);
   if (allZero) {
     // 数据全 0 处理，调整 position 映射
     const percentageField = '$$percentage$$';
-    chart.data(data.map((d) => ({ ...d, [percentageField]: 1 / data.length })));
+    chart.data(processData.map((d) => ({ ...d, [percentageField]: 1 / processData.length })));
     geometry.position(`1*${percentageField}`).adjust({ type: 'stack' }).tooltip(`${colorField}*${angleField}`);
   } else {
-    chart.data(data);
+    chart.data(processData);
     geometry.position(`1*${angleField}`).adjust({ type: 'stack' });
   }