fix: datazoom/scrollbar roam and realtime error

common/changes/@visactor/vchart/fix-data-zoom-roam_2025-02-10-12-22.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vchart",
+      "comment": "fix: allow dispatch roam zoom in datazoom component. fix#3714",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vchart"
+}

common/changes/@visactor/vchart/fix-data-zoom-roam_2025-02-11-09-18.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vchart",
+      "comment": "fix: datazoom and scrollbar realtime not work. fix#3716",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vchart"
+}

packages/vchart/src/component/data-zoom/data-filter-base-component.ts

@@ -899,7 +899,7 @@ export abstract class DataFilterBaseComponent<T extends IDataFilterComponentSpec
     const delayType: IDelayType = this._spec?.delayType ?? 'throttle';
     const delayTime = isValid(this._spec?.delayType) ? this._spec?.delayTime ?? 30 : 0;
     const realTime = this._spec?.realTime ?? true;
-    const option = { delayType, delayTime, realTime };
+    const option = { delayType, delayTime, realTime, allowComponentZoom: true };
     if (this._zoomAttr.enable) {
       (this as unknown as IZoomable).initZoomEventOfRegions(this._regions, null, this._handleChartZoom, option);
     }

packages/vchart/src/component/data-zoom/scroll-bar/scroll-bar.ts

@@ -16,6 +16,11 @@ import { Factory } from '../../../core/factory';
 import type { IZoomable } from '../../../interaction/zoom';
 import type { ILayoutType } from '../../../typings/layout';
 import { isClose } from '../../../util';
+// import { SCROLLBAR_EVENT, SCROLLBAR_END_EVENT } from '@visactor/vrender-components/es/constant';
+
+// 由vrender透出, 接入新版本后需修改
+const SCROLLBAR_EVENT = 'scrollDrag';
+const SCROLLBAR_END_EVENT = 'scrollUp';
 
 export class ScrollBar<T extends IScrollBarSpec = IScrollBarSpec> extends DataFilterBaseComponent<T> {
   static type = ComponentTypeEnum.scrollBar;
@@ -117,7 +122,11 @@ export class ScrollBar<T extends IScrollBarSpec = IScrollBarSpec> extends DataFi
       const container = this.getContainer();
       this._component = new ScrollBarComponent(attrs);
       // 绑定事件，防抖，防止频繁触发
-      this._component.addEventListener('scrollDrag', (e: any) => {
+      this._component.addEventListener(SCROLLBAR_EVENT, (e: any) => {
+        const value = e.detail.value;
+        this._handleChange(value[0], value[1]);
+      });
+      this._component.addEventListener(SCROLLBAR_END_EVENT, (e: any) => {
         const value = e.detail.value;
         this._handleChange(value[0], value[1]);
       });
@@ -129,7 +138,8 @@ export class ScrollBar<T extends IScrollBarSpec = IScrollBarSpec> extends DataFi
     super._handleChange(start, end, updateComponent);
     // filter out scroll event with same scroll value
     const isSameScrollValue = isClose(this._start, start) && isClose(this._end, end);
-    if (this._shouldChange && !isSameScrollValue) {
+    // realTime为false时，start和end始终没有变化过, 但是需要触发change事件
+    if (this._shouldChange && (!isSameScrollValue || this._spec.realTime === false)) {
       if (updateComponent && this._component) {
         this._component.setAttribute('range', [start, end]);
       }
@@ -164,16 +174,6 @@ export class ScrollBar<T extends IScrollBarSpec = IScrollBarSpec> extends DataFi
     }
   }
 
-  protected _initCommonEvent() {
-    super._initCommonEvent();
-    if (this._component) {
-      this._component.on('scrollDrag', (e: any) => {
-        const value = e.detail.value;
-        this._handleChange(value[0], value[1]);
-      });
-    }
-  }
-
   protected _getComponentAttrs() {
     const { rail, slider, innerPadding } = this._spec;
     const attrs: Partial<ScrollBarAttributes> = {};

packages/vchart/src/interaction/zoom/zoomable.ts

@@ -22,6 +22,11 @@ export interface ITriggerOption {
   delayType: IDelayType;
   delayTime: number;
   realTime: boolean;
+  // 在某些场景中, 组件不应该触发zoom事件, 例如滚动分页的离散图例
+  // 但在另一些场景中, 组件应该触发zoom事件, 例如缩略轴和滚动条
+  // 当前代码逻辑中, 默认不触发组件zoom事件
+  // 所以增设该配置, 用于允许组件触发zoom事件
+  allowComponentZoom?: boolean;
 }
 
 export type ZoomEventParams = { zoomDelta: number; zoomX: number; zoomY: number };
@@ -100,7 +105,12 @@ export class Zoomable implements IZoomable {
     return getDefaultTriggerEventByMode(this._renderMode)[type];
   }
 
-  private _zoomEventDispatch(params: BaseEventParams, regionOrSeries: IRegion | ISeries, callback?: ZoomCallback) {
+  private _zoomEventDispatch(
+    params: BaseEventParams,
+    regionOrSeries: IRegion | ISeries,
+    callback?: ZoomCallback,
+    allowComponentZoom?: boolean
+  ) {
     if (!this._isGestureListener && !params.event) {
       return;
     }
@@ -110,7 +120,7 @@ export class Zoomable implements IZoomable {
     const { zoomDelta, zoomX, zoomY, path } = event as any;
 
     // 不响应由组件触发的 zoom 事件（例如滚动分页的离散图例）
-    if (!path.some((node: any) => node.name && node.name.includes('region'))) {
+    if (!allowComponentZoom && !path.some((node: any) => node.name && node.name.includes('region'))) {
       return;
     }
 
@@ -182,7 +192,7 @@ export class Zoomable implements IZoomable {
       ...zoomParams,
       delayMap[delayType]((params: BaseEventParams) => {
         // if (realTime) {
-        this._zoomEventDispatch(params, regionOrSeries, callback);
+        this._zoomEventDispatch(params, regionOrSeries, callback, option.allowComponentZoom ?? false);
         // }
       }, delayTime) as any
     );