fix(pie-statistic): 修复环图中心文本从 false 更新为 null，读取空对象属性出错

__tests__/bugs/issue-2080-spec.ts

@@ -0,0 +1,68 @@
+import { Pie } from '../../src';
+import { createDiv } from '.././utils/dom';
+
+describe('donut plot', () => {
+  test('statistic content formatter', async () => {
+    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: 400,
+      height: 400,
+      radius: 1,
+      innerRadius: 0.3,
+      padding: [0, 0, 0, 0],
+      data,
+      angleField: 'value',
+      colorField: 'type',
+      interactions: [{ type: 'element-active' }, { type: 'pie-statistic-active' }],
+      statistic: null,
+      animation: false,
+    });
+
+    donutPlot.render();
+    function getAnnotations(chart) {
+      return chart.getComponents().filter((co) => co.type === 'annotation');
+    }
+
+    donutPlot.update({ statistic: {} });
+
+    let annotations = getAnnotations(donutPlot.chart);
+    expect(annotations.length).toBeGreaterThan(0);
+    let htmlAnnotations = document.querySelectorAll('.g2-html-annotation');
+    expect((htmlAnnotations[0] as HTMLElement).innerText).toBe('总计' /** 中心文本指标卡，默认title */);
+
+    donutPlot.update({ statistic: { title: { formatter: () => 'test' }, content: false } });
+
+    annotations = getAnnotations(donutPlot.chart);
+    expect(annotations.length).toBe(1);
+    htmlAnnotations = document.querySelectorAll('.g2-html-annotation');
+    expect((htmlAnnotations[0] as HTMLElement).innerText).toBe('test' /** 中心文本指标卡，默认title */);
+
+    donutPlot.destroy();
+  });
+});

__tests__/unit/plots/pie/statistic-spec.ts

@@ -43,6 +43,37 @@ describe('中心文本 - 指标卡', () => {
     expect((htmlAnnotations[0] as HTMLElement).innerText).toBe('总计' /** 中心文本指标卡，默认title */);
   });
 
+  it('中心文本内容更新', () => {
+    pie.update({ statistic: null });
+    let annotations = getAnnotations(pie.chart);
+    expect(annotations.length).toBe(0);
+
+    pie.update({ statistic: {} });
+    annotations = getAnnotations(pie.chart);
+    expect(annotations.length).toBe(2);
+    let htmlAnnotations = document.querySelectorAll('.g2-html-annotation');
+    expect((htmlAnnotations[0] as HTMLElement).innerText).toBe('总计' /** 中心文本指标卡，默认title */);
+    expect((htmlAnnotations[1] as HTMLElement).innerText).toBe(`${data.reduce((a, b) => a + b.value, 0)}`);
+
+    pie.update({ statistic: { title: false } });
+    annotations = getAnnotations(pie.chart);
+    expect(annotations.length).toBe(1);
+
+    pie.update({ statistic: { content: false } });
+    annotations = getAnnotations(pie.chart);
+    expect(annotations.length).toBe(0);
+
+    pie.update({ statistic: { title: { formatter: () => 'sss' } } });
+    annotations = getAnnotations(pie.chart);
+    expect(annotations.length).toBe(1);
+    htmlAnnotations = document.querySelectorAll('.g2-html-annotation');
+    expect((htmlAnnotations[0] as HTMLElement).innerText).toBe('sss');
+
+    pie.update({ meta: { value: { formatter: (v) => `${v}¥` } }, statistic: { content: {} } });
+    htmlAnnotations = document.querySelectorAll('.g2-html-annotation');
+    expect((htmlAnnotations[1] as HTMLElement).innerText).toBe(`${data.reduce((a, b) => a + b.value, 0)}¥`);
+  });
+
   it('自定义中心文本内容: update statistic title & content', () => {
     pie.update({
       ...pie.options,

__tests__/unit/plots/pie/utils/statistic-spec.ts → __tests__/unit/utils/statistic-spec.ts

@@ -1,13 +1,23 @@
-import { adapteStyle, setStatisticContainerStyle } from '../../../../../src/utils/statistic';
-import { ShapeStyle } from '../../../../../src/types';
-import { createDiv } from '../../../../utils/dom';
+import { adapteStyle, setStatisticContainerStyle } from '../../../src/utils/statistic';
+import { ShapeStyle } from '../../../src/types';
+import { createDiv } from '../../utils/dom';
 
 describe('饼图 statistics 相关处理函数', () => {
   it('adapteStyle', () => {
     const style = {
       fontSize: '12px',
       lineHeight: '12px',
     };
+
+    expect(adapteStyle()).toMatchObject({
+      overflow: 'hidden',
+      'white-space': 'nowrap',
+      'text-overflow': 'ellipsis',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    });
+
     expect(adapteStyle(style)).toMatchObject({
       'font-size': '12px',
       'line-height': '12px',

src/plots/pie/adaptor.ts

@@ -174,20 +174,24 @@ function statistic(params: Params<PieOptions>): Params<PieOptions> {
 
   /** 中心文本 指标卡 */
   if (innerRadius && statistic) {
-    const { title, content } = statistic;
-    if (title !== false && !get(title, 'formatter')) {
-      // @ts-ignore
-      title.formatter = (datum) => (datum ? datum[colorField] : '总计');
+    let { title, content } = statistic;
+    if (title !== false) {
+      title = deepAssign({}, { formatter: (datum) => (datum ? datum[colorField] : '总计') }, title);
     }
-    if (content !== false && !get(content, 'formatter')) {
-      // @ts-ignore
-      content.formatter = (datum, data) => {
-        const metaFormatter = get(meta, [angleField, 'formatter']);
-        const dataValue = datum ? datum[angleField] : getTotalValue(data, angleField);
-        return metaFormatter ? metaFormatter(dataValue) : dataValue;
-      };
+    if (content !== false) {
+      content = deepAssign(
+        {},
+        {
+          formatter: (datum, data) => {
+            const metaFormatter = get(meta, [angleField, 'formatter']);
+            const dataValue = datum ? datum[angleField] : getTotalValue(data, angleField);
+            return metaFormatter ? metaFormatter(dataValue) : dataValue;
+          },
+        },
+        content
+      );
     }
-    renderStatistic(chart, { statistic, plotType: 'pie' });
+    renderStatistic(chart, { statistic: { title, content }, plotType: 'pie' });
   }
 
   return params;