fix: label should not update when label is set in series, related #2928

packages/vchart/__tests__/unit/core/update-spec.test.ts

@@ -1,5 +1,6 @@
 import type { IBarChartSpec } from '../../../src';
 import { default as VChart } from '../../../src';
+import { series } from '../../../src/theme/builtin/common/series';
 import { createDiv, removeDom } from '../../util/dom';
 
 describe('vchart updateSpec test', () => {
@@ -1003,4 +1004,248 @@ describe('vchart updateSpec of same spec', () => {
       reTransformSpec: false
     });
   });
+
+  it('should not remake when label is in series', () => {
+    const spec = {
+      type: 'bar',
+      data: [
+        {
+          id: 'barData',
+          values: [
+            {
+              name: 'Apple',
+              value: 214480
+            },
+            {
+              name: 'Google',
+              value: 155506
+            }
+          ]
+        }
+      ],
+      direction: 'horizontal',
+      series: [
+        {
+          type: 'bar',
+          xField: 'value',
+          yField: 'name',
+          label: {
+            visible: true
+          }
+        }
+      ],
+      axes: [
+        {
+          orient: 'bottom',
+          visible: false
+        }
+      ]
+    };
+    vchart = new VChart(spec, {
+      dom
+    });
+    vchart.renderSync();
+    const updateRes = (vchart as any)._updateSpec(spec, false);
+
+    expect(updateRes).toEqual({
+      change: false,
+      reCompile: false,
+      reMake: false,
+      reRender: true,
+      reSize: false,
+      reTransformSpec: false
+    });
+  });
+
+  it('should not remake when label is in chart', () => {
+    const spec = {
+      data: [
+        {
+          id: 'barData',
+          values: [
+            {
+              name: 'Apple',
+              value: 214480
+            },
+            {
+              name: 'Google',
+              value: 155506
+            }
+          ]
+        }
+      ],
+      direction: 'horizontal',
+      type: 'bar',
+      xField: 'value',
+      yField: 'name',
+      label: {
+        visible: true
+      },
+      axes: [
+        {
+          orient: 'bottom',
+          visible: false
+        }
+      ]
+    };
+    vchart = new VChart(spec, {
+      dom
+    });
+    vchart.renderSync();
+    const updateRes = (vchart as any)._updateSpec(spec, false);
+
+    expect(updateRes).toEqual({
+      change: false,
+      reCompile: false,
+      reMake: false,
+      reRender: true,
+      reSize: false,
+      reTransformSpec: false
+    });
+  });
+});
+
+describe('vchart updateSpec of different about label', () => {
+  let container: HTMLElement;
+  let dom: HTMLElement;
+  let vchart: VChart;
+  beforeAll(() => {
+    container = createDiv();
+    dom = createDiv(container);
+    dom.id = 'container';
+    container.style.position = 'fixed';
+    container.style.width = '500px';
+    container.style.height = '500px';
+    container.style.top = '0px';
+    container.style.left = '0px';
+  });
+
+  afterAll(() => {
+    removeDom(container);
+    vchart.release();
+  });
+
+  it('should remake when label is in series update', () => {
+    const spec = {
+      type: 'bar',
+      data: [
+        {
+          id: 'barData',
+          values: [
+            {
+              name: 'Apple',
+              value: 214480
+            },
+            {
+              name: 'Google',
+              value: 155506
+            }
+          ]
+        }
+      ],
+      direction: 'horizontal',
+      series: [
+        {
+          type: 'bar',
+          xField: 'value',
+          yField: 'name',
+          label: {
+            visible: true
+          }
+        }
+      ],
+      axes: [
+        {
+          orient: 'bottom',
+          visible: false
+        }
+      ]
+    };
+    vchart = new VChart(spec, {
+      dom
+    });
+    vchart.renderSync();
+    const updateRes = (vchart as any)._updateSpec(
+      {
+        ...spec,
+        series: [
+          {
+            type: 'bar',
+            xField: 'value',
+            yField: 'name',
+            label: {
+              visible: true,
+              position: 'center'
+            }
+          }
+        ]
+      },
+      false
+    );
+
+    expect(updateRes).toEqual({
+      change: false,
+      reCompile: false,
+      reMake: true,
+      reRender: true,
+      reSize: false,
+      reTransformSpec: false
+    });
+  });
+
+  it('should remake when label is in chart update', () => {
+    const spec = {
+      data: [
+        {
+          id: 'barData',
+          values: [
+            {
+              name: 'Apple',
+              value: 214480
+            },
+            {
+              name: 'Google',
+              value: 155506
+            }
+          ]
+        }
+      ],
+      direction: 'horizontal',
+      type: 'bar',
+      xField: 'value',
+      yField: 'name',
+      label: {
+        visible: true
+      },
+      axes: [
+        {
+          orient: 'bottom',
+          visible: false
+        }
+      ]
+    };
+    vchart = new VChart(spec, {
+      dom
+    });
+    vchart.renderSync();
+    const updateRes = (vchart as any)._updateSpec(
+      {
+        ...spec,
+        label: {
+          visible: true,
+          position: 'top'
+        }
+      },
+      false
+    );
+
+    expect(updateRes).toEqual({
+      change: false,
+      reCompile: false,
+      reMake: true,
+      reRender: true,
+      reSize: false,
+      reTransformSpec: false
+    });
+  });
 });

packages/vchart/jest.config.js

@@ -17,7 +17,7 @@ module.exports = {
     }
   },
   verbose: true,
-  collectCoverage: true,
+  // collectCoverage: true,
   coverageReporters: ['json-summary', 'lcov', 'text'],
   coveragePathIgnorePatterns: ['node_modules', '__tests__', 'interface.ts', '.d.ts', 'typings'],
   collectCoverageFrom: [

packages/vchart/src/chart/base/base-chart.ts

@@ -874,9 +874,14 @@ export class BaseChart<T extends IChartSpec> extends CompilableBase implements I
       };
     } = {};
     this._components.forEach(c => {
+      if (c.type === ComponentTypeEnum.label || c.type === ComponentTypeEnum.totalLabel) {
+        // label配置都会被解析到series中，所以不适合放在这里进行比对
+        return;
+      }
       const compSpecKey = c.specKey || c.type;
       // 每一个组件获取对应的speck
       const cmpSpec = this._spec[compSpecKey] ?? {};
+
       if (isArray(cmpSpec)) {
         componentCache[compSpecKey] = componentCache[compSpecKey] || {
           specCount: cmpSpec.length,

packages/vchart/src/component/label/label.ts

@@ -78,13 +78,15 @@ export class Label<T extends IChartSpec = any> extends BaseLabelComponent<T> {
       const hasVisibleLabel = seriesIndexes.some(seriesIndex => {
         const seriesInfo = chartSpecInfo.series[seriesIndex];
         const { markLabelSpec = {} } = seriesInfo;
+
         return Object.values(markLabelSpec).some(
           labelSpecList => Array.isArray(labelSpecList) && isLabelVisible(labelSpecList)
         );
       });
       if (hasVisibleLabel) {
         specInfo.push({
-          spec: chartSpec,
+          spec: {},
+
           type: ComponentTypeEnum.label,
           specInfoPath: ['component', this.specKey, i],
           regionIndexes: [i]