VisActor · skie1997 · Jul 30, 2024 · Jul 26, 2024 · Jul 26, 2024 · Jul 26, 2024
diff --git a/common/changes/@visactor/vchart/fix-update-of-axis_2024-07-26-07-06.json b/common/changes/@visactor/vchart/fix-update-of-axis_2024-07-26-07-06.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: fix issue of `updateSpec` when visible of grid in axis change, fix #3004\n\n",
+      "type": "none",
+      "packageName": "@visactor/vchart"
+    }
+  ],
+  "packageName": "@visactor/vchart",
+  "email": "dingling112@gmail.com"
+}
diff --git a/packages/vchart/__tests__/unit/core/update-spec.test.ts b/packages/vchart/__tests__/unit/core/update-spec.test.ts
@@ -1253,4 +1253,159 @@ describe('vchart updateSpec of different about label', () => {
       reTransformSpec: false
     });
   });
+
+  it('should remake when visible of axis grid change', () => {
+    const spec = {
+      type: 'area',
+      data: [
+        {
+          id: 'area',
+          values: [
+            { x: '1990', y: 110, from: 'video ad' },
+            { x: '1995', y: 160, from: 'video ad' },
+            { x: '2000', y: 230, from: 'video ad' },
+            { x: '2005', y: 300, from: 'video ad' },
+            { x: '2010', y: 448, from: 'video ad' },
+            { x: '2015', y: 500, from: 'video ad' },
+            { x: '1990', y: 120, from: 'email marketing' },
+            { x: '1995', y: 150, from: 'email marketing' },
+            { x: '2000', y: 200, from: 'email marketing' },
+            { x: '2005', y: 210, from: 'email marketing' },
+            { x: '2010', y: 300, from: 'email marketing' },
+            { x: '2015', y: 320, from: 'email marketing' }
+          ]
+        }
+      ],
+      label: {
+        visible: true
+      },
+      xField: 'x',
+      yField: 'y',
+      seriesField: 'from',
+      axes: [
+        {
+          orient: 'bottom',
+          type: 'band' as const
+        },
+        {
+          orient: 'left',
+          type: 'linear' as const,
+          grid: {
+            visible: true
+          }
+        }
+      ]
+    };
+    vchart = new VChart(spec, {
+      dom
+    });
+    vchart.renderSync();
+    const updateRes = (vchart as any)._updateSpec(
+      {
+        ...spec,
+        axes: [
+          {
+            orient: 'bottom',
+            type: 'band' as const
+          },
+          {
+            orient: 'left',
+            type: 'linear' as const,
+            grid: {
+              visible: false
+            }
+          }
+        ]
+      },
+      false
+    );
+
+    expect(updateRes).toEqual({
+      change: false,
+      changeTheme: false,
+      reCompile: false,
+      reMake: true,
+      reRender: true,
+      reSize: false,
+      reTransformSpec: false
+    });
+  });
+
+  it('should reRender when `alternateColor` of axis grid change', () => {
+    const spec = {
+      type: 'area',
+      data: [
+        {
+          id: 'area',
+          values: [
+            { x: '1990', y: 110, from: 'video ad' },
+            { x: '1995', y: 160, from: 'video ad' },
+            { x: '2000', y: 230, from: 'video ad' },
+            { x: '2005', y: 300, from: 'video ad' },
+            { x: '2010', y: 448, from: 'video ad' },
+            { x: '2015', y: 500, from: 'video ad' },
+            { x: '1990', y: 120, from: 'email marketing' },
+            { x: '1995', y: 150, from: 'email marketing' },
+            { x: '2000', y: 200, from: 'email marketing' },
+            { x: '2005', y: 210, from: 'email marketing' },
+            { x: '2010', y: 300, from: 'email marketing' },
+            { x: '2015', y: 320, from: 'email marketing' }
+          ]
+        }
+      ],
+      label: {
+        visible: true
+      },
+      xField: 'x',
+      yField: 'y',
+      seriesField: 'from',
+      axes: [
+        {
+          orient: 'bottom',
+          type: 'band' as const
+        },
+        {
+          orient: 'left',
+          type: 'linear' as const,
+          grid: {
+            visible: true
+          }
+        }
+      ]
+    };
+    vchart = new VChart(spec, {
+      dom
+    });
+    vchart.renderSync();
+    const updateRes = (vchart as any)._updateSpec(
+      {
+        ...spec,
+        axes: [
+          {
+            orient: 'bottom',
+            type: 'band' as const
+          },
+          {
+            orient: 'left',
+            type: 'linear' as const,
+            grid: {
+              visible: true,
+              alternateColor: ['pink', 'green']
+            }
+          }
+        ]
+      },
+      false
+    );
+
+    expect(updateRes).toEqual({
+      change: false,
+      changeTheme: false,
+      reCompile: false,
+      reMake: false,
+      reRender: true,
+      reSize: false,
+      reTransformSpec: false
+    });
+  });
 });
diff --git a/packages/vchart/src/component/axis/base-axis.ts b/packages/vchart/src/component/axis/base-axis.ts
@@ -406,6 +406,10 @@ export abstract class AxisComponent<T extends ICommonAxisSpec & Record<string, a
   /** Update API **/
   _compareSpec(spec: T, prevSpec: T) {
     const result = super._compareSpec(spec, prevSpec);
+    if (result.reMake) {
+      return result;
+    }
+
     result.reRender = true;
     /**
      * 存在轴同步相关配置的时候，暂时通过`reMake`触发更新
@@ -414,6 +418,11 @@ export abstract class AxisComponent<T extends ICommonAxisSpec & Record<string, a
       result.reMake = true;
       return result;
     }
+
+    result.reMake = ['grid', 'subGrid', 'tick', 'subTick', 'label', 'domainLine', 'title'].some(k => {
+      return prevSpec?.[k]?.visible !== spec?.[k]?.visible;
+    });
+
     return result;
   }