@visactor/vrender-components 0.17.0-alpha.8 → 0.17.1-alpha.1

package/es/data-zoom/config.d.ts

@@ -1,13 +1,13 @@
-export declare enum DataZoomActiveTag {
-    startHandler = "startHandler",
-    endHandler = "endHandler",
-    middleHandler = "middleHandler",
-    background = "background"
-}
 export declare const DEFAULT_DATA_ZOOM_ATTRIBUTES: {
     orient: string;
     showDetail: string;
     brushSelect: boolean;
+    zoomLock: boolean;
+    minSpan: number;
+    maxSpan: number;
+    delayType: string;
+    delayTime: number;
+    realTime: boolean;
     backgroundStyle: {
         fill: string;
         stroke: string;

package/es/data-zoom/config.js

@@ -1,14 +1,13 @@
-export var DataZoomActiveTag;
-
-!function(DataZoomActiveTag) {
-    DataZoomActiveTag.startHandler = "startHandler", DataZoomActiveTag.endHandler = "endHandler", 
-    DataZoomActiveTag.middleHandler = "middleHandler", DataZoomActiveTag.background = "background";
-}(DataZoomActiveTag || (DataZoomActiveTag = {}));
-
 export const DEFAULT_DATA_ZOOM_ATTRIBUTES = {
     orient: "bottom",
     showDetail: "auto",
     brushSelect: !0,
+    zoomLock: !1,
+    minSpan: 0,
+    maxSpan: 1,
+    delayType: "throttle",
+    delayTime: 0,
+    realTime: !0,
     backgroundStyle: {
         fill: "white",
         stroke: "#D1DBEE",

package/es/data-zoom/config.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/data-zoom/config.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,iBAKX;AALD,WAAY,iBAAiB;IAC3B,kDAA6B,CAAA;IAC7B,8CAAyB,CAAA;IACzB,oDAA+B,CAAA;IAC/B,8CAAyB,CAAA;AAC3B,CAAC,EALW,iBAAiB,KAAjB,iBAAiB,QAK5B;AACD,MAAM,CAAC,MAAM,4BAA4B,GAAG;IAC1C,MAAM,EAAE,QAAQ;IAChB,UAAU,EAAE,MAAM;IAClB,WAAW,EAAE,IAAI;IACjB,eAAe,EAAE;QACf,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,CAAC;QACZ,YAAY,EAAE,CAAC;KAChB;IACD,aAAa,EAAE;QACb,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,GAAG;KACjB;IACD,oBAAoB,EAAE;QACpB,IAAI,EAAE;YACJ,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,SAAS;YACjB,SAAS,EAAE,CAAC;YACZ,IAAI,EAAE,SAAS;SAChB;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,SAAS;YACjB,SAAS,EAAE,CAAC;SACb;KACF;IACD,uBAAuB,EAAE;QACvB,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,GAAG;KACjB;IACD,4BAA4B,EAAE;QAC5B,IAAI,EAAE;YACJ,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,SAAS;YACjB,SAAS,EAAE,CAAC;YACZ,IAAI,EAAE,SAAS;SAChB;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,SAAS;YACjB,SAAS,EAAE,CAAC;SACb;KACF;IACD,kBAAkB,EAAE;QAClB,OAAO,EAAE,IAAI;QACb,UAAU,EAAE;YACV,IAAI,EAAE,CAAC;YACP,KAAK,EAAE;gBACL,IAAI,EAAE,OAAO;gBACb,MAAM,EAAE,SAAS;gBACjB,YAAY,EAAE,CAAC;aAChB;SACF;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,CAAC;YACP,IAAI,EAAE,OAAO;YACb,MAAM,EAAE,SAAS;YACjB,UAAU,EAER,8PAA8P;YAChQ,SAAS,EAAE,GAAG;SACf;KACF;IACD,iBAAiB,EAAE;QACjB,OAAO,EAAE,IAAI;QACb,UAAU,EAER,yiBAAyiB;QAE3iB,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,GAAG;KACf;IACD,eAAe,EAAE;QACf,OAAO,EAAE,IAAI;QACb,UAAU,EAER,yiBAAyiB;QAE3iB,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,GAAG;KACf;IACD,cAAc,EAAE;QACd,OAAO,EAAE,CAAC;QACV,SAAS,EAAE;YACT,QAAQ,EAAE,EAAE;YACZ,IAAI,EAAE,SAAS;SAChB;KACF;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,CAAC;QACV,SAAS,EAAE;YACT,QAAQ,EAAE,EAAE;YACZ,IAAI,EAAE,SAAS;SAChB;KACF;CACF,CAAC","file":"config.js","sourcesContent":["export enum DataZoomActiveTag {\n  startHandler = 'startHandler',\n  endHandler = 'endHandler',\n  middleHandler = 'middleHandler',\n  background = 'background'\n}\nexport const DEFAULT_DATA_ZOOM_ATTRIBUTES = {\n  orient: 'bottom',\n  showDetail: 'auto',\n  brushSelect: true,\n  backgroundStyle: {\n    fill: 'white',\n    stroke: '#D1DBEE',\n    lineWidth: 1,\n    cornerRadius: 2\n  },\n  dragMaskStyle: {\n    fill: '#B0C8F9',\n    fillOpacity: 0.2\n  },\n  backgroundChartStyle: {\n    area: {\n      visible: true,\n      stroke: '#D1DBEE',\n      lineWidth: 1,\n      fill: '#F6F8FC'\n    },\n    line: {\n      visible: true,\n      stroke: '#D1DBEE',\n      lineWidth: 1\n    }\n  },\n  selectedBackgroundStyle: {\n    fill: '#B0C8F9',\n    fillOpacity: 0.5\n  },\n  selectedBackgroundChartStyle: {\n    area: {\n      visible: true,\n      stroke: '#B0C8F9',\n      lineWidth: 1,\n      fill: '#fbb934'\n    },\n    line: {\n      visible: true,\n      stroke: '#fbb934',\n      lineWidth: 1\n    }\n  },\n  middleHandlerStyle: {\n    visible: true,\n    background: {\n      size: 8,\n      style: {\n        fill: 'white',\n        stroke: '#B0C8F9',\n        cornerRadius: 2\n      }\n    },\n    icon: {\n      size: 6,\n      fill: 'white',\n      stroke: '#B0C8F9',\n      symbolType:\n        // eslint-disable-next-line max-len\n        'M 0.3 -0.5 C 0.41 -0.5 0.5 -0.41 0.5 -0.3 C 0.5 -0.3 0.5 0.3 0.5 0.3 C 0.5 0.41 0.41 0.5 0.3 0.5 C 0.3 0.5 -0.3 0.5 -0.3 0.5 C -0.41 0.5 -0.5 0.41 -0.5 0.3 C -0.5 0.3 -0.5 -0.3 -0.5 -0.3 C -0.5 -0.41 -0.41 -0.5 -0.3 -0.5 C -0.3 -0.5 0.3 -0.5 0.3 -0.5 Z',\n      lineWidth: 0.5\n    }\n  },\n  startHandlerStyle: {\n    visible: true,\n    symbolType:\n      // eslint-disable-next-line max-len\n      'M -0.0544 0.25 C -0.0742 0.25 -0.0901 0.234 -0.0901 0.2143 L -0.0901 -0.1786 C -0.0901 -0.1983 -0.0742 -0.2143 -0.0544 -0.2143 L -0.0187 -0.2143 L -0.0187 -0.5 L 0.017 -0.5 L 0.017 -0.2143 L 0.0527 -0.2143 C 0.0724 -0.2143 0.0884 -0.1983 0.0884 -0.1786 L 0.0884 0.2143 C 0.0884 0.234 0.0724 0.25 0.0527 0.25 L 0.017 0.25 L 0.017 0.5 L -0.0187 0.5 L -0.0187 0.25 L -0.0544 0.25 Z M -0.0187 -0.1429 L -0.0544 -0.1429 L -0.0544 0.1786 L -0.0187 0.1786 L -0.0187 -0.1429 Z M 0.0527 -0.1429 L 0.017 -0.1429 L 0.017 0.1786 L 0.0527 0.1786 L 0.0527 -0.1429 Z',\n    // size: 40,\n    fill: 'white',\n    stroke: '#B0C8F9',\n    lineWidth: 0.5\n  },\n  endHandlerStyle: {\n    visible: true,\n    symbolType:\n      // eslint-disable-next-line max-len\n      'M -0.0544 0.25 C -0.0742 0.25 -0.0901 0.234 -0.0901 0.2143 L -0.0901 -0.1786 C -0.0901 -0.1983 -0.0742 -0.2143 -0.0544 -0.2143 L -0.0187 -0.2143 L -0.0187 -0.5 L 0.017 -0.5 L 0.017 -0.2143 L 0.0527 -0.2143 C 0.0724 -0.2143 0.0884 -0.1983 0.0884 -0.1786 L 0.0884 0.2143 C 0.0884 0.234 0.0724 0.25 0.0527 0.25 L 0.017 0.25 L 0.017 0.5 L -0.0187 0.5 L -0.0187 0.25 L -0.0544 0.25 Z M -0.0187 -0.1429 L -0.0544 -0.1429 L -0.0544 0.1786 L -0.0187 0.1786 L -0.0187 -0.1429 Z M 0.0527 -0.1429 L 0.017 -0.1429 L 0.017 0.1786 L 0.0527 0.1786 L 0.0527 -0.1429 Z',\n    // size: 40,\n    fill: 'white',\n    stroke: '#B0C8F9',\n    lineWidth: 0.5\n  },\n  startTextStyle: {\n    padding: 4,\n    textStyle: {\n      fontSize: 10,\n      fill: '#6F6F6F'\n    }\n  },\n  endTextStyle: {\n    padding: 4,\n    textStyle: {\n      fontSize: 10,\n      fill: '#6F6F6F'\n    }\n  }\n};\n"]}
+{"version":3,"sources":["../src/data-zoom/config.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,4BAA4B,GAAG;IAC1C,MAAM,EAAE,QAAQ;IAChB,UAAU,EAAE,MAAM;IAClB,WAAW,EAAE,IAAI;IACjB,QAAQ,EAAE,KAAK;IACf,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,CAAC;IACV,SAAS,EAAE,UAAU;IACrB,SAAS,EAAE,CAAC;IACZ,QAAQ,EAAE,IAAI;IACd,eAAe,EAAE;QACf,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,CAAC;QACZ,YAAY,EAAE,CAAC;KAChB;IACD,aAAa,EAAE;QACb,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,GAAG;KACjB;IACD,oBAAoB,EAAE;QACpB,IAAI,EAAE;YACJ,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,SAAS;YACjB,SAAS,EAAE,CAAC;YACZ,IAAI,EAAE,SAAS;SAChB;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,SAAS;YACjB,SAAS,EAAE,CAAC;SACb;KACF;IACD,uBAAuB,EAAE;QACvB,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,GAAG;KACjB;IACD,4BAA4B,EAAE;QAC5B,IAAI,EAAE;YACJ,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,SAAS;YACjB,SAAS,EAAE,CAAC;YACZ,IAAI,EAAE,SAAS;SAChB;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,SAAS;YACjB,SAAS,EAAE,CAAC;SACb;KACF;IACD,kBAAkB,EAAE;QAClB,OAAO,EAAE,IAAI;QACb,UAAU,EAAE;YACV,IAAI,EAAE,CAAC;YACP,KAAK,EAAE;gBACL,IAAI,EAAE,OAAO;gBACb,MAAM,EAAE,SAAS;gBACjB,YAAY,EAAE,CAAC;aAChB;SACF;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,CAAC;YACP,IAAI,EAAE,OAAO;YACb,MAAM,EAAE,SAAS;YACjB,UAAU,EAER,8PAA8P;YAChQ,SAAS,EAAE,GAAG;SACf;KACF;IACD,iBAAiB,EAAE;QACjB,OAAO,EAAE,IAAI;QACb,UAAU,EAER,yiBAAyiB;QAE3iB,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,GAAG;KACf;IACD,eAAe,EAAE;QACf,OAAO,EAAE,IAAI;QACb,UAAU,EAER,yiBAAyiB;QAE3iB,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,GAAG;KACf;IACD,cAAc,EAAE;QACd,OAAO,EAAE,CAAC;QACV,SAAS,EAAE;YACT,QAAQ,EAAE,EAAE;YACZ,IAAI,EAAE,SAAS;SAChB;KACF;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,CAAC;QACV,SAAS,EAAE;YACT,QAAQ,EAAE,EAAE;YACZ,IAAI,EAAE,SAAS;SAChB;KACF;CACF,CAAC","file":"config.js","sourcesContent":["export const DEFAULT_DATA_ZOOM_ATTRIBUTES = {\n  orient: 'bottom',\n  showDetail: 'auto',\n  brushSelect: true,\n  zoomLock: false,\n  minSpan: 0,\n  maxSpan: 1,\n  delayType: 'throttle',\n  delayTime: 0,\n  realTime: true,\n  backgroundStyle: {\n    fill: 'white',\n    stroke: '#D1DBEE',\n    lineWidth: 1,\n    cornerRadius: 2\n  },\n  dragMaskStyle: {\n    fill: '#B0C8F9',\n    fillOpacity: 0.2\n  },\n  backgroundChartStyle: {\n    area: {\n      visible: true,\n      stroke: '#D1DBEE',\n      lineWidth: 1,\n      fill: '#F6F8FC'\n    },\n    line: {\n      visible: true,\n      stroke: '#D1DBEE',\n      lineWidth: 1\n    }\n  },\n  selectedBackgroundStyle: {\n    fill: '#B0C8F9',\n    fillOpacity: 0.5\n  },\n  selectedBackgroundChartStyle: {\n    area: {\n      visible: true,\n      stroke: '#B0C8F9',\n      lineWidth: 1,\n      fill: '#fbb934'\n    },\n    line: {\n      visible: true,\n      stroke: '#fbb934',\n      lineWidth: 1\n    }\n  },\n  middleHandlerStyle: {\n    visible: true,\n    background: {\n      size: 8,\n      style: {\n        fill: 'white',\n        stroke: '#B0C8F9',\n        cornerRadius: 2\n      }\n    },\n    icon: {\n      size: 6,\n      fill: 'white',\n      stroke: '#B0C8F9',\n      symbolType:\n        // eslint-disable-next-line max-len\n        'M 0.3 -0.5 C 0.41 -0.5 0.5 -0.41 0.5 -0.3 C 0.5 -0.3 0.5 0.3 0.5 0.3 C 0.5 0.41 0.41 0.5 0.3 0.5 C 0.3 0.5 -0.3 0.5 -0.3 0.5 C -0.41 0.5 -0.5 0.41 -0.5 0.3 C -0.5 0.3 -0.5 -0.3 -0.5 -0.3 C -0.5 -0.41 -0.41 -0.5 -0.3 -0.5 C -0.3 -0.5 0.3 -0.5 0.3 -0.5 Z',\n      lineWidth: 0.5\n    }\n  },\n  startHandlerStyle: {\n    visible: true,\n    symbolType:\n      // eslint-disable-next-line max-len\n      'M -0.0544 0.25 C -0.0742 0.25 -0.0901 0.234 -0.0901 0.2143 L -0.0901 -0.1786 C -0.0901 -0.1983 -0.0742 -0.2143 -0.0544 -0.2143 L -0.0187 -0.2143 L -0.0187 -0.5 L 0.017 -0.5 L 0.017 -0.2143 L 0.0527 -0.2143 C 0.0724 -0.2143 0.0884 -0.1983 0.0884 -0.1786 L 0.0884 0.2143 C 0.0884 0.234 0.0724 0.25 0.0527 0.25 L 0.017 0.25 L 0.017 0.5 L -0.0187 0.5 L -0.0187 0.25 L -0.0544 0.25 Z M -0.0187 -0.1429 L -0.0544 -0.1429 L -0.0544 0.1786 L -0.0187 0.1786 L -0.0187 -0.1429 Z M 0.0527 -0.1429 L 0.017 -0.1429 L 0.017 0.1786 L 0.0527 0.1786 L 0.0527 -0.1429 Z',\n    // size: 40,\n    fill: 'white',\n    stroke: '#B0C8F9',\n    lineWidth: 0.5\n  },\n  endHandlerStyle: {\n    visible: true,\n    symbolType:\n      // eslint-disable-next-line max-len\n      'M -0.0544 0.25 C -0.0742 0.25 -0.0901 0.234 -0.0901 0.2143 L -0.0901 -0.1786 C -0.0901 -0.1983 -0.0742 -0.2143 -0.0544 -0.2143 L -0.0187 -0.2143 L -0.0187 -0.5 L 0.017 -0.5 L 0.017 -0.2143 L 0.0527 -0.2143 C 0.0724 -0.2143 0.0884 -0.1983 0.0884 -0.1786 L 0.0884 0.2143 C 0.0884 0.234 0.0724 0.25 0.0527 0.25 L 0.017 0.25 L 0.017 0.5 L -0.0187 0.5 L -0.0187 0.25 L -0.0544 0.25 Z M -0.0187 -0.1429 L -0.0544 -0.1429 L -0.0544 0.1786 L -0.0187 0.1786 L -0.0187 -0.1429 Z M 0.0527 -0.1429 L 0.017 -0.1429 L 0.017 0.1786 L 0.0527 0.1786 L 0.0527 -0.1429 Z',\n    // size: 40,\n    fill: 'white',\n    stroke: '#B0C8F9',\n    lineWidth: 0.5\n  },\n  startTextStyle: {\n    padding: 4,\n    textStyle: {\n      fontSize: 10,\n      fill: '#6F6F6F'\n    }\n  },\n  endTextStyle: {\n    padding: 4,\n    textStyle: {\n      fontSize: 10,\n      fill: '#6F6F6F'\n    }\n  }\n};\n"]}

package/es/data-zoom/data-zoom.d.ts

@@ -3,13 +3,21 @@ import type { IPointLike } from '@visactor/vutils';
 import { AbstractComponent } from '../core/base';
 import type { TagAttributes } from '../tag';
 import { Tag } from '../tag';
+import { DataZoomActiveTag } from './type';
 import type { DataZoomAttributes } from './type';
+import type { ComponentOptions } from '../interface';
 export declare class DataZoom extends AbstractComponent<Required<DataZoomAttributes>> {
     name: string;
     static defaultAttributes: {
         orient: string;
         showDetail: string;
         brushSelect: boolean;
+        zoomLock: boolean;
+        minSpan: number;
+        maxSpan: number;
+        delayType: string;
+        delayTime: number;
+        realTime: boolean;
         backgroundStyle: {
             fill: string;
             stroke: string;
@@ -119,7 +127,7 @@ export declare class DataZoom extends AbstractComponent<Required<DataZoomAttribu
     private _selectedPreviewGroup;
     private _selectedPreviewLine;
     private _selectedPreviewArea;
-    protected _activeTag: string;
+    protected _activeTag: DataZoomActiveTag;
     protected _activeItem: any;
     protected _activeState: boolean;
     protected _activeCache: {
@@ -135,16 +143,18 @@ export declare class DataZoom extends AbstractComponent<Required<DataZoomAttribu
         start: number;
         end: number;
     };
-    private _previewCallbackX;
-    private _previewCallbackY;
-    private _previewCallbackX1;
-    private _previewCallbackY1;
+    protected _spanCache: number;
+    private _previewPointsX;
+    private _previewPointsY;
+    private _previewPointsX1;
+    private _previewPointsY1;
     private _updateStateCallback;
     private _statePointToData;
     private _layoutAttrFromConfig;
-    constructor(attributes: DataZoomAttributes);
+    constructor(attributes: DataZoomAttributes, options?: ComponentOptions);
     protected bindEvents(): void;
     protected dragMaskSize(): number;
+    protected setStateAttr(start: number, end: number, shouldRender: boolean): void;
     protected eventPosToStagePos(e: FederatedPointerEvent): {
         x: number;
         y: number;
@@ -176,10 +186,10 @@ export declare class DataZoom extends AbstractComponent<Required<DataZoomAttribu
     getStartValue(): string | number;
     getEndTextValue(): string | number;
     getMiddleHandlerSize(): number;
-    setUpdateStateCallback(callback: (start: number, end: number) => void): void;
-    setPreviewCallbackX(callback: (d: any) => number): void;
-    setPreviewCallbackY(callback: (d: any) => number): void;
-    setPreviewCallbackX1(callback: (d: any) => number): void;
-    setPreviewCallbackY1(callback: (d: any) => number): void;
+    setUpdateStateCallback(callback: (start: number, end: number, trigger?: DataZoomActiveTag) => void): void;
+    setPreviewPointsX(callback: (d: any) => number): void;
+    setPreviewPointsY(callback: (d: any) => number): void;
+    setPreviewPointsX1(callback: (d: any) => number): void;
+    setPreviewPointsY1(callback: (d: any) => number): void;
     setStatePointToData(callback: (state: number) => any): void;
 }

package/es/data-zoom/data-zoom.js

@@ -10,18 +10,25 @@ var __rest = this && this.__rest || function(s, e) {
 
 import { vglobal, CustomEvent } from "@visactor/vrender-core";
 
-import { array, clamp, isFunction, isValid, merge } from "@visactor/vutils";
+import { array, clamp, debounce, isFunction, isValid, merge, throttle } from "@visactor/vutils";
 
 import { AbstractComponent } from "../core/base";
 
 import { Tag } from "../tag";
 
-import { DataZoomActiveTag, DEFAULT_DATA_ZOOM_ATTRIBUTES } from "./config";
+import { DEFAULT_DATA_ZOOM_ATTRIBUTES } from "./config";
+
+import { DataZoomActiveTag } from "./type";
+
+const delayMap = {
+    debounce: debounce,
+    throttle: throttle
+};
 
 export class DataZoom extends AbstractComponent {
-    constructor(attributes) {
-        super(merge({}, DataZoom.defaultAttributes, attributes)), this.name = "dataZoom", 
-        this._previewData = [], this._activeState = !1, this._activeCache = {
+    constructor(attributes, options) {
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge({}, DataZoom.defaultAttributes, attributes)), 
+        this.name = "dataZoom", this._previewData = [], this._activeState = !1, this._activeCache = {
             startPos: {
                 x: 0,
                 y: 0
@@ -38,36 +45,38 @@ export class DataZoom extends AbstractComponent {
             start: 0,
             end: 1
         }, this._statePointToData = state => state, this._onHandlerPointerDown = (e, tag) => {
-            "start" === tag ? (this._activeTag = DataZoomActiveTag.startHandler, this._activeItem = this._startHandler) : "end" === tag ? (this._activeTag = DataZoomActiveTag.endHandler, 
+            e.stopPropagation(), "start" === tag ? (this._activeTag = DataZoomActiveTag.startHandler, 
+            this._activeItem = this._startHandler) : "end" === tag ? (this._activeTag = DataZoomActiveTag.endHandler, 
             this._activeItem = this._endHandler) : "middleRect" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, 
             this._activeItem = this._middleHandlerRect) : "middleSymbol" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, 
             this._activeItem = this._middleHandlerSymbol) : "background" === tag && (this._activeTag = DataZoomActiveTag.background, 
             this._activeItem = this._background), this._activeState = !0, this._activeCache.startPos = this.eventPosToStagePos(e), 
             this._activeCache.lastPos = this.eventPosToStagePos(e);
         }, this._onHandlerPointerMove = e => {
-            const {start: start, end: end, brushSelect: brushSelect} = this.attribute, pos = this.eventPosToStagePos(e), {attPos: attPos, max: max} = this._layoutCache, dis = (pos[attPos] - this._activeCache.lastPos[attPos]) / max;
-            this._activeState && (this._activeTag === DataZoomActiveTag.middleHandler ? this.moveZoomWithMiddle((this.state.start + this.state.end) / 2 + dis) : this._activeTag === DataZoomActiveTag.startHandler ? this.state.start + dis > this.state.end ? (this.state.start = this.state.end, 
-            this.state.end = this.state.start + dis, this._activeTag = DataZoomActiveTag.endHandler) : this.state.start = this.state.start + dis : this._activeTag === DataZoomActiveTag.endHandler && (this.state.end + dis < this.state.start ? (this.state.end = this.state.start, 
-            this.state.start = this.state.end + dis, this._activeTag = DataZoomActiveTag.startHandler) : this.state.end = this.state.end + dis), 
-            this._activeCache.lastPos = pos, brushSelect && this.renderDragMask()), this.state.start = Math.min(Math.max(this.state.start, 0), 1), 
-            this.state.end = Math.min(Math.max(this.state.end, 0), 1), start === this.state.start && end === this.state.end || (this.setAttributes({
-                start: this.state.start,
-                end: this.state.end
-            }), this._updateStateCallback && this._updateStateCallback(this.state.start, this.state.end), 
-            this._dispatchChangeEvent(this.state.start, this.state.end));
+            var _a;
+            e.stopPropagation();
+            const {start: startAttr, end: endAttr, brushSelect: brushSelect, realTime: realTime = !0} = this.attribute, pos = this.eventPosToStagePos(e), {attPos: attPos, max: max} = this._layoutCache, dis = (pos[attPos] - this._activeCache.lastPos[attPos]) / max;
+            let {start: start, end: end} = this.state;
+            this._activeState && (this._activeTag === DataZoomActiveTag.middleHandler ? this.moveZoomWithMiddle((this.state.start + this.state.end) / 2 + dis) : this._activeTag === DataZoomActiveTag.startHandler ? start + dis > end ? (start = end, 
+            end = start + dis, this._activeTag = DataZoomActiveTag.endHandler) : start += dis : this._activeTag === DataZoomActiveTag.endHandler && (end + dis < start ? (end = start, 
+            start = end + dis, this._activeTag = DataZoomActiveTag.startHandler) : end += dis), 
+            this._activeCache.lastPos = pos, brushSelect && this.renderDragMask()), start = Math.min(Math.max(start, 0), 1), 
+            end = Math.min(Math.max(end, 0), 1), startAttr === start && endAttr === end || (this.setStateAttr(start, end, !0), 
+            realTime && (null === (_a = this._updateStateCallback) || void 0 === _a || _a.call(this, start, end, this._activeTag)), 
+            this._dispatchChangeEvent(start, end));
         };
-        const {start: start, end: end, size: size, orient: orient, showDetail: showDetail, position: position, previewData: previewData, previewCallbackX: previewCallbackX, previewCallbackY: previewCallbackY, previewCallbackX1: previewCallbackX1, previewCallbackY1: previewCallbackY1, updateStateCallback: updateStateCallback} = this.attribute, {width: width, height: height} = size;
-        start && (this.state.start = start), end && (this.state.end = end), this._isHorizontal = "top" === orient || "bottom" === orient, 
-        this._layoutCache.max = this._isHorizontal ? width : height, this._layoutCache.attPos = this._isHorizontal ? "x" : "y", 
-        this._layoutCache.attSize = this._isHorizontal ? "width" : "height", this._activeCache.startPos = position, 
-        this._activeCache.lastPos = position, this._showText = "auto" !== showDetail && showDetail, 
-        previewData && (this._previewData = previewData), isFunction(previewCallbackX) && (this._previewCallbackX = previewCallbackX), 
-        isFunction(previewCallbackY) && (this._previewCallbackY = previewCallbackY), isFunction(previewCallbackX1) && (this._previewCallbackX1 = previewCallbackX1), 
-        isFunction(previewCallbackY1) && (this._previewCallbackY1 = previewCallbackY1), 
-        isFunction(updateStateCallback) && (this._updateStateCallback = updateStateCallback);
+        const {start: start, end: end, size: size, orient: orient, showDetail: showDetail, position: position, previewData: previewData, previewPointsX: previewPointsX, previewPointsY: previewPointsY, previewPointsX1: previewPointsX1, previewPointsY1: previewPointsY1, updateStateCallback: updateStateCallback} = this.attribute, {width: width, height: height} = size;
+        start && (this.state.start = start), end && (this.state.end = end), this._spanCache = this.state.end - this.state.start, 
+        this._isHorizontal = "top" === orient || "bottom" === orient, this._layoutCache.max = this._isHorizontal ? width : height, 
+        this._layoutCache.attPos = this._isHorizontal ? "x" : "y", this._layoutCache.attSize = this._isHorizontal ? "width" : "height", 
+        this._activeCache.startPos = position, this._activeCache.lastPos = position, this._showText = "auto" !== showDetail && showDetail, 
+        previewData && (this._previewData = previewData), isFunction(previewPointsX) && (this._previewPointsX = previewPointsX), 
+        isFunction(previewPointsY) && (this._previewPointsY = previewPointsY), isFunction(previewPointsX1) && (this._previewPointsX1 = previewPointsX1), 
+        isFunction(previewPointsY1) && (this._previewPointsY1 = previewPointsY1), isFunction(updateStateCallback) && (this._updateStateCallback = updateStateCallback);
     }
     bindEvents() {
-        const {showDetail: showDetail, brushSelect: brushSelect} = this.attribute;
+        if (this.attribute.disableTriggerEvent) return;
+        const {showDetail: showDetail, brushSelect: brushSelect, delayType: delayType = "throttle", delayTime: delayTime = 0} = this.attribute;
         this._startHandler && this._startHandler.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, "start"))), 
         this._endHandler && this._endHandler.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, "end"))), 
         this._middleHandlerSymbol && this._middleHandlerSymbol.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, "middleSymbol"))), 
@@ -77,9 +86,12 @@ export class DataZoom extends AbstractComponent {
         brushSelect && this._background && this._background.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, "background"))), 
         brushSelect && this._previewGroup && this._previewGroup.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, "background"))), 
         this._selectedPreviewGroup && this._selectedPreviewGroup.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, selectedTag))), 
