From 940be5508e5a6b3f5bf6eee9931cd4b70b86b88c Mon Sep 17 00:00:00 2001
From: skie1997 <skie1997@outlook.com>
Date: Thu, 31 Jul 2025 16:53:09 +0800
Subject: [PATCH 1/5] feat: scrollbar support auto visible. close #3972

---
 ...crollbar-autovisible_2025-07-31-08-52.json | 10 ++++++
 .../data-zoom/data-filter-base-component.ts   | 33 ++++++++++++-------
 .../src/component/data-zoom/interface.ts      |  5 +++
 3 files changed, 37 insertions(+), 11 deletions(-)
 create mode 100644 common/changes/@visactor/vchart/feat-scrollbar-autovisible_2025-07-31-08-52.json

diff --git a/common/changes/@visactor/vchart/feat-scrollbar-autovisible_2025-07-31-08-52.json b/common/changes/@visactor/vchart/feat-scrollbar-autovisible_2025-07-31-08-52.json
new file mode 100644
index 0000000000..22ff95774e
--- /dev/null
+++ b/common/changes/@visactor/vchart/feat-scrollbar-autovisible_2025-07-31-08-52.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vchart",
+      "comment": "feat: scrollbar support auto visible. close #3972",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vchart"
+}
\ No newline at end of file
diff --git a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts
index 7f91ad32f3..cc82833c0f 100644
--- a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts
+++ b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts
@@ -448,14 +448,14 @@ export abstract class DataFilterBaseComponent<T extends IDataFilterComponentSpec
             s.coordinate === 'cartesian'
               ? (s as ICartesianSeries).getXAxisHelper()
               : s.coordinate === 'polar'
-              ? (s as IPolarSeries).angleAxisHelper
-              : null;
+                ? (s as IPolarSeries).angleAxisHelper
+                : null;
           const yAxisHelper =
             s.coordinate === 'cartesian'
               ? (s as ICartesianSeries).getYAxisHelper()
               : s.coordinate === 'polar'
-              ? (s as IPolarSeries).radiusAxisHelper
-              : null;
+                ? (s as IPolarSeries).radiusAxisHelper
+                : null;
           if (!xAxisHelper || !yAxisHelper) {
             return;
           }
@@ -463,10 +463,10 @@ export abstract class DataFilterBaseComponent<T extends IDataFilterComponentSpec
             xAxisHelper.getAxisId() === this._relatedAxisComponent.id
               ? xAxisHelper
               : yAxisHelper.getAxisId() === this._relatedAxisComponent.id
-              ? yAxisHelper
-              : this._isHorizontal
-              ? xAxisHelper
-              : yAxisHelper;
+                ? yAxisHelper
+                : this._isHorizontal
+                  ? xAxisHelper
+                  : yAxisHelper;
           const valueAxisHelper = stateAxisHelper === xAxisHelper ? yAxisHelper : xAxisHelper;
 
           dataCollection.push(s.getRawData());
@@ -642,8 +642,8 @@ export abstract class DataFilterBaseComponent<T extends IDataFilterComponentSpec
       start = this._spec.start
         ? this._spec.start
         : this._spec.startValue
-        ? this.dataToStatePoint(this._spec.startValue)
-        : 0;
+          ? this.dataToStatePoint(this._spec.startValue)
+          : 0;
       end = this._spec.end ? this._spec.end : this._spec.endValue ? this.dataToStatePoint(this._spec.endValue) : 1;
     }
     this._startValue = this.statePointToData(start);
@@ -862,6 +862,9 @@ export abstract class DataFilterBaseComponent<T extends IDataFilterComponentSpec
     if (!this._activeRoam || (this._dragAttr.filter && !this._dragAttr.filter(delta, e))) {
       return;
     }
