Merge pull request #4123 from VisActor/feat/scrollbar-autovisible

feat: scrollbar support auto visible. close #3972

Author: xuefei1313

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"
+}

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';
@@ -64,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;
@@ -448,25 +451,25 @@ 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;
           }
           const stateAxisHelper =
             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 +645,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 +865,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 +892,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 +904,13 @@ 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._throttledHide = throttle(() => this.hide(), 300);
+      this.event.on(dragEnd, () => {
+        this._throttledHide();
+      });
+    }
   }
 
   updateLayoutAttribute(): void {
@@ -1038,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);

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 {