-        "browser" === vglobal.env && (vglobal.addEventListener("pointermove", this._onHandlerPointerMove.bind(this)), 
-        vglobal.addEventListener("pointerup", this._onHandlerPointerUp.bind(this))), this.addEventListener("pointermove", this._onHandlerPointerMove), 
-        this.addEventListener("pointerup", this._onHandlerPointerUp), this.addEventListener("pointerupoutside", this._onHandlerPointerUp), 
+        "browser" === vglobal.env && (vglobal.addEventListener("pointermove", delayMap[delayType](this._onHandlerPointerMove.bind(this), delayTime), {
+            capture: !0
+        }), vglobal.addEventListener("pointerup", this._onHandlerPointerUp.bind(this))), 
+        this.addEventListener("pointermove", delayMap[delayType](this._onHandlerPointerMove, delayTime), {
+            capture: !0
+        }), this.addEventListener("pointerup", this._onHandlerPointerUp), this.addEventListener("pointerupoutside", this._onHandlerPointerUp), 
         "auto" === showDetail && (this.addEventListener("pointerenter", this._onHandlerPointerEnter), 
         this.addEventListener("pointerleave", this._onHandlerPointerLeave));
     }
@@ -87,6 +99,14 @@ export class DataZoom extends AbstractComponent {
         const {position: position} = this.attribute, {attPos: attPos, max: max} = this._layoutCache;
         return this._activeCache.lastPos[attPos] - position[attPos] > max ? max + position[attPos] - this._activeCache.startPos[attPos] : this._activeCache.lastPos[attPos] - position[attPos] < 0 ? position[attPos] - this._activeCache.startPos[attPos] : this._activeCache.lastPos[attPos] - this._activeCache.startPos[attPos];
     }