+    if ((this._spec.roamDrag as IRoamDragSpec)?.autoVisible) {
+      this.show();
+    }
     const [dx, dy] = delta;
     let value = this._isHorizontal ? dx : dy;
     if (this._dragAttr.reverse) {
@@ -886,7 +889,7 @@ export abstract class DataFilterBaseComponent<T extends IDataFilterComponentSpec
 
   protected _initCommonEvent() {
     const delayType: IDelayType = this._spec?.delayType ?? 'throttle';
-    const delayTime = isValid(this._spec?.delayType) ? this._spec?.delayTime ?? 30 : 0;
+    const delayTime = isValid(this._spec?.delayType) ? (this._spec?.delayTime ?? 30) : 0;
     const realTime = this._spec?.realTime ?? true;
     const option = { delayType, delayTime, realTime, allowComponentZoom: true };
     if (this._zoomAttr.enable) {
@@ -898,6 +901,14 @@ export abstract class DataFilterBaseComponent<T extends IDataFilterComponentSpec
     if (this._dragAttr.enable) {
       (this as unknown as IZoomable).initDragEventOfRegions(this._regions, null, this._handleChartDrag, option);
     }
+    if ((this._spec.roamDrag as IRoamDragSpec)?.autoVisible) {
+      const dragEnd = 'panend';
+      this.event.on(dragEnd, () => {
+        setTimeout(() => {
+          this.hide();
+        }, 300);
+      });
+    }
   }
 
   updateLayoutAttribute(): void {
diff --git a/packages/vchart/src/component/data-zoom/interface.ts b/packages/vchart/src/component/data-zoom/interface.ts
index 6e0b56b866..16fafc3452 100644
--- a/packages/vchart/src/component/data-zoom/interface.ts
+++ b/packages/vchart/src/component/data-zoom/interface.ts
@@ -169,6 +169,11 @@ export interface IRoamDragSpec extends IRoamSpec {
    * @returns
    */
   filter?: (delta: [number, number], e?: BaseEventParams['event']) => boolean;
+  /**
+   * 仅在画布交互展示组件
+   * @since 2.0.3
+   */
+  autoVisible?: boolean;
 }
 
 export interface IRoamScrollSpec extends IRoamSpec {

From 2670e1d1fddd581a258ef9fc6c199bd9c325dc7a Mon Sep 17 00:00:00 2001
From: skie1997 <skie1997@outlook.com>
Date: Thu, 31 Jul 2025 17:50:01 +0800
Subject: [PATCH 2/5] feat: add debounce of visible

---
 .../src/component/data-zoom/data-filter-base-component.ts     | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts
index cc82833c0f..2df953ac6d 100644
--- a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts
+++ b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts
@@ -903,8 +903,10 @@ export abstract class DataFilterBaseComponent<T extends IDataFilterComponentSpec
     }
     if ((this._spec.roamDrag as IRoamDragSpec)?.autoVisible) {
       const dragEnd = 'panend';
+      let hideTimer: any;
       this.event.on(dragEnd, () => {
-        setTimeout(() => {
+        clearTimeout(hideTimer);
+        hideTimer = setTimeout(() => {
           this.hide();
         }, 300);
       });

From 06922889ead89a62e687a043056c3639b0ab26dc Mon Sep 17 00:00:00 2001
From: skie1997 <skie1997@outlook.com>
Date: Thu, 31 Jul 2025 17:53:39 +0800
Subject: [PATCH 3/5] feat: add debounce of visible

---
 .../src/component/data-zoom/data-filter-base-component.ts  | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts
index 2df953ac6d..1053b33a43 100644
--- a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts
+++ b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts
@@ -28,7 +28,8 @@ import {
   minInArray,
   maxInArray,
   abs,
-  last
+  last,
+  throttle
 } from '@visactor/vutils';
 // eslint-disable-next-line no-duplicate-imports
 import type { IFilterMode } from './interface';
@@ -903,10 +904,8 @@ export abstract class DataFilterBaseComponent<T extends IDataFilterComponentSpec
     }
     if ((this._spec.roamDrag as IRoamDragSpec)?.autoVisible) {
       const dragEnd = 'panend';
-      let hideTimer: any;
       this.event.on(dragEnd, () => {
-        clearTimeout(hideTimer);
-        hideTimer = setTimeout(() => {
+        throttle(() => {
           this.hide();
         }, 300);
       });

From fe718af7050ad71b7b903d8dadae3ad3666b8562 Mon Sep 17 00:00:00 2001
From: skie1997 <skie1997@outlook.com>
Date: Thu, 31 Jul 2025 19:36:56 +0800
Subject: [PATCH 4/5] feat: add debounce of visible

---
 .../src/component/data-zoom/data-filter-base-component.ts    | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts
index 1053b33a43..d8e772d1ef 100644
--- a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts
+++ b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts
@@ -904,10 +904,9 @@ export abstract class DataFilterBaseComponent<T extends IDataFilterComponentSpec
     }
     if ((this._spec.roamDrag as IRoamDragSpec)?.autoVisible) {
       const dragEnd = 'panend';
+      const _throttledHide = throttle(() => this.hide(), 300);
       this.event.on(dragEnd, () => {
-        throttle(() => {
-          this.hide();
-        }, 300);
+        _throttledHide();
       });
     }
   }

From 59af96f3dec712690d5fca0f4455695c5cb4e2e3 Mon Sep 17 00:00:00 2001
From: skie1997 <skie1997@outlook.com>
Date: Fri, 29 Aug 2025 14:05:32 +0800
Subject: [PATCH 5/5] fix: code review problem

---
 .../component/data-zoom/data-filter-base-component.ts  | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts
index d8e772d1ef..83a7e0aece 100644
--- a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts
+++ b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts
@@ -65,6 +65,8 @@ export abstract class DataFilterBaseComponent<T extends IDataFilterComponentSpec
   protected _orient: IOrientType = 'left';
   protected _isHorizontal: boolean;
 
+  protected _throttledHide: () => void;
+
   // 是否为自动模式
   protected _auto?: boolean;
   protected _fixedBandSize?: number;
@@ -904,9 +906,9 @@ export abstract class DataFilterBaseComponent<T extends IDataFilterComponentSpec
     }
     if ((this._spec.roamDrag as IRoamDragSpec)?.autoVisible) {
       const dragEnd = 'panend';
-      const _throttledHide = throttle(() => this.hide(), 300);
+      this._throttledHide = throttle(() => this.hide(), 300);
       this.event.on(dragEnd, () => {
-        _throttledHide();
+        this._throttledHide();
       });
     }
   }
@@ -1049,6 +1051,10 @@ export abstract class DataFilterBaseComponent<T extends IDataFilterComponentSpec
   protected _getNeedClearVRenderComponents(): IGraphic[] {
     return [this._component] as unknown as IGroup[];
   }
+
+  clear(): void {
+    this._throttledHide = null;
+  }
 }
 
 mixin(DataFilterBaseComponent, Zoomable);