diff --git a/common/changes/@visactor/vchart/dev-2.0.0_2025-06-16-11-50.json b/common/changes/@visactor/vchart/dev-2.0.0_2025-06-16-11-50.json new file mode 100644 index 0000000000..ee9d48d71e --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/docs/assets/option/en/component/brush.md b/docs/assets/option/en/component/brush.md index 7c6794d50a..42701f1b42 100644 --- a/docs/assets/option/en/component/brush.md +++ b/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. diff --git a/docs/assets/option/zh/component/brush.md b/docs/assets/option/zh/component/brush.md index d0ca11ebf3..c5bdf4214a 100644 --- a/docs/assets/option/zh/component/brush.md +++ b/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 版本生效。 diff --git a/packages/vchart/src/component/brush/brush.ts b/packages/vchart/src/component/brush/brush.ts index 80015d136f..898fb83453 100644 --- a/packages/vchart/src/component/brush/brush.ts +++ b/packages/vchart/src/component/brush/brush.ts @@ -299,6 +299,7 @@ export class Brush extends BaseComponent 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 extends BaseComponent 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 extends BaseComponent 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 extends BaseComponent 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 } }) { diff --git a/packages/vchart/src/component/brush/interface.ts b/packages/vchart/src/component/brush/interface.ts index 96a3498df5..dec799be6d 100644 --- a/packages/vchart/src/component/brush/interface.ts +++ b/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';