+    setStateAttr(start, end, shouldRender) {
+        const {zoomLock: zoomLock = !1, minSpan: minSpan = 0, maxSpan: maxSpan = 1} = this.attribute, span = end - start;
+        span !== this._spanCache && (zoomLock || span < minSpan || span > maxSpan) || (this._spanCache = span, 
+        this.state.start = start, this.state.end = end, shouldRender && this.setAttributes({
+            start: start,
+            end: end
+        }));
+    }
     eventPosToStagePos(e) {
         var _a, _b, _c;
         const stagePosition = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.window.getBoundingClientRect();
@@ -96,32 +116,31 @@ export class DataZoom extends AbstractComponent {
         };
     }
     _onHandlerPointerUp(e) {
-        const {start: start, end: end, brushSelect: brushSelect} = this.attribute;
+        var _a;
+        e.preventDefault();
+        const {start: start, end: end, brushSelect: brushSelect, realTime: realTime = !0} = this.attribute;
         if (this._activeState && this._activeTag === DataZoomActiveTag.background) {
             const pos = this.eventPosToStagePos(e);
             this.backgroundDragZoom(this._activeCache.startPos, pos);
         }
-        this._activeState = !1, brushSelect && this.renderDragMask(), start === this.state.start && end === this.state.end || (this.setAttributes({
-            start: this.state.start,
-            end: this.state.end
-        }), this._updateStateCallback && this._updateStateCallback(this.state.start, this.state.end), 
+        this._activeState = !1, brushSelect && this.renderDragMask(), realTime && start === this.state.start && end === this.state.end || (this.setStateAttr(this.state.start, this.state.end, !0), 
+        null === (_a = this._updateStateCallback) || void 0 === _a || _a.call(this, this.state.start, this.state.end, this._activeTag), 
         this._dispatchChangeEvent(this.state.start, this.state.end));
     }
     _onHandlerPointerEnter(e) {
-        this._showText = !0, this.renderText();
+        e.stopPropagation(), this._showText = !0, this.renderText();
     }
     _onHandlerPointerLeave(e) {
-        this._showText = !1, this.renderText();
+        e.stopPropagation(), this._showText = !1, this.renderText();
     }
     backgroundDragZoom(startPos, endPos) {
         const {attPos: attPos, max: max} = this._layoutCache, {position: position} = this.attribute, startPosInComponent = startPos[attPos] - position[attPos], endPosInComponent = endPos[attPos] - position[attPos], start = Math.min(Math.max(Math.min(startPosInComponent, endPosInComponent) / max, 0), 1), end = Math.min(Math.max(Math.max(startPosInComponent, endPosInComponent) / max, 0), 1);
-        Math.abs(start - end) < .01 ? this.moveZoomWithMiddle(start) : (this.state.start = start, 
-        this.state.end = end);
+        Math.abs(start - end) < .01 ? this.moveZoomWithMiddle(start) : this.setStateAttr(start, end, !1);
     }
     moveZoomWithMiddle(middle) {
         let offset = middle - (this.state.start + this.state.end) / 2;
         0 !== offset && (offset > 0 ? this.state.end + offset > 1 && (offset = 1 - this.state.end) : offset < 0 && this.state.start + offset < 0 && (offset = -this.state.start), 
-        this.state.start = this.state.start + offset, this.state.end = this.state.end + offset);
+        this.setStateAttr(this.state.start + offset, this.state.end + offset, !1));
     }
     renderDragMask() {
         const {dragMaskStyle: dragMaskStyle} = this.attribute, {position: position, width: width, height: height} = this.getLayoutAttrFromConfig();
@@ -240,7 +259,7 @@ export class DataZoom extends AbstractComponent {
             cursor: brushSelect ? "crosshair" : "move"
         }, selectedBackgroundStyle), "rect"), (null === (_c = null == selectedBackgroundChartStyle ? void 0 : selectedBackgroundChartStyle.line) || void 0 === _c ? void 0 : _c.visible) && this.setSelectedPreviewAttributes("line", group), 
         (null === (_d = null == selectedBackgroundChartStyle ? void 0 : selectedBackgroundChartStyle.area) || void 0 === _d ? void 0 : _d.visible) && this.setSelectedPreviewAttributes("area", group), 
