feat: add config to avoid brush state update. close #4035

common/changes/@visactor/vchart/dev-2.0.0_2025-06-16-11-50.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vchart",
+      "comment": "feat: add config to avoid brush state update. close #4035",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vchart"
+}

docs/assets/option/en/component/brush.md

@@ -97,6 +97,10 @@ The size threshold of the brush selection box. Supported since version `1.2.0`.
 
 Whether to turn on the brush to remove the drill. Effective from version 0.10.0.
 
+### updateElementsState(boolean) = true
+
+Whether to update element states. Disabling this can optimize performance in zooming scenarios. Effective since version 1.13.13.
+
 ### zoomWhenEmpty(boolean) = false
 
 Whether to drill down when empty data is retrieved. Effective from version 1.12.2.

docs/assets/option/zh/component/brush.md

@@ -97,6 +97,10 @@ brush 选框的大小阈值。自 `1.2.0` 版本开始支持。
 
 是否开启刷取下钻。自 0.10.0 版本生效。
 
+### updateElementsState(boolean) = true
+
+是否更新元素状态,关闭后可优化缩放场景下的性能。自 1.13.13 版本生效。
+
 ### zoomWhenEmpty(boolean) = false
 
 刷取到空数据时, 是否下钻。自 1.12.2 版本生效。

packages/vchart/src/component/brush/brush.ts

@@ -299,6 +299,7 @@ export class Brush<T extends IBrushSpec = IBrushSpec> extends BaseComponent<T> i
     brush.addEventListener(BrushEvent.drawEnd, (e: any) => {
       this._needDisablePickable = false;
       const { operateMask } = e.detail as any;
+      const { updateElementsState = true } = this._spec;
       if (this._spec?.onBrushEnd) {
         // 如果onBrushEnd返回true，则清空brush， 并抛出clear事件
         if (this._spec.onBrushEnd(e) === true) {
@@ -312,7 +313,7 @@ export class Brush<T extends IBrushSpec = IBrushSpec> extends BaseComponent<T> i
         }
       } else {
         const inBrushData = this._extendDataInBrush(this._inBrushElementsMap);
-        if (!this._spec.zoomWhenEmpty && inBrushData.length > 0) {
+        if ((!this._spec.zoomWhenEmpty && inBrushData.length > 0) || !updateElementsState) {
           this._setAxisAndDataZoom(operateMask, region);
         }
         this._emitEvent(ChartEvent.brushEnd, region);
@@ -321,8 +322,9 @@ export class Brush<T extends IBrushSpec = IBrushSpec> extends BaseComponent<T> i
 
     brush.addEventListener(BrushEvent.moveEnd, (e: any) => {
       const { operateMask } = e.detail as any;
+      const { updateElementsState = true } = this._spec;
       const inBrushData = this._extendDataInBrush(this._inBrushElementsMap);
-      if (!this._spec.zoomWhenEmpty && inBrushData.length > 0) {
+      if ((!this._spec.zoomWhenEmpty && inBrushData.length > 0) || updateElementsState) {
         this._setAxisAndDataZoom(operateMask, region);
       }
       this._emitEvent(ChartEvent.brushEnd, region);
@@ -372,8 +374,11 @@ export class Brush<T extends IBrushSpec = IBrushSpec> extends BaseComponent<T> i
   /*** start: event dispatch ***/
   private _handleBrushChange(region: IRegion, e: any) {
     const { operateMask } = e.detail as any;
-    this._reconfigItem(operateMask, region);
-    this._reconfigLinkedItem(operateMask, region);
+    const { updateElementsState = true } = this._spec;
+    if (updateElementsState) {
+      this._reconfigItem(operateMask, region);
+      this._reconfigLinkedItem(operateMask, region);
+    }
   }
 
   protected _extendDataInBrush(elementsMap: { [brushName: string]: { [elementKey: string]: IMarkGraphic } }) {

packages/vchart/src/component/brush/interface.ts

@@ -138,6 +138,13 @@ export interface IBrushSpec extends IBrushTheme, IBrushDataBindSpec {
    * @default true
    */
   visible?: boolean;
+  /**
+   * 是否更新图元状态
+   * 关闭时, brush 事件不会触发图元状态更新, 优化缩放场景下的性能
+   * @default true
+   * @since 1.13.13
+   */
+  updateElementsState?: boolean;
 }
 
 export type IBrushType = 'x' | 'y' | 'rect' | 'polygon';