-        this.renderText(), this._isHorizontal ? (this._startHandler = group.createOrUpdateChild("startHandler", Object.assign({
+        this._showText && this.renderText(), this._isHorizontal ? (this._startHandler = group.createOrUpdateChild("startHandler", Object.assign({
             x: position.x + start * width,
             y: position.y + height / 2,
             size: height,
@@ -334,8 +353,8 @@ export class DataZoom extends AbstractComponent {
     }
     getPreviewLinePoints() {
         const previewPoints = this._previewData.map((d => ({
-            x: this._previewCallbackX && this._previewCallbackX(d),
-            y: this._previewCallbackY && this._previewCallbackY(d)
+            x: this._previewPointsX && this._previewPointsX(d),
+            y: this._previewPointsY && this._previewPointsY(d)
         })));
         if (0 === previewPoints.length) return previewPoints;
         const {basePointStart: basePointStart, basePointEnd: basePointEnd} = this.computeBasePoints();
@@ -343,10 +362,10 @@ export class DataZoom extends AbstractComponent {
     }
     getPreviewAreaPoints() {
         const previewPoints = this._previewData.map((d => ({
-            x: this._previewCallbackX && this._previewCallbackX(d),
-            y: this._previewCallbackY && this._previewCallbackY(d),
-            x1: this._previewCallbackX1 && this._previewCallbackX1(d),
-            y1: this._previewCallbackY1 && this._previewCallbackY1(d)
+            x: this._previewPointsX && this._previewPointsX(d),
+            y: this._previewPointsY && this._previewPointsY(d),
+            x1: this._previewPointsX1 && this._previewPointsX1(d),
+            y1: this._previewPointsY1 && this._previewPointsY1(d)
         })));
         if (0 === previewPoints.length) return previewPoints;
         const {basePointStart: basePointStart, basePointEnd: basePointEnd} = this.computeBasePoints();
@@ -416,12 +435,12 @@ export class DataZoom extends AbstractComponent {
         this.dispatchEvent(changeEvent);
     }
     setStartAndEnd(start, end) {
+        var _a;
         const {start: startAttr, end: endAttr} = this.attribute;
         isValid(start) && isValid(end) && (start !== this.state.start || end !== this.state.end) && (this.state.start = start, 
-        this.state.end = end, startAttr === this.state.start && endAttr === this.state.end || (this.setAttributes({
-            start: start,
-            end: end
-        }), this._updateStateCallback && this._updateStateCallback(start, end), this._dispatchChangeEvent(start, end)));
+        this.state.end = end, startAttr === this.state.start && endAttr === this.state.end || (this.setStateAttr(start, end, !0), 
+        null === (_a = this._updateStateCallback) || void 0 === _a || _a.call(this, start, end, this._activeTag), 
+        this._dispatchChangeEvent(start, end)));
     }
     setPreviewData(data) {
         this._previewData = data;
@@ -443,17 +462,17 @@ export class DataZoom extends AbstractComponent {
     setUpdateStateCallback(callback) {
         isFunction(callback) && (this._updateStateCallback = callback);
     }
-    setPreviewCallbackX(callback) {
-        isFunction(callback) && (this._previewCallbackX = callback);
+    setPreviewPointsX(callback) {
+        isFunction(callback) && (this._previewPointsX = callback);
     }
-    setPreviewCallbackY(callback) {
-        isFunction(callback) && (this._previewCallbackY = callback);
+    setPreviewPointsY(callback) {
+        isFunction(callback) && (this._previewPointsY = callback);
     }
-    setPreviewCallbackX1(callback) {
-        isFunction(callback) && (this._previewCallbackX1 = callback);
+    setPreviewPointsX1(callback) {
+        isFunction(callback) && (this._previewPointsX1 = callback);
     }
-    setPreviewCallbackY1(callback) {
-        isFunction(callback) && (this._previewCallbackY1 = callback);
+    setPreviewPointsY1(callback) {
+        isFunction(callback) && (this._previewPointsY1 = callback);
     }
     setStatePointToData(callback) {
         isFunction(callback) && (this._statePointToData = callback);