@visactor/vchart 1.5.1-alpha.5 → 1.5.1

package/build/index.js

@@ -6200,7 +6200,7 @@
     class DataSet {
       constructor(options) {
         let name;
-        this.options = options, this.isDataSet = !0, this.transformMap = {}, this.parserMap = {}, this.dataViewMap = {}, this.target = new EventEmitter(), this._callMap = new Map(), name = (null == options ? void 0 : options.name) ? options.name : getUUID("dataset"), this.name = name;
+        this.options = options, this.isDataSet = !0, this.transformMap = {}, this.parserMap = {}, this.dataViewMap = {}, this.target = new EventEmitter(), name = (null == options ? void 0 : options.name) ? options.name : getUUID("dataset"), this.name = name;
       }
       getDataView(name) {
         return this.dataViewMap[name];
@@ -6231,6 +6231,7 @@
         return this.transformMap[name];
       }
       multipleDataViewAddListener(list, event, call) {
+        this._callMap || (this._callMap = new Map());
         let callAd = this._callMap.get(call);
         callAd || (callAd = () => {
           list.some(l => l.isRunning) || call();
@@ -6242,10 +6243,12 @@
         this.multipleDataViewAddListener(Object.values(this.dataViewMap), event, call);
       }
       multipleDataViewRemoveListener(list, event, call) {
-        const callAd = this._callMap.get(call);
-        callAd && list.forEach(l => {
-          l.target.removeListener(event, callAd);
-        }), this._callMap.delete(call);
+        if (this._callMap) {
+          const callAd = this._callMap.get(call);
+          callAd && list.forEach(l => {
+            l.target.removeListener(event, callAd);
+          }), this._callMap.delete(call);
+        }
       }
       multipleDataViewUpdateInParse(newData) {
         newData.forEach(d => {
@@ -6275,19 +6278,20 @@
       constructor(dataSet, options) {
         var _this = this;
         let name;
-        this.dataSet = dataSet, this.options = options, this.isDataView = !0, this.target = new EventEmitter(), this.parseOption = null, this.transformsArr = [], this.isRunning = !1, this.rawData = {}, this.history = !1, this.historyData = [], this.parserData = {}, this.latestData = {}, this._fields = null, this._diffData = !1, this._diffKeys = null, this._diffMap = new Map(), this._diffRank = 0, this.reRunAllTransform = function () {
+        this.dataSet = dataSet, this.options = options, this.isDataView = !0, this.target = new EventEmitter(), this.parseOption = null, this.transformsArr = [], this.isRunning = !1, this.rawData = {}, this.history = !1, this.parserData = {}, this.latestData = {}, this._fields = null, this.reRunAllTransform = function () {
           let opt = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
             pushHistory: !0,
             emitMessage: !0
           };
           return _this.isRunning = !0, _this.resetTransformData(), _this.transformsArr.forEach(t => {
-            _this.executeTransform(t, Object.assign(Object.assign({}, opt), {
+            _this.executeTransform(t, {
+              pushHistory: opt.pushHistory,
               emitMessage: !1
-            })), _this.isLastTransform(t) && _this.diffLastData();
-          }), _this.isRunning = !1, !1 !== (null == opt ? void 0 : opt.emitMessage) && _this.target.emit("change", []), _this;
+            }), _this.isLastTransform(t) && _this.diffLastData();
+          }), _this.isRunning = !1, !1 !== opt.emitMessage && _this.target.emit("change", []), _this;
         }, this.markRunning = () => {
           this.isRunning = !0, this.target.emit("markRunning", []);
-        }, name = (null == options ? void 0 : options.name) ? options.name : getUUID("dataview"), this.name = name, (null == options ? void 0 : options.history) && (this.history = options.history), this.dataSet.setDataView(name, this), this.setFields(null == options ? void 0 : options.fields);
+        }, name = (null == options ? void 0 : options.name) ? options.name : getUUID("dataview"), this.name = name, (null == options ? void 0 : options.history) && (this.history = options.history, this.historyData = []), this.dataSet.setDataView(name, this), this.setFields(null == options ? void 0 : options.fields);
       }
       parse(data, options) {
         let emit = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !1;
@@ -6295,7 +6299,6 @@
         this.isRunning = !0, emit && this.target.emit("beforeParse", []), options && (this.parseOption = options);
         const cloneData = this.cloneParseData(data, options);
         if (null == options ? void 0 : options.type) {
-          options = cloneDeep(options);
           const parserData = (null !== (_a = this.dataSet.getParser(options.type)) && void 0 !== _a ? _a : this.dataSet.getParser("bytejson"))(cloneData, options.options, this);
           this.rawData = cloneData, this.parserData = parserData, this.history && this.historyData.push(cloneData, parserData), this.latestData = parserData;
         } else this.parserData = cloneData, this.rawData = cloneData, this.history && this.historyData.push(cloneData), this.latestData = cloneData;
@@ -6312,7 +6315,7 @@
           }
           if (pushOption && this.transformsArr.push(options), execute) {
             const lastTag = this.isLastTransform(options);
-            options = cloneDeep(options), this.executeTransform(options), lastTag && this.diffLastData();
+            this.executeTransform(options), lastTag && this.diffLastData();
           }
         }
         return this.sortTransform(), this.isRunning = !1, this;
@@ -6321,7 +6324,7 @@
         return this.transformsArr[this.transformsArr.length - 1] === options;
       }
       sortTransform() {
-        this.transformsArr.sort((a, b) => {
+        this.transformsArr.length >= 2 && this.transformsArr.sort((a, b) => {
           var _a, _b;
           return (null !== (_a = a.level) && void 0 !== _a ? _a : 0) - (null !== (_b = b.level) && void 0 !== _b ? _b : 0);
         });
@@ -6342,10 +6345,10 @@
         this.latestData = this.parserData, this.history && (this.historyData.length = 0, this.historyData.push(this.rawData, this.parserData));
       }
       enableDiff(keys) {
-        this._diffData = !0, this._diffKeys = keys;
+        this._diffData = !0, this._diffKeys = keys, this._diffMap = new Map(), this._diffRank = 0;
       }
       disableDiff() {
-        this._diffData = !1, this.resetDiff();
+        this._diffData = !1, this._diffMap = null, this._diffRank = null;
       }
       resetDiff() {
         this._diffMap = new Map(), this._diffRank = 0;
@@ -6403,7 +6406,7 @@
         }, !1)) : fieldsOption && (fieldsOption.options.fields = this._fields);
       }
       destroy() {
-        this.dataSet.removeDataView(this.name), this.resetDiff(), this.latestData = null, this.rawData = null, this.parserData = null, this.transformsArr = null, this.target = null;
+        this.dataSet.removeDataView(this.name), this._diffMap = null, this._diffRank = null, this.latestData = null, this.rawData = null, this.parserData = null, this.transformsArr = null, this.target = null;
       }
     }
 
@@ -14192,6 +14195,11 @@
           a.onEnd();
         });
       }
+      onStart() {
+        this.customAnimates.forEach(a => {
+          a.onStart();
+        });
+      }
       onUpdate(end, ratio, out) {
         this.updating || (this.updating = !0, this.customAnimates.forEach(a => {
           const easing = a.easing,
@@ -16560,12 +16568,13 @@
           main: !1
         };
         this.tryInit();
-        const layerMode = this.getRecommendedLayerType(options.layerMode),
-          layerHandler = this.getLayerHandler(layerMode),
+        let layerMode = this.getRecommendedLayerType(options.layerMode);
+        layerMode = options.canvasId ? "static" : layerMode;
+        const layerHandler = this.getLayerHandler(layerMode),
           layer = new Layer(stage, this.global, stage.window, Object.assign(Object.assign({
             main: !1
           }, options), {
-            layerMode: options.canvasId ? "static" : layerMode,
+            layerMode: layerMode,
             canvasId: options.canvasId,
             layerHandler: layerHandler
           })),
@@ -25472,7 +25481,8 @@
       createLayer(canvasId, layerMode) {
         const layer = this.layerService.createLayer(this, {
           main: !1,
-          layerMode: layerMode
+          layerMode: layerMode,
+          canvasId: canvasId
         });
         return this.appendChild(layer), layer;
       }
@@ -26136,7 +26146,11 @@
         return result;
       }
       containsPoint(graphic, point, params) {
-        return !!this.pickItem(graphic, point, null, params);
+        var _a;
+        return !!(null === (_a = this.pickItem(graphic, point, null, null != params ? params : {
+          pickContext: this.pickContext,
+          pickerService: this
+        })) || void 0 === _a ? void 0 : _a.graphic);
       }
       pickGroup(group, point, parentMatrix, params) {
         let result = {
@@ -26241,7 +26255,7 @@
     function intersect$1(a, b, sep) {
       return sep > Math.max(b.x1 - a.x2, a.x1 - b.x2, b.y1 - a.y2, a.y1 - b.y2);
     }
-    function hasOverlap$1(items, pad) {
+    function hasOverlap$2(items, pad) {
       for (let b, i = 1, n = items.length, a = items[0]; i < n; a = b, ++i) if (b = items[i], intersect$1(a.AABBBounds, b.AABBBounds, pad)) return !0;
       return !1;
     }
@@ -26357,7 +26371,7 @@
           AABBBounds: bounds,
           value: scaleTicks[i]
         }));
-        for (; items.length >= 3 && hasOverlap$1(items, labelGap);) items = methods$2.parity(items);
+        for (; items.length >= 3 && hasOverlap$2(items, labelGap);) items = methods$2.parity(items);
         const ticks = items.map(item => item.value);
         ticks.length < 3 && labelFlush && (ticks.length > 1 && ticks.pop(), last(ticks) !== last(scaleTicks) && ticks.push(last(scaleTicks))), scaleTicks = ticks;
       }
@@ -26836,7 +26850,7 @@
         return dataScheme;
     }
     function queryColorFromColorScheme(colorScheme, colorKey, seriesType) {
-        var _a;
+        var _a, _b;
         const scheme = !isValid$1(seriesType) ? colorScheme.default : (_a = colorScheme[seriesType]) !== null && _a !== void 0 ? _a : colorScheme.default;
         if (!scheme) {
             return undefined;
@@ -26844,15 +26858,7 @@
         let color;
         const { palette } = scheme;
         if (isObject$2(palette)) {
-            for (const key of array(colorKey.key)) {
-                color = palette[key];
-                if (isValid$1(color)) {
-                    break;
-                }
-            }
-            if (!color) {
-                color = colorKey.default;
-            }
+            color = (_b = palette[colorKey.key]) !== null && _b !== void 0 ? _b : colorKey.default;
         }
         if (!color) {
             return undefined;
@@ -27196,15 +27202,15 @@
                 disableFontColor: '#bcc1cb',
                 labelReverseFontColor: '#ffffff',
                 axisGridColor: '#f1f2f5',
-                axisDomainColor: '#D9DDE4',
-                axisLabelFontColor: '#89909d',
-                dataZoomHandlerStrokeColor: '#AEB5BE',
+                axisDomainColor: '#d9dde4',
+                dataZoomHandlerStrokeColor: '#aeb5be',
                 dataZoomHandlerFillColor: '#ffffff',
                 dataZoomBackgroundColor: '#f1f3f4',
                 dataZoomChartColor: '#c9ced8',
                 dataZoomSelectedColor: '#0040ff',
                 scrollBarSliderColor: '#000000',
                 tooltipBackgroundColor: '#ffffff',
+                markLabelBackgroundColor: '#ffc528',
                 titleFontColor: '#21252c',
                 labelFontColor: '#89909d'
             }
@@ -27217,7 +27223,7 @@
             offset: 5,
             position: 'top',
             style: {
-                stroke: 'white',
+                stroke: { type: 'palette', key: 'backgroundColor' },
                 lineWidth: 2
             }
         },
@@ -27235,7 +27241,7 @@
             offset: 5,
             style: {
                 lineWidth: 2,
-                stroke: 'white'
+                stroke: { type: 'palette', key: 'backgroundColor' }
             }
         }
     };
@@ -27328,7 +27334,7 @@
     const funnel$1 = {
         transform: {
             style: {
-                fill: '#f5f5f5'
+                fill: { type: 'palette', key: 'axisGridColor' }
             }
         },
         label: {
@@ -27342,7 +27348,7 @@
             style: {
                 fontSize: THEME_CONSTANTS.l4FontSize,
                 lineHeight: THEME_CONSTANTS.l4LineHeight,
-                fill: '#707070'
+                fill: { type: 'palette', key: 'secondaryFontColor' }
             },
             line: {
                 style: {
@@ -27354,7 +27360,7 @@
             style: {
                 fontSize: THEME_CONSTANTS.l4FontSize,
                 lineHeight: THEME_CONSTANTS.l4LineHeight,
-                fill: '#707070',
+                fill: { type: 'palette', key: 'secondaryFontColor' },
                 textBaseline: 'middle'
             }
         }
@@ -27448,7 +27454,7 @@
             offset: 5,
             style: {
                 lineWidth: 2,
-                stroke: 'white'
+                stroke: { type: 'palette', key: 'backgroundColor' }
             }
         },
         point: {
@@ -27498,7 +27504,7 @@
                 lineHeight: THEME_CONSTANTS.l6LineHeight,
                 textBaseline: 'middle',
                 fill: { type: 'palette', key: 'secondaryFontColor', default: '#89909d' },
-                stroke: 'white'
+                stroke: { type: 'palette', key: 'backgroundColor' }
             }
         }
     };
@@ -27515,9 +27521,14 @@
             position: 'outside',
             style: {
                 fontWeight: 'normal',
-                stroke: 'white',
+                stroke: { type: 'palette', key: 'backgroundColor' },
                 fillOpacity: 1
             }
+        },
+        innerLabel: {
+            style: {
+                lineWidth: 2
+            }
         }
     };
 
@@ -27541,7 +27552,7 @@
             offset: 5,
             style: {
                 lineWidth: 2,
-                stroke: 'white'
+                stroke: { type: 'palette', key: 'backgroundColor' }
             }
         },
         point: {
@@ -27566,7 +27577,7 @@
             position: 'top',
             style: {
                 lineWidth: 2,
-                stroke: 'white'
+                stroke: { type: 'palette', key: 'backgroundColor' }
             }
         }
     };
@@ -27643,7 +27654,7 @@
             padding: THEME_CONSTANTS.l5FontSize * 2,
             style: {
                 fill: 'black',
-                stroke: 'white',
+                stroke: { type: 'palette', key: 'backgroundColor' },
                 lineWidth: 2,
                 fontSize: THEME_CONSTANTS.l5FontSize,
                 lineHeight: THEME_CONSTANTS.l5LineHeight,
@@ -28695,6 +28706,10 @@
       }
     }
 
+    const delayMap$3 = {
+      debounce: debounce,
+      throttle: throttle
+    };
     let ScrollBar$1 = class ScrollBar extends AbstractComponent {
       constructor(attributes) {
         super(merge$1({}, ScrollBar.defaultAttributes, attributes)), this.name = "scrollbar", this._onRailPointerDown = e => {
@@ -28729,29 +28744,44 @@
           } = this.attribute;
           this._prePos = "horizontal" === direction ? e.clientX : e.clientY, "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onSliderPointerMove, {
             capture: !0
-          }), vglobal.addEventListener("pointerup", this._onSliderPointerUp)) : (this._slider.addEventListener("pointermove", this._onSliderPointerMove, {
+          }), vglobal.addEventListener("pointerup", this._onSliderPointerUp)) : (this.stage.addEventListener("pointermove", this._onSliderPointerMove, {
             capture: !0
-          }), this._slider.addEventListener("pointerup", this._onSliderPointerUp), this._slider.addEventListener("pointerupoutside", this._onSliderPointerUp));
-        }, this._onSliderPointerMove = e => {
-          e.stopPropagation();
+          }), this.stage.addEventListener("pointerup", this._onSliderPointerUp), this.stage.addEventListener("pointerupoutside", this._onSliderPointerUp));
+        }, this._computeScrollValue = e => {
           const {
             direction: direction
           } = this.attribute;
           let currentScrollValue,
             currentPos,
             delta = 0;
+          const {
+            width: width,
+            height: height
+          } = this._getSliderRenderBounds();
+          return "vertical" === direction ? (currentPos = e.clientY, delta = currentPos - this._prePos, currentScrollValue = delta / height) : (currentPos = e.clientX, delta = currentPos - this._prePos, currentScrollValue = delta / width), [currentPos, currentScrollValue];
+        }, this._onSliderPointerMove = delayMap$3[this.attribute.delayType](e => {
+          e.stopPropagation();
           const preScrollRange = this.getScrollRange(),
-            {
-              width: width,
-              height: height
-            } = this._getSliderRenderBounds();
-          "vertical" === direction ? (currentPos = e.clientY, delta = currentPos - this._prePos, currentScrollValue = delta / height) : (currentPos = e.clientX, delta = currentPos - this._prePos, currentScrollValue = delta / width), this.setScrollRange([preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue], !0), this._prePos = currentPos;
-        }, this._onSliderPointerUp = e => {
-          e.preventDefault(), "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onSliderPointerMove, {
+            [currentPos, currentScrollValue] = this._computeScrollValue(e);
+          this.setScrollRange([preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue], !0), this._prePos = currentPos;
+        }, this.attribute.delayTime), this._onSliderPointerUp = e => {
+          e.preventDefault();
+          const {
+              realTime = !0,
+              range: preRange,
+              limitRange = [0, 1]
+            } = this.attribute,
+            preScrollRange = this.getScrollRange(),
+            [currentPos, currentScrollValue] = this._computeScrollValue(e),
+            range = [preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue];
+          realTime || this._onChange({
+            pre: preRange,
+            value: clampRange$1(range, limitRange[0], limitRange[1])
+          }), "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onSliderPointerMove, {
             capture: !0
-          }), vglobal.removeEventListener("pointerup", this._onSliderPointerUp)) : (this._slider.removeEventListener("pointermove", this._onSliderPointerMove, {
+          }), vglobal.removeEventListener("pointerup", this._onSliderPointerUp)) : (this.stage.removeEventListener("pointermove", this._onSliderPointerMove, {
             capture: !0
-          }), this._slider.removeEventListener("pointerup", this._onSliderPointerUp), this._slider.removeEventListener("pointerupoutside", this._onSliderPointerUp));
+          }), this.stage.removeEventListener("pointerup", this._onSliderPointerUp), this.stage.removeEventListener("pointerupoutside", this._onSliderPointerUp));
         };
       }
       setScrollRange(range) {
@@ -28760,14 +28790,15 @@
         const {
             direction = "horizontal",
             limitRange = [0, 1],
-            range: preRange
+            range: preRange,
+            realTime = !0
           } = this.attribute,
           currScrollRange = clampRange$1(range, limitRange[0], limitRange[1]);
         if (render) {
           const sliderPos = this._getSliderPos(currScrollRange);
           this._slider && ("horizontal" === direction ? this._slider.setAttribute("x", sliderPos[0], !0) : this._slider.setAttribute("y", sliderPos[0], !0), (null === (_a = this.stage) || void 0 === _a ? void 0 : _a.autoRender) || null === (_b = this.stage) || void 0 === _b || _b.renderNextFrame());
         }
-        this.attribute.range = currScrollRange, this._onChange({
+        this.attribute.range = currScrollRange, realTime && this._onChange({
           pre: preRange,
           value: currScrollRange
         });
@@ -28776,7 +28807,12 @@
         return this.attribute.range;
       }
       bindEvents() {
-        this.attribute.disableTriggerEvent || (this._rail && this._rail.addEventListener("pointerdown", this._onRailPointerDown), this._slider && this._slider.addEventListener("pointerdown", this._onSliderPointerDown));
+        if (this.attribute.disableTriggerEvent) return;
+        const {
+          delayType = "throttle",
+          delayTime = 0
+        } = this.attribute;
+        this._rail && this._rail.addEventListener("pointerdown", delayMap$3[delayType](this._onRailPointerDown, delayTime)), this._slider && this._slider.addEventListener("pointerdown", this._onSliderPointerDown);
       }
       render() {
         this._reset();
@@ -28906,7 +28942,10 @@
         fill: "rgba(0, 0, 0, .0)"
       },
       padding: 2,
-      scrollRange: [0, 1]
+      scrollRange: [0, 1],
+      delayType: "throttle",
+      delayTime: 0,
+      realTime: !0
     };
 
     function traverseGroup(group, cb) {
@@ -30015,6 +30054,178 @@
       easing: "linear"
     };
 
+    function polarToCartesian(point) {
+      return point.radius ? {
+        x: Math.cos(point.angle) * point.radius,
+        y: Math.sin(point.angle) * point.radius
+      } : {
+        x: 0,
+        y: 0
+      };
+    }
+    function circlePoint(x0, y0, radius, radian) {
+      const offset = polarToCartesian({
+        radius: radius,
+        angle: radian
+      });
+      return {
+        x: x0 + offset.x,
+        y: y0 + offset.y
+      };
+    }
+    function computeQuadrant(angle) {
+      return (angle = normalizeAngle(angle)) > 0 && angle <= Math.PI / 2 ? 2 : angle > Math.PI / 2 && angle <= Math.PI ? 3 : angle > Math.PI && angle <= 3 * Math.PI / 2 ? 4 : 1;
+    }
+    function normalizeAngle(angle) {
+      for (; angle < 0;) angle += 2 * Math.PI;
+      for (; angle >= 2 * Math.PI;) angle -= 2 * Math.PI;
+      return angle;
+    }
+    function isQuadrantLeft(quadrant) {
+      return 3 === quadrant || 4 === quadrant;
+    }
+    function isQuadrantRight(quadrant) {
+      return 1 === quadrant || 2 === quadrant;
+    }
+    function lineCirclePoints(a, b, c, x0, y0, r) {
+      if (0 === a && 0 === b || r <= 0) return [];
+      if (0 === a) {
+        const y1 = -c / b,
+          fd = r ** 2 - (y1 - y0) ** 2;
+        if (fd < 0) return [];
+        if (0 === fd) return [{
+          x: x0,
+          y: y1
+        }];
+        return [{
+          x: Math.sqrt(fd) + x0,
+          y: y1
+        }, {
+          x: -Math.sqrt(fd) + x0,
+          y: y1
+        }];
+      }
+      if (0 === b) {
+        const x1 = -c / a,
+          fd = r ** 2 - (x1 - x0) ** 2;
+        if (fd < 0) return [];
+        if (0 === fd) return [{
+          x: x1,
+          y: y0
+        }];
+        return [{
+          x: x1,
+          y: Math.sqrt(fd) + y0
+        }, {
+          x: x1,
+          y: -Math.sqrt(fd) + y0
+        }];
+      }
+      const fa = (b / a) ** 2 + 1,
+        fb = 2 * ((c / a + x0) * (b / a) - y0),
+        fd = fb ** 2 - 4 * fa * ((c / a + x0) ** 2 + y0 ** 2 - r ** 2);
+      if (fd < 0) return [];
+      const y1 = (-fb + Math.sqrt(fd)) / (2 * fa),
+        y2 = (-fb - Math.sqrt(fd)) / (2 * fa),
+        x1 = -(b * y1 + c) / a;
+      return 0 === fd ? [{
+        x: x1,
+        y: y1
+      }] : [{
+        x: x1,
+        y: y1
+      }, {
+        x: -(b * y2 + c) / a,
+        y: y2
+      }];
+    }
+    function connectLineRadian(radius, length) {
+      return length > 2 * radius ? NaN : 2 * Math.asin(length / 2 / radius);
+    }
+    function checkBoundsOverlap(boundsA, boundsB) {
+      const {
+          x1: ax1,
+          y1: ay1,
+          x2: ax2,
+          y2: ay2
+        } = boundsA,
+        {
+          x1: bx1,
+          y1: by1,
+          x2: bx2,
+          y2: by2
+        } = boundsB;
+      return !(ax1 <= bx1 && ax2 <= bx1 || ax1 >= bx2 && ax2 >= bx2 || ay1 <= by1 && ay2 <= by1 || ay1 >= by2 && ay2 >= by2);
+    }
+    const labelingPoint = function (textBounds, graphicBounds) {
+      let position = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "top";
+      let offset = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+      if (!textBounds) return;
+      const {
+          x1: x1,
+          y1: y1,
+          x2: x2,
+          y2: y2
+        } = textBounds,
+        width = Math.abs(x2 - x1),
+        height = Math.abs(y2 - y1),
+        anchorX = (graphicBounds.x1 + graphicBounds.x2) / 2,
+        anchorY = (graphicBounds.y1 + graphicBounds.y2) / 2;
+      let sx = 0,
+        sy = 0,
+        offsetX = 0,
+        offsetY = 0;
+      graphicBounds && (offsetX = Math.abs(graphicBounds.x1 - graphicBounds.x2) / 2, offsetY = Math.abs(graphicBounds.y1 - graphicBounds.y2) / 2);
+      const angle = {
+        "top-right": -235,
+        "top-left": 235,
+        "bottom-right": 45,
+        "bottom-left": -45
+      };
+      switch (position) {
+        case "top":
+          sy = -1;
+          break;
+        case "bottom":
+          sy = 1;
+          break;
+        case "left":
+          sx = -1;
+          break;
+        case "right":
+          sx = 1;
+          break;
+        case "bottom-left":
+        case "bottom-right":
+        case "top-left":
+        case "top-right":
+          sx = Math.sin(angle[position] * (Math.PI / 180)), sy = Math.cos(angle[position] * (Math.PI / 180));
+          break;
+        case "center":
+          sx = 0, sy = 0;
+      }
+      return {
+        x: anchorX + sx * (offset + offsetX) + Math.sign(sx) * (width / 2),
+        y: anchorY + sy * (offset + offsetY) + Math.sign(sy) * (height / 2)
+      };
+    };
+    const getPointsOfLineArea = graphic => {
+      if (!graphic || !graphic.attribute) return [];
+      const {
+        points: points,
+        segments: segments
+      } = graphic.attribute;
+      if (segments && segments.length) {
+        const res = [];
+        return segments.forEach(seg => {
+          seg.points.forEach(point => {
+            res.push(point);
+          });
+        }), res;
+      }
+      return points;
+    };
+
     class LabelBase extends AbstractComponent {
       setBitmap(bitmap) {
         this._bitmap = bitmap;
@@ -30043,16 +30254,17 @@
         }, this._handleRelatedGraphicSetState = e => {
           var _a, _b, _c;
           if ((null === (_a = e.detail) || void 0 === _a ? void 0 : _a.type) === AttributeUpdateType.STATE) {
-            const currentStates = null !== (_c = null === (_b = e.target) || void 0 === _b ? void 0 : _b.currentStates) && void 0 !== _c ? _c : [],
-              label = this._graphicToText.get(e.target);
-            label && (label.text && label.text.useStates(currentStates), label.labelLine && label.labelLine.useStates(currentStates));
+            const currentStates = null !== (_c = null === (_b = e.target) || void 0 === _b ? void 0 : _b.currentStates) && void 0 !== _c ? _c : [];
+            (this._isCollectionBase ? [...this._graphicToText.values()] : [this._graphicToText.get(e.target)]).forEach(label => {
+              label && (label.text && label.text.useStates(currentStates), label.labelLine && label.labelLine.useStates(currentStates));
+            });
           }
         };
       }
       labeling(textBounds, graphicBounds, position, offset) {}
       _labelLine(text) {}
       render() {
-        if (this._prepare(), isNil$1(this._idToGraphic)) return;
+        if (this._prepare(), isNil$1(this._idToGraphic) || this._isCollectionBase && isNil$1(this._idToPoint)) return;
         const {
           overlap: overlap,
           smartInvert: smartInvert,
@@ -30062,7 +30274,7 @@
         } = this.attribute;
         let labels,
           data = this.attribute.data;
-        isFunction$1(dataFilter) && (data = dataFilter(data)), labels = isFunction$1(customLayoutFunc) ? customLayoutFunc(data, d => this._idToGraphic.get(d.id)) : this._layout(data), isFunction$1(customOverlapFunc) ? labels = customOverlapFunc(labels, d => this._idToGraphic.get(d.id)) : !1 !== overlap && (labels = this._overlapping(labels)), !1 !== smartInvert && this._smartInvert(labels), this._renderLabels(labels);
+        isFunction$1(dataFilter) && (data = dataFilter(data)), labels = isFunction$1(customLayoutFunc) ? customLayoutFunc(data, this.getRelatedGrphic, this._isCollectionBase ? d => this._idToPoint.get(d.id) : null) : this._layout(data), isFunction$1(customOverlapFunc) ? labels = customOverlapFunc(labels, this.getRelatedGrphic, this._isCollectionBase ? d => this._idToPoint.get(d.id) : null) : !1 !== overlap && (labels = this._overlapping(labels)), !1 !== smartInvert && this._smartInvert(labels), this._renderLabels(labels);
       }
       _bindEvent(target) {
         if (this.attribute.disableTriggerEvent) return;
@@ -30088,24 +30300,35 @@
         return this._bindEvent(text), this._setStatesOfText(text), text;
       }
       _prepare() {
-        var _a;
+        var _a, _b, _c, _d;
         const currentBaseMarks = [];
         let baseMarks;
         if (baseMarks = isFunction$1(this.attribute.getBaseMarks) ? this.attribute.getBaseMarks() : getMarksByName(this.getRootNode(), this.attribute.baseMarkGroupName), baseMarks.forEach(mark => {
           "willRelease" !== mark.releaseStatus && currentBaseMarks.push(mark);
-        }), null === (_a = this._idToGraphic) || void 0 === _a || _a.clear(), this._baseMarks = currentBaseMarks, !currentBaseMarks || 0 === currentBaseMarks.length) return;
+        }), null === (_a = this._idToGraphic) || void 0 === _a || _a.clear(), null === (_b = this._idToPoint) || void 0 === _b || _b.clear(), this._baseMarks = currentBaseMarks, this._isCollectionBase = "line" === (null === (_c = null == currentBaseMarks ? void 0 : currentBaseMarks[0]) || void 0 === _c ? void 0 : _c.type) || "area" === (null === (_d = null == currentBaseMarks ? void 0 : currentBaseMarks[0]) || void 0 === _d ? void 0 : _d.type), !currentBaseMarks || 0 === currentBaseMarks.length) return;
         const {
           data: data
         } = this.attribute;
-        if (data && 0 !== data.length) {
-          this._idToGraphic || (this._idToGraphic = new Map());
+        if (data && 0 !== data.length) if (this._idToGraphic || (this._idToGraphic = new Map()), this._isCollectionBase) {
+          this._idToPoint || (this._idToPoint = new Map());
+          let cur = 0;
           for (let i = 0; i < currentBaseMarks.length; i++) {
-            const textData = data[i],
-              baseMark = currentBaseMarks[i];
-            textData && baseMark && (isValid$1(textData.id) || (textData.id = `vrender-component-${this.name}-${i}`), this._idToGraphic.set(textData.id, baseMark));
+            const baseMark = currentBaseMarks[i],
+              points = getPointsOfLineArea(baseMark);
+            if (null == points ? void 0 : points.length) for (let j = 0; j < points.length; j++) {
+              const textData = data[cur];
+              textData && points[j] && (isValid$1(textData.id) || (textData.id = `vrender-component-${this.name}-${cur}`), this._idToPoint.set(textData.id, points[j]), this._idToGraphic.set(textData.id, baseMark)), cur++;
+            }
           }
+        } else for (let i = 0; i < currentBaseMarks.length; i++) {
+          const textData = data[i],
+            baseMark = currentBaseMarks[i];
+          textData && baseMark && (isValid$1(textData.id) || (textData.id = `vrender-component-${this.name}-${i}`), this._idToGraphic.set(textData.id, baseMark));
         }
       }
+      getRelatedGrphic(item) {
+        return this._idToGraphic.get(item.id);
+      }
       _layout() {
         let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
         const {
@@ -30116,13 +30339,13 @@
           labels = [];
         for (let i = 0; i < data.length; i++) {
           const textData = data[i],
-            baseMark = this._idToGraphic.get(textData.id),
+            baseMark = this.getRelatedGrphic(textData),
             labelAttribute = Object.assign(Object.assign({
-              fill: baseMark.attribute.fill
+              fill: this._isCollectionBase ? isArray$1(baseMark.attribute.stroke) ? baseMark.attribute.stroke.find(entry => !!entry && !0 !== entry) : baseMark.attribute.stroke : baseMark.attribute.fill
             }, textStyle), textData),
             text = this._createLabelText(labelAttribute),
             textBounds = this.getGraphicBounds(text),
-            graphicBounds = this.getGraphicBounds(baseMark, {
+            graphicBounds = this._isCollectionBase ? this.getGraphicBounds(null, this._idToPoint.get(textData.id)) : this.getGraphicBounds(baseMark, {
               x: textData.x,
               y: textData.y
             }),
@@ -30163,7 +30386,7 @@
         for (let i = 0; i < labels.length; i++) {
           if (!1 === labels[i].visible) continue;
           const text = labels[i],
-            baseMark = this._idToGraphic.get(text.attribute.id);
+            baseMark = this.getRelatedGrphic(text.attribute);
           if (text.update(), !isRectIntersect(baseMark.AABBBounds, {
             x1: 0,
             x2: bmpTool.width,
@@ -30181,7 +30404,7 @@
             }
           }
           let hasPlace = !1;
-          for (let j = 0; j < strategy.length; j++) if (hasPlace = place$2(bmpTool, bitmap, strategy[j], this.attribute, text, this.getGraphicBounds(baseMark, labels[i]), this.labeling), !1 !== hasPlace) {
+          for (let j = 0; j < strategy.length; j++) if (hasPlace = place$2(bmpTool, bitmap, strategy[j], this.attribute, text, this._isCollectionBase ? this.getGraphicBounds(null, this._idToPoint.get(labels[i].attribute.id)) : this.getGraphicBounds(baseMark, labels[i].attribute), this.labeling), !1 !== hasPlace) {
             text.setAttributes({
               x: hasPlace.x,
               y: hasPlace.y
@@ -30241,10 +30464,12 @@
         labels.forEach((text, index) => {
           var _a, _b, _c, _d, _e, _f, _g;
           const labelLine = this._labelLine(text),
-            relatedGraphic = this._idToGraphic.get(text.attribute.id),
-            state = (null == prevTextMap ? void 0 : prevTextMap.get(relatedGraphic)) ? "update" : "enter";
+            relatedGraphic = this.getRelatedGrphic(text.attribute),
+            textId = text.attribute.id,
+            textKey = this._isCollectionBase ? textId : relatedGraphic,
+            state = (null == prevTextMap ? void 0 : prevTextMap.get(textKey)) ? "update" : "enter";
           if ("enter" === state) {
-            if (texts.push(text), currentTextMap.set(relatedGraphic, labelLine ? {
+            if (texts.push(text), currentTextMap.set(textKey, labelLine ? {
               text: text,
               labelLine: labelLine
             } : {
@@ -30254,7 +30479,7 @@
                 from: from,
                 to: to
               } = getAnimationAttributes(text.attribute, "fadeIn");
-              this.add(text), labelLine && (this._setStatesOfLabelLine(labelLine), this.add(labelLine)), this._syncStateWithRelatedGraphic(relatedGraphic), relatedGraphic.once("animate-bind", () => {
+              this.add(text), labelLine && (this._setStatesOfLabelLine(labelLine), this.add(labelLine)), this._syncStateWithRelatedGraphic(relatedGraphic), relatedGraphic.once("animate-bind", a => {
                 text.setAttributes(from);
                 const listener = this._afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, {
                   mode: mode,
@@ -30267,8 +30492,8 @@
               });
             }
           } else if ("update" === state) {
-            const prevLabel = prevTextMap.get(relatedGraphic);
-            prevTextMap.delete(relatedGraphic), currentTextMap.set(relatedGraphic, prevLabel);
+            const prevLabel = prevTextMap.get(textKey);
+            prevTextMap.delete(textKey), currentTextMap.set(textKey, prevLabel);
             const prevText = prevLabel.text;
             prevText.animate().to(text.attribute, duration, easing), prevLabel.labelLine && prevLabel.labelLine.animate().to(merge$1({}, prevLabel.labelLine.attribute, {
               visible: null === (_f = null !== (_d = (null === (_b = null === (_a = text.attribute) || void 0 === _a ? void 0 : _a.line) || void 0 === _b ? void 0 : _b.visible) && (null === (_c = text.attribute) || void 0 === _c ? void 0 : _c.visible)) && void 0 !== _d ? _d : null === (_e = text.attribute) || void 0 === _e ? void 0 : _e.visible) || void 0 === _f || _f,
@@ -30292,16 +30517,17 @@
         labels.forEach(text => {
           var _a;
           const labelLine = this._labelLine(text),
-            relatedGraphic = this._idToGraphic.get(text.attribute.id),
-            state = (null == prevTextMap ? void 0 : prevTextMap.get(relatedGraphic)) ? "update" : "enter";
-          if ("enter" === state) currentTextMap.set(relatedGraphic, labelLine ? {
+            relatedGraphic = this.getRelatedGrphic(text.attribute),
+            state = (null == prevTextMap ? void 0 : prevTextMap.get(relatedGraphic)) ? "update" : "enter",
+            textKey = this._isCollectionBase ? text.attribute.id : relatedGraphic;
+          if ("enter" === state) currentTextMap.set(textKey, labelLine ? {
             text: text,
             labelLine: labelLine
           } : {
             text: text
           }), this.add(text), labelLine && this.add(labelLine), this._syncStateWithRelatedGraphic(relatedGraphic);else if ("update" === state) {
-            const prevLabel = prevTextMap.get(relatedGraphic);
-            prevTextMap.delete(relatedGraphic), currentTextMap.set(relatedGraphic, prevLabel), prevLabel.text.setAttributes(text.attribute), (null == prevLabel ? void 0 : prevLabel.labelLine) && prevLabel.labelLine.setAttributes({
+            const prevLabel = prevTextMap.get(textKey);
+            prevTextMap.delete(textKey), currentTextMap.set(textKey, prevLabel), prevLabel.text.setAttributes(text.attribute), (null == prevLabel ? void 0 : prevLabel.labelLine) && prevLabel.labelLine.setAttributes({
               points: null === (_a = text.attribute) || void 0 === _a ? void 0 : _a.points
             });
           }
@@ -30321,7 +30547,7 @@
           delay: delay
         } = _ref;
         const listener = event => {
-          var _a;
+          var _a, _b;
           const {
             detail: detail
           } = event;
@@ -30345,7 +30571,12 @@
               });
               break;
             default:
-              detail.animationState.isFirstFrameOfStep && text.animate({
+              if (this._isCollectionBase) {
+                const point = this._idToPoint.get(text.attribute.id);
+                !point || text.animates && text.animates.has("label-animate") || !this._baseMarks[0].containsPoint(point.x, point.y, IContainPointMode.LOCAL, null === (_b = this.stage) || void 0 === _b ? void 0 : _b.pickerService) || text.animate({
+                  onEnd: onEnd
+                }).wait(delay).to(to, duration, easing);
+              } else detail.animationState.isFirstFrameOfStep && text.animate({
                 onEnd: onEnd
               }).wait(delay).to(to, duration, easing);
           }
@@ -30368,7 +30599,7 @@
         if ("null" !== fillStrategy || "null" !== strokeStrategy) for (let i = 0; i < labels.length; i++) {
           const label = labels[i];
           if (!label) continue;
-          const baseMark = this._idToGraphic.get(label.attribute.id),
+          const baseMark = this.getRelatedGrphic(label.attribute),
             backgroundColor = baseMark.attribute.fill,
             foregroundColor = label.attribute.fill,
             baseColor = backgroundColor,
@@ -30444,54 +30675,7 @@
       labeling(textBounds, graphicBounds) {
         let position = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "top";
         let offset = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-        if (!textBounds) return;
-        const {
-            x1: x1,
-            y1: y1,
-            x2: x2,
-            y2: y2
-          } = textBounds,
-          width = Math.abs(x2 - x1),
-          height = Math.abs(y2 - y1),
-          anchorX = (graphicBounds.x1 + graphicBounds.x2) / 2,
-          anchorY = (graphicBounds.y1 + graphicBounds.y2) / 2;
-        let sx = 0,
-          sy = 0,
-          offsetX = 0,
-          offsetY = 0;
-        graphicBounds && (offsetX = Math.abs(graphicBounds.x1 - graphicBounds.x2) / 2, offsetY = Math.abs(graphicBounds.y1 - graphicBounds.y2) / 2);
-        const angle = {
-          "top-right": -235,
-          "top-left": 235,
-          "bottom-right": 45,
-          "bottom-left": -45
-        };
-        switch (position) {
-          case "top":
-            sy = -1;
-            break;
-          case "bottom":
-            sy = 1;
-            break;
-          case "left":
-            sx = -1;
-            break;
-          case "right":
-            sx = 1;
-            break;
-          case "bottom-left":
-          case "bottom-right":
-          case "top-left":
-          case "top-right":
-            sx = Math.sin(angle[position] * (Math.PI / 180)), sy = Math.cos(angle[position] * (Math.PI / 180));
-            break;
-          case "center":
-            sx = 0, sy = 0;
-        }
-        return {
-          x: anchorX + sx * (offset + offsetX) + Math.sign(sx) * (width / 2),
-          y: anchorY + sy * (offset + offsetY) + Math.sign(sy) * (height / 2)
-        };
+        return labelingPoint(textBounds, graphicBounds, position, offset);
       }
     }
     SymbolLabel.defaultAttributes = {
@@ -30570,110 +30754,6 @@
       pickable: !1
     };
 
-    function polarToCartesian(point) {
-      return point.radius ? {
-        x: Math.cos(point.angle) * point.radius,
-        y: Math.sin(point.angle) * point.radius
-      } : {
-        x: 0,
-        y: 0
-      };
-    }
-    function circlePoint(x0, y0, radius, radian) {
-      const offset = polarToCartesian({
-        radius: radius,
-        angle: radian
-      });
-      return {
-        x: x0 + offset.x,
-        y: y0 + offset.y
-      };
-    }
-    function computeQuadrant(angle) {
-      return (angle = normalizeAngle(angle)) > 0 && angle <= Math.PI / 2 ? 2 : angle > Math.PI / 2 && angle <= Math.PI ? 3 : angle > Math.PI && angle <= 3 * Math.PI / 2 ? 4 : 1;
-    }
-    function normalizeAngle(angle) {
-      for (; angle < 0;) angle += 2 * Math.PI;
-      for (; angle >= 2 * Math.PI;) angle -= 2 * Math.PI;
-      return angle;
-    }
-    function isQuadrantLeft(quadrant) {
-      return 3 === quadrant || 4 === quadrant;
-    }
-    function isQuadrantRight(quadrant) {
-      return 1 === quadrant || 2 === quadrant;
-    }
-    function lineCirclePoints(a, b, c, x0, y0, r) {
-      if (0 === a && 0 === b || r <= 0) return [];
-      if (0 === a) {
-        const y1 = -c / b,
-          fd = r ** 2 - (y1 - y0) ** 2;
-        if (fd < 0) return [];
-        if (0 === fd) return [{
-          x: x0,
-          y: y1
-        }];
-        return [{
-          x: Math.sqrt(fd) + x0,
-          y: y1
-        }, {
-          x: -Math.sqrt(fd) + x0,
-          y: y1
-        }];
-      }
-      if (0 === b) {
-        const x1 = -c / a,
-          fd = r ** 2 - (x1 - x0) ** 2;
-        if (fd < 0) return [];
-        if (0 === fd) return [{
-          x: x1,
-          y: y0
-        }];
-        return [{
-          x: x1,
-          y: Math.sqrt(fd) + y0
-        }, {
-          x: x1,
-          y: -Math.sqrt(fd) + y0
-        }];
-      }
-      const fa = (b / a) ** 2 + 1,
-        fb = 2 * ((c / a + x0) * (b / a) - y0),
-        fd = fb ** 2 - 4 * fa * ((c / a + x0) ** 2 + y0 ** 2 - r ** 2);
-      if (fd < 0) return [];
-      const y1 = (-fb + Math.sqrt(fd)) / (2 * fa),
-        y2 = (-fb - Math.sqrt(fd)) / (2 * fa),
-        x1 = -(b * y1 + c) / a;
-      return 0 === fd ? [{
-        x: x1,
-        y: y1
-      }] : [{
-        x: x1,
-        y: y1
-      }, {
-        x: -(b * y2 + c) / a,
-        y: y2
-      }];
-    }
-    function connectLineRadian(radius, length) {
-      return length > 2 * radius ? NaN : 2 * Math.asin(length / 2 / radius);
-    }
-    function checkBoundsOverlap(boundsA, boundsB) {
-      const {
-          x1: ax1,
-          y1: ay1,
-          x2: ax2,
-          y2: ay2
-        } = boundsA,
-        {
-          x1: bx1,
-          y1: by1,
-          x2: bx2,
-          y2: by2
-        } = boundsB;
-      return !(ax1 <= bx1 && ax2 <= bx1 || ax1 >= bx2 && ax2 >= bx2 || ay1 <= by1 && ay2 <= by1 || ay1 >= by2 && ay2 >= by2);
-    }
-
     class ArcInfo {
       constructor(refDatum, center, outerCenter, quadrant, radian, middleAngle, innerRadius, outerRadius, circleCenter) {
         this.refDatum = refDatum, this.center = center, this.outerCenter = outerCenter, this.quadrant = quadrant, this.radian = radian, this.middleAngle = middleAngle, this.innerRadius = innerRadius, this.outerRadius = outerRadius, this.circleCenter = circleCenter, this.labelVisible = !0, this.labelLimit = 0;
@@ -31205,10 +31285,34 @@
       pickable: !1
     };
 
+    class LineDataLabel extends LabelBase {
+      constructor(attributes) {
+        super(merge$1({}, LineDataLabel.defaultAttributes, attributes)), this.name = "line-data-label";
+      }
+      labeling(textBounds, graphicBounds) {
+        let position = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "top";
+        let offset = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+        return labelingPoint(textBounds, graphicBounds, position, offset);
+      }
+    }
+    LineDataLabel.defaultAttributes = {
+      textStyle: {
+        fontSize: 12,
+        fill: "#000",
+        textAlign: "center",
+        textBaseline: "middle",
+        boundsPadding: [-1, 0, -1, 0]
+      },
+      position: "top",
+      offset: 5,
+      pickable: !1
+    };
+
     const labelComponentMap = {
       rect: RectLabel,
       symbol: SymbolLabel,
-      arc: ArcLabel
+      arc: ArcLabel,
+      "line-data": LineDataLabel
     };
     class DataLabel extends AbstractComponent {
       constructor(attributes) {
@@ -31831,7 +31935,7 @@
     function intersect(a, b, sep) {
       return sep > Math.max(b.x1 - a.x2, a.x1 - b.x2, b.y1 - a.y2, a.y1 - b.y2);
     }
-    function hasOverlap(items, pad) {
+    function hasOverlap$1(items, pad) {
       for (let b, i = 1, n = items.length, a = items[0].AABBBounds; i < n; a = b, ++i) if (intersect(a, b = items[i].AABBBounds, pad)) return !0;
     }
     function hasBounds(item) {
@@ -31852,10 +31956,10 @@
           separation: sep = 0
         } = config,
         reduce = isFunction$1(method) ? method : methods$1[method] || methods$1.parity;
-      if (items.length >= 3 && hasOverlap(items, sep)) {
+      if (items.length >= 3 && hasOverlap$1(items, sep)) {
         do {
           items = reduce(items, sep);
-        } while (items.length >= 3 && hasOverlap(items, sep));
+        } while (items.length >= 3 && hasOverlap$1(items, sep));
         items.length < 3 && !last(source).attribute.opacity && (items.length > 1 && last(items).setAttribute("opacity", 0), last(source).setAttribute("opacity", 1));
       }
       source.forEach(item => {
@@ -33051,6 +33155,12 @@
       orient: "bottom",
       showDetail: "auto",
       brushSelect: !0,
+      zoomLock: !1,
+      minSpan: 0,
+      maxSpan: 1,
+      delayType: "throttle",
+      delayTime: 0,
+      realTime: !0,
       backgroundStyle: {
         fill: "white",
         stroke: "#D1DBEE",
@@ -33148,6 +33258,10 @@
       }
       return t;
     };
+    const delayMap$2 = {
+      debounce: debounce,
+      throttle: throttle
+    };
     let DataZoom$1 = class DataZoom extends AbstractComponent {
       constructor(attributes) {
         super(merge$1({}, DataZoom.defaultAttributes, attributes)), this.name = "dataZoom", this._previewData = [], this._activeState = !1, this._activeCache = {
@@ -33171,9 +33285,10 @@
         }, this._onHandlerPointerMove = e => {
           e.stopPropagation();
           const {
-              start: start,
-              end: end,
-              brushSelect: brushSelect
+              start: startAttr,
+              end: endAttr,
+              brushSelect: brushSelect,
+              realTime = !0
             } = this.attribute,
             pos = this.eventPosToStagePos(e),
             {
@@ -33181,10 +33296,11 @@
               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));
+          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 && this._updateStateCallback && this._updateStateCallback(start, end), this._dispatchChangeEvent(start, end));
         };
         const {
             start: start,
@@ -33194,29 +33310,31 @@
             showDetail: showDetail,
             position: position,
             previewData: previewData,
-            previewCallbackX: previewCallbackX,
-            previewCallbackY: previewCallbackY,
-            previewCallbackX1: previewCallbackX1,
-            previewCallbackY1: previewCallbackY1,
+            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._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$1(previewCallbackX) && (this._previewCallbackX = previewCallbackX), isFunction$1(previewCallbackY) && (this._previewCallbackY = previewCallbackY), isFunction$1(previewCallbackX1) && (this._previewCallbackX1 = previewCallbackX1), isFunction$1(previewCallbackY1) && (this._previewCallbackY1 = previewCallbackY1), isFunction$1(updateStateCallback) && (this._updateStateCallback = updateStateCallback);
+        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$1(previewPointsX) && (this._previewPointsX = previewPointsX), isFunction$1(previewPointsY) && (this._previewPointsY = previewPointsY), isFunction$1(previewPointsX1) && (this._previewPointsX1 = previewPointsX1), isFunction$1(previewPointsY1) && (this._previewPointsY1 = previewPointsY1), isFunction$1(updateStateCallback) && (this._updateStateCallback = updateStateCallback);
       }
       bindEvents() {
         if (this.attribute.disableTriggerEvent) return;
         const {
           showDetail: showDetail,
-          brushSelect: brushSelect
+          brushSelect: brushSelect,
+          delayType = "throttle",
+          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")), this._middleHandlerRect && this._middleHandlerRect.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "middleRect"));
         const selectedTag = brushSelect ? "background" : "middleRect";
-        this._selectedBackground && this._selectedBackground.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, selectedTag)), 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), {
+        this._selectedBackground && this._selectedBackground.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, selectedTag)), 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", delayMap$2[delayType](this._onHandlerPointerMove.bind(this), delayTime), {
           capture: !0
-        }), vglobal.addEventListener("pointerup", this._onHandlerPointerUp.bind(this))), this.addEventListener("pointermove", this._onHandlerPointerMove, {
+        }), vglobal.addEventListener("pointerup", this._onHandlerPointerUp.bind(this))), this.addEventListener("pointermove", delayMap$2[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));
       }
@@ -33230,6 +33348,18 @@
           } = 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 = !1,
+            minSpan = 0,
+            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();
@@ -33243,16 +33373,14 @@
         const {
           start: start,
           end: end,
-          brushSelect: brushSelect
+          brushSelect: brushSelect,
+          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._dispatchChangeEvent(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), this._updateStateCallback && this._updateStateCallback(this.state.start, this.state.end), this._dispatchChangeEvent(this.state.start, this.state.end));
       }
       _onHandlerPointerEnter(e) {
         e.stopPropagation(), this._showText = !0, this.renderText();
@@ -33272,11 +33400,11 @@
           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);
+        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.setStateAttr(this.state.start + offset, this.state.end + offset, !1));
       }
       renderDragMask() {
         const {
@@ -33547,8 +33675,8 @@
       }
       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 {
@@ -33559,10 +33687,10 @@
       }
       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 {
@@ -33648,10 +33776,7 @@
           start: startAttr,
           end: endAttr
         } = this.attribute;
-        isValid$1(start) && isValid$1(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)));
+        isValid$1(start) && isValid$1(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.setStateAttr(start, end, !0), this._updateStateCallback && this._updateStateCallback(start, end), this._dispatchChangeEvent(start, end)));
       }
       setPreviewData(data) {
         this._previewData = data;
@@ -33677,17 +33802,17 @@
       setUpdateStateCallback(callback) {
         isFunction$1(callback) && (this._updateStateCallback = callback);
       }
-      setPreviewCallbackX(callback) {
-        isFunction$1(callback) && (this._previewCallbackX = callback);
+      setPreviewPointsX(callback) {
+        isFunction$1(callback) && (this._previewPointsX = callback);
       }
-      setPreviewCallbackY(callback) {
-        isFunction$1(callback) && (this._previewCallbackY = callback);
+      setPreviewPointsY(callback) {
+        isFunction$1(callback) && (this._previewPointsY = callback);
       }
-      setPreviewCallbackX1(callback) {
-        isFunction$1(callback) && (this._previewCallbackX1 = callback);
+      setPreviewPointsX1(callback) {
+        isFunction$1(callback) && (this._previewPointsX1 = callback);
       }
-      setPreviewCallbackY1(callback) {
-        isFunction$1(callback) && (this._previewCallbackY1 = callback);
+      setPreviewPointsY1(callback) {
+        isFunction$1(callback) && (this._previewPointsY1 = callback);
       }
       setStatePointToData(callback) {
         isFunction$1(callback) && (this._statePointToData = callback);
@@ -35084,9 +35209,9 @@
         super(merge$1({}, Slider.defaultAttributes, attributes)), this.name = "slider", this._isHorizontal = !0, this._startHandler = null, this._endHandler = null, this._startHandlerText = null, this._endHandlerText = null, this._currentHandler = null, this._currentValue = {}, this._onHandlerPointerdown = e => {
           e.stopPropagation(), this._currentHandler = e.target, this._prePos = this._isHorizontal ? e.clientX : e.clientY, "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onHandlerPointerMove, {
             capture: !0
-          }), vglobal.addEventListener("pointerup", this._onHandlerPointerUp)) : (this._currentHandler.addEventListener("pointermove", this._onHandlerPointerMove, {
+          }), vglobal.addEventListener("pointerup", this._onHandlerPointerUp)) : (this.stage.addEventListener("pointermove", this._onHandlerPointerMove, {
             capture: !0
-          }), this._currentHandler.addEventListener("pointerup", this._onHandlerPointerUp), this._currentHandler.addEventListener("pointerupoutside", this._onHandlerPointerUp));
+          }), this.stage.addEventListener("pointerup", this._onHandlerPointerUp), this.stage.addEventListener("pointerupoutside", this._onHandlerPointerUp));
         }, this._onHandlerPointerMove = e => {
           var _a, _b;
           e.stopPropagation();
@@ -35106,20 +35231,17 @@
             currentValue = newPos / railLen * (max - min) + min;
           "text" === this._currentHandler.type ? this._updateHandlerText(this._currentHandler, newPos, currentValue) : this._updateHandler(this._currentHandler, newPos, currentValue), this._updateTrack(), this._prePos = currentPos, this._dispatchChangeEvent();
         }, this._onHandlerPointerUp = e => {
-          if (e.preventDefault(), this._currentHandler = null, "browser" === vglobal.env) vglobal.removeEventListener("pointermove", this._onHandlerPointerMove, {
+          e.preventDefault(), this._currentHandler = null, "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onHandlerPointerMove, {
             capture: !0
-          }), vglobal.removeEventListener("pointerup", this._onHandlerPointerUp);else {
-            const currentTarget = e.target;
-            currentTarget.removeEventListener("pointermove", this._onHandlerPointerMove, {
-              capture: !0
-            }), currentTarget.removeEventListener("pointerup", this._onHandlerPointerUp), currentTarget.removeEventListener("pointerupoutside", this._onHandlerPointerUp);
-          }
+          }), vglobal.removeEventListener("pointerup", this._onHandlerPointerUp)) : (this.stage.removeEventListener("pointermove", this._onHandlerPointerMove, {
+            capture: !0
+          }), this.stage.removeEventListener("pointerup", this._onHandlerPointerUp), this.stage.removeEventListener("pointerupoutside", this._onHandlerPointerUp));
         }, this._onTrackPointerdown = e => {
           e.stopPropagation(), this._prePos = this._isHorizontal ? e.clientX : e.clientY, "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onTrackPointerMove, {
             capture: !0
-          }), vglobal.addEventListener("pointerup", this._onTrackPointerUp)) : (this._track.addEventListener("pointermove", this._onTrackPointerMove, {
+          }), vglobal.addEventListener("pointerup", this._onTrackPointerUp)) : (this.stage.addEventListener("pointermove", this._onTrackPointerMove, {
             capture: !0
-          }), this._track.addEventListener("pointerup", this._onTrackPointerUp), this._track.addEventListener("pointerupoutside", this._onTrackPointerUp));
+          }), this.stage.addEventListener("pointerup", this._onTrackPointerUp), this.stage.addEventListener("pointerupoutside", this._onTrackPointerUp));
         }, this._onTrackPointerMove = e => {
           e.stopPropagation();
           const {
@@ -35158,9 +35280,9 @@
         }, this._onTrackPointerUp = e => {
           e.preventDefault(), "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onTrackPointerMove, {
             capture: !0
-          }), vglobal.removeEventListener("pointerup", this._onTrackPointerUp)) : (this._track.removeEventListener("pointermove", this._onTrackPointerMove, {
+          }), vglobal.removeEventListener("pointerup", this._onTrackPointerUp)) : (this.stage.removeEventListener("pointermove", this._onTrackPointerMove, {
             capture: !0
-          }), this._track.removeEventListener("pointerup", this._onTrackPointerUp), this._track.removeEventListener("pointerupoutside", this._onTrackPointerUp));
+          }), this.stage.removeEventListener("pointerup", this._onTrackPointerUp), this.stage.removeEventListener("pointerupoutside", this._onTrackPointerUp));
         }, this._onRailPointerDown = e => {
           e.stopPropagation();
           const {
@@ -36634,7 +36756,7 @@
     };
     const DEFAULT_SIZE_THRESHOLD = 5;
 
-    const delayMap = {
+    const delayMap$1 = {
       debounce: debounce,
       throttle: throttle
     };
@@ -36675,7 +36797,7 @@
           endTrigger = DEFAULT_BRUSH_ATTRIBUTES.endTrigger,
           resetTrigger = DEFAULT_BRUSH_ATTRIBUTES.resetTrigger
         } = this.attribute;
-        this.stage.addEventListener(trigger, this._onBrushStart), this.stage.addEventListener(updateTrigger, delayMap[delayType](this._onBrushing, delayTime)), this.stage.addEventListener(endTrigger, this._onBrushEnd), this.stage.addEventListener(resetTrigger, this._onBrushEnd);
+        this.stage.addEventListener(trigger, this._onBrushStart), this.stage.addEventListener(updateTrigger, delayMap$1[delayType](this._onBrushing, delayTime)), this.stage.addEventListener(endTrigger, this._onBrushEnd), this.stage.addEventListener(resetTrigger, this._onBrushEnd);
       }
       _isPosInBrushMask(e) {
         const pos = this.eventPosToStagePos(e),
@@ -36870,7 +36992,7 @@
           endTrigger = DEFAULT_BRUSH_ATTRIBUTES.endTrigger,
           resetTrigger = DEFAULT_BRUSH_ATTRIBUTES.resetTrigger
         } = this.attribute;
-        this.stage.removeEventListener(trigger, this._onBrushStart), this.stage.removeEventListener(updateTrigger, delayMap[delayType](this._onBrushing, delayTime)), this.stage.removeEventListener(endTrigger, this._onBrushEnd), this.stage.removeEventListener(resetTrigger, this._onBrushEnd);
+        this.stage.removeEventListener(trigger, this._onBrushStart), this.stage.removeEventListener(updateTrigger, delayMap$1[delayType](this._onBrushing, delayTime)), this.stage.removeEventListener(endTrigger, this._onBrushEnd), this.stage.removeEventListener(resetTrigger, this._onBrushEnd);
       }
     };
     Brush$1.defaultAttributes = DEFAULT_BRUSH_ATTRIBUTES;
@@ -38657,7 +38779,8 @@
           getBoundingClientRect: () => ({
             height: domref.height,
             width: domref.width
-          })
+          }),
+          nativeCanvas: _canvas
         };
         canvasMap.set(id, canvas), i >= freeCanvasIdx && freeCanvasList.push(canvas);
       });
@@ -41355,6 +41478,10 @@
       init() {
         this._context = new LynxContext2d(this, this._dpr);
       }
+      resize(width, height) {
+        this._pixelWidth = width * this._dpr, this._pixelHeight = height * this._dpr, this._displayWidth = width, this._displayHeight = height, this._nativeCanvas.width = this._pixelWidth, this._nativeCanvas.height = this._pixelHeight, this._nativeCanvas.nativeCanvas && (this._nativeCanvas.nativeCanvas.width = this._pixelWidth, this._nativeCanvas.nativeCanvas.height = this._pixelHeight);
+        this._context.dpr = this._dpr;
+      }
       release() {}
     };
     LynxCanvas.env = "lynx", LynxCanvas = __decorate$a([injectable(), __metadata$8("design:paramtypes", [Object])], LynxCanvas);
@@ -41454,7 +41581,9 @@
         });
       }
       releaseWindow() {}
-      resizeWindow(width, height) {}
+      resizeWindow(width, height) {
+        this.canvas.resize(width, height);
+      }
       setDpr(dpr) {
         this.canvas.dpr = dpr;
       }
@@ -47149,6 +47278,44 @@
       })), Factory$1.registerAnimationType("barBoxplotScaleIn", barBoxplotScaleIn), Factory$1.registerAnimationType("barBoxplotScaleOut", barBoxplotScaleOut);
     }
 
+    const registerRippleGlyph = () => {
+      Factory$1.registerGlyph("ripplePoint", {
+        symbol: "symbol",
+        ripple0: "symbol",
+        ripple1: "symbol",
+        ripple2: "symbol"
+      }).registerFunctionEncoder((encodeValues, datum, element, config) => {
+        var _a;
+        const ripple = Math.max(0, Math.min(encodeValues.ripple, 1)),
+          size = null !== (_a = encodeValues.size) && void 0 !== _a ? _a : element.getGraphicAttribute("size"),
+          rippleSize = .5 * size;
+        return {
+          ripple0: {
+            size: size + rippleSize * ripple,
+            fillOpacity: .75 - .25 * ripple
+          },
+          ripple1: {
+            size: size + rippleSize * (1 + ripple),
+            fillOpacity: .5 - .25 * ripple
+          },
+          ripple2: {
+            size: size + rippleSize * (2 + ripple),
+            fillOpacity: .25 - .25 * ripple
+          }
+        };
+      }).registerDefaultEncoder(() => ({
+        ripple0: {
+          fillOpacity: .75
+        },
+        ripple1: {
+          fillOpacity: .5
+        },
+        ripple2: {
+          fillOpacity: .25
+        }
+      }));
+    };
+
     const getHorizontalPath = (options, ratio) => {
       var _a;
       const curvature = null !== (_a = options.curvature) && void 0 !== _a ? _a : .5,
@@ -48768,6 +48935,10 @@
 
     const WaterfallDefaultSeriesField = `${PREFIX}_waterfall_default_seriesField`;
 
+    const CORRELATION_X = `${PREFIX}_CORRELATION_X`;
+    const CORRELATION_Y = `${PREFIX}_CORRELATION_Y`;
+    const CORRELATION_SIZE = `${PREFIX}_CORRELATION_SIZE`;
+
     const DEFAULT_DATA_INDEX = `${PREFIX}_DEFAULT_DATA_INDEX`;
     const DEFAULT_DATA_KEY = `${PREFIX}_DEFAULT_DATA_KEY`;
     const DEFAULT_DATA_SERIES_FIELD = `${PREFIX}_DEFAULT_DATA_SERIES_FIELD`;
@@ -48931,7 +49102,7 @@
             style: {
                 cursor: 'pointer',
                 fill: 'black',
-                stroke: 'white',
+                stroke: { type: 'palette', key: 'backgroundColor' },
                 lineWidth: 2,
                 fontSize: THEME_CONSTANTS.l5FontSize,
                 lineHeight: THEME_CONSTANTS.l5LineHeight
@@ -48968,7 +49139,8 @@
         },
         label: {
             style: {
-                stroke: 'white',
+                lineWidth: 2,
+                stroke: { type: 'palette', key: 'backgroundColor' },
                 textAlign: 'center',
                 textBaseline: 'middle'
             }
@@ -48983,6 +49155,24 @@
         }
     };
 
+    const correlation$1 = {
+        centerLabel: {
+            visible: true,
+            position: 'center',
+            style: {
+                fill: '#fff',
+                text: ''
+            }
+        },
+        label: {
+            visible: true,
+            position: 'bottom',
+            style: {
+                fill: '#000'
+            }
+        }
+    };
+
     const series = {
         scatter,
         line,
@@ -49011,7 +49201,8 @@
         heatmap,
         sankey: sankey$1,
         rose,
-        boxPlot
+        boxPlot,
+        correlation: correlation$1
     };
 
     const markByType = {
@@ -49106,7 +49297,16 @@
         title: {
             space: 8
         },
-        maxHeight: '30%'
+        maxHeight: '30%',
+        unit: {
+            visible: false,
+            style: {
+                fontSize: THEME_CONSTANTS.l5FontSize,
+                fill: { type: 'palette', key: 'axisFontColor' },
+                fontWeight: 'normal',
+                fillOpacity: 1
+            }
+        }
     };
     const axisY = {
         label: {
@@ -49117,7 +49317,16 @@
             space: 12,
             autoRotate: true
         },
-        maxWidth: '30%'
+        maxWidth: '30%',
+        unit: {
+            visible: false,
+            style: {
+                fontSize: THEME_CONSTANTS.l5FontSize,
+                fill: { type: 'palette', key: 'axisFontColor' },
+                fontWeight: 'normal',
+                fillOpacity: 1
+            }
+        }
     };
 
     const commonAxis = {
@@ -49422,7 +49631,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             autoFit: false,
             style: {
                 fontSize: THEME_CONSTANTS.l1FontSize,
-                fill: { type: 'palette', key: ['titleFontColor', 'primaryFontColor'] },
+                fill: { type: 'palette', key: 'primaryFontColor' },
                 fontWeight: 'normal',
                 fillOpacity: 1,
                 textBaseline: 'top',
@@ -49453,7 +49662,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 fontSize: THEME_CONSTANTS.l5FontSize,
                 lineHeight: THEME_CONSTANTS.l5LineHeight,
                 fontWeight: 'normal',
-                fill: { type: 'palette', key: ['titleFontColor', 'primaryFontColor'] }
+                fill: { type: 'palette', key: 'primaryFontColor' }
             },
             space: 12
         },
@@ -49531,7 +49740,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             textStyle: {
                 fontSize: THEME_CONSTANTS.l5FontSize,
                 lineHeight: THEME_CONSTANTS.l5LineHeight,
-                fill: { type: 'palette', key: ['titleFontColor', 'primaryFontColor'] },
+                fill: { type: 'palette', key: 'primaryFontColor' },
                 fontWeight: 'normal'
             },
             space: 12
@@ -49670,7 +49879,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     const markArea = {
         area: {
             style: {
-                fill: 'rgba(46, 47, 50, 0.1)'
+                fill: { type: 'palette', key: 'axisDomainColor', a: 0.25 }
             }
         },
         label: {
@@ -49678,9 +49887,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 fontSize: THEME_CONSTANTS.l4FontSize,
                 fontWeight: 'normal',
                 fontStyle: 'normal',
-                fill: { type: 'palette', key: 'labelReverseFontColor' },
-                stroke: { type: 'palette', key: 'labelReverseFontColor' },
-                lineWidth: 0
+                fill: { type: 'palette', key: 'primaryFontColor' }
             },
             labelBackground: {
                 padding: {
@@ -49690,8 +49897,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     left: 4
                 },
                 style: {
-                    cornerRadius: 0,
-                    fill: '#F68484'
+                    cornerRadius: 3,
+                    fill: { type: 'palette', key: 'markLabelBackgroundColor' }
                 }
             }
         }
@@ -49701,7 +49908,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         line: {
             style: {
                 lineDash: [3, 3],
-                stroke: 'rgba(46, 47, 50)'
+                stroke: { type: 'palette', key: 'primaryFontColor' }
             }
         },
         startSymbol: {
@@ -49711,7 +49918,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             style: {
                 stroke: null,
                 lineWidth: 0,
-                fill: 'rgba(46, 47, 50)'
+                fill: { type: 'palette', key: 'primaryFontColor' }
             }
         },
         endSymbol: {
@@ -49721,7 +49928,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             style: {
                 stroke: null,
                 lineWidth: 0,
-                fill: 'rgba(46, 47, 50)'
+                fill: { type: 'palette', key: 'primaryFontColor' }
             }
         },
         label: {
@@ -49730,9 +49937,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 fontSize: THEME_CONSTANTS.l4FontSize,
                 fontWeight: 'normal',
                 fontStyle: 'normal',
-                fill: { type: 'palette', key: 'labelReverseFontColor' },
-                stroke: { type: 'palette', key: 'labelReverseFontColor' },
-                lineWidth: 0
+                fill: { type: 'palette', key: 'primaryFontColor' }
             },
             labelBackground: {
                 padding: {
@@ -49742,8 +49947,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     left: 4
                 },
                 style: {
-                    cornerRadius: 0,
-                    fill: 'rgb(48, 115, 242)'
+                    cornerRadius: 3,
+                    fill: { type: 'palette', key: 'markLabelBackgroundColor' }
                 }
             }
         }
@@ -49758,12 +49963,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 size: 5,
                 visible: true,
                 style: {
-                    fill: '#eee'
+                    fill: { type: 'palette', key: 'primaryFontColor' }
                 }
             },
             line: {
                 style: {
-                    stroke: '#eee'
+                    stroke: { type: 'palette', key: 'primaryFontColor' }
                 }
             }
         },
@@ -49845,7 +50050,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         textStyle: {
             fontSize: THEME_CONSTANTS.l3FontSize,
             lineHeight: THEME_CONSTANTS.l3LineHeight,
-            fill: { type: 'palette', key: ['titleFontColor', 'primaryFontColor'] }
+            fill: { type: 'palette', key: 'primaryFontColor' }
         },
         subtextStyle: {
             fontSize: THEME_CONSTANTS.l4FontSize,
@@ -49884,7 +50089,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         titleLabel: {
             fontSize: THEME_CONSTANTS.l4FontSize,
             lineHeight: THEME_CONSTANTS.l4LineHeight,
-            fontColor: { type: 'palette', key: ['titleFontColor', 'primaryFontColor'] },
+            fontColor: { type: 'palette', key: 'primaryFontColor' },
             fontWeight: 'bold',
             textAlign: 'left',
             textBaseline: 'middle',
@@ -49905,7 +50110,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         valueLabel: {
             fontSize: THEME_CONSTANTS.l4FontSize,
             lineHeight: THEME_CONSTANTS.l4LineHeight,
-            fontColor: { type: 'palette', key: ['titleFontColor', 'primaryFontColor'] },
+            fontColor: { type: 'palette', key: 'primaryFontColor' },
             fontWeight: 'bold',
             textBaseline: 'middle',
             spacing: 0
@@ -49919,7 +50124,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         titleStyle: {
             fontSize: THEME_CONSTANTS.l5FontSize,
             fontWeight: 'bold',
-            fill: { type: 'palette', key: ['titleFontColor', 'primaryFontColor'] }
+            fill: { type: 'palette', key: 'primaryFontColor' }
         },
         contentStyle: {
             fontSize: THEME_CONSTANTS.l5FontSize,
@@ -49950,7 +50155,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         animation: false,
         style: {
             fontSize: THEME_CONSTANTS.l4FontSize,
-            fill: { type: 'palette', key: ['titleFontColor', 'primaryFontColor'] }
+            fill: { type: 'palette', key: 'primaryFontColor' }
         }
     };
 
@@ -50141,6 +50346,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         SeriesTypeEnum["circlePacking"] = "circlePacking";
         SeriesTypeEnum["waterfall"] = "waterfall";
         SeriesTypeEnum["heatmap"] = "heatmap";
+        SeriesTypeEnum["correlation"] = "correlation";
     })(SeriesTypeEnum || (SeriesTypeEnum = {}));
     var SeriesMarkNameEnum;
     (function (SeriesMarkNameEnum) {
@@ -50192,6 +50398,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         SeriesMarkNameEnum["stackLabel"] = "stackLabel";
         SeriesMarkNameEnum["word"] = "word";
         SeriesMarkNameEnum["fillingWord"] = "fillingWord";
+        SeriesMarkNameEnum["nodePoint"] = "nodePoint";
+        SeriesMarkNameEnum["ripplePoint"] = "ripplePoint";
+        SeriesMarkNameEnum["centerPoint"] = "centerPoint";
+        SeriesMarkNameEnum["centerLabel"] = "centerLabel";
     })(SeriesMarkNameEnum || (SeriesMarkNameEnum = {}));
     const seriesMarkNameSet = new Set(Object.values(SeriesMarkNameEnum));
 
@@ -50215,6 +50425,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         MarkTypeEnum["linkPath"] = "linkPath";
         MarkTypeEnum["progressArc"] = "progressArc";
         MarkTypeEnum["cell"] = "cell";
+        MarkTypeEnum["ripple"] = "ripple";
         MarkTypeEnum["component"] = "component";
         MarkTypeEnum["label"] = "label";
     })(MarkTypeEnum || (MarkTypeEnum = {}));
@@ -50281,6 +50492,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
 
     const heatmapSeriesMark = Object.assign(Object.assign({}, baseSeriesMark), { [SeriesMarkNameEnum.cell]: { name: SeriesMarkNameEnum.cell, type: MarkTypeEnum.cell }, [SeriesMarkNameEnum.cellBackground]: { name: SeriesMarkNameEnum.cellBackground, type: MarkTypeEnum.cell } });
 
+    const correlationSeriesMark = Object.assign(Object.assign({}, baseSeriesMark), { [SeriesMarkNameEnum.nodePoint]: { name: SeriesMarkNameEnum.nodePoint, type: MarkTypeEnum.symbol }, [SeriesMarkNameEnum.ripplePoint]: { name: SeriesMarkNameEnum.ripplePoint, type: MarkTypeEnum.ripple }, [SeriesMarkNameEnum.centerPoint]: { name: SeriesMarkNameEnum.centerPoint, type: MarkTypeEnum.symbol }, [SeriesMarkNameEnum.centerLabel]: { name: SeriesMarkNameEnum.centerLabel, type: MarkTypeEnum.text } });
+
     const seriesMarkInfoMap = {
         [SeriesTypeEnum.bar]: barSeriesMark,
         [SeriesTypeEnum.bar3d]: bar3dSeriesMark,
@@ -50309,7 +50522,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         [SeriesTypeEnum.sunburst]: sunburstSeriesMark,
         [SeriesTypeEnum.rangeColumn]: rangeColumnSeriesMark,
         [SeriesTypeEnum.circlePacking]: circlePackingSeriesMark,
-        [SeriesTypeEnum.heatmap]: heatmapSeriesMark
+        [SeriesTypeEnum.heatmap]: heatmapSeriesMark,
+        [SeriesTypeEnum.correlation]: correlationSeriesMark
     };
 
     function baseMerge(target, source, shallowArray = false) {
@@ -50467,7 +50681,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 labelReverseFontColor: '#202226',
                 axisGridColor: '#404349',
                 axisDomainColor: '#4b4f54',
-                axisLabelFontColor: '#bbbdc3',
                 dataZoomHandlerStrokeColor: '#888c93',
                 dataZoomHandlerFillColor: '#202226',
                 dataZoomBackgroundColor: '#404349',
@@ -50475,6 +50688,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 dataZoomSelectedColor: '#4284FF',
                 scrollBarSliderColor: '#ffffff',
                 tooltipBackgroundColor: '#404349',
+                markLabelBackgroundColor: '#f0bd30',
                 titleFontColor: '#fdfdfd',
                 labelFontColor: '#bbbdc3'
             }
@@ -53512,9 +53726,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         getState() {
             return this.state._stateMap;
         }
-        get tooltipHelper() {
-            return this._tooltipHelper;
-        }
         constructor(spec, option) {
             var _a, _b, _c;
             super(option);
@@ -54628,21 +54839,21 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.layoutNormalInlineItems(items.filter(x => x.layoutType === 'normal-inline'));
             this.layoutNormalItems(items.filter(x => x.layoutType === 'normal'));
             const layoutTemp = {
-                leftCurrent: this.leftCurrent,
-                topCurrent: this.topCurrent,
-                rightCurrent: this.rightCurrent,
-                bottomCurrent: this.bottomCurrent
+                left: this.leftCurrent,
+                top: this.topCurrent,
+                right: this.rightCurrent,
+                bottom: this.bottomCurrent
             };
             const regionItems = items.filter(x => x.layoutType === 'region');
             const relativeItems = items.filter(x => x.layoutType === 'region-relative');
             this.layoutRegionItems(regionItems, relativeItems);
             if (relativeItems.some(i => i.getAutoIndent())) {
-                const { top, bottom, left, right } = this._checkAutoIndent(relativeItems);
+                const { top, bottom, left, right } = this._checkAutoIndent(relativeItems, layoutTemp);
                 if (top || bottom || left || right) {
-                    this.topCurrent = layoutTemp.topCurrent + top;
-                    this.bottomCurrent = layoutTemp.bottomCurrent - bottom;
-                    this.leftCurrent = layoutTemp.leftCurrent + left;
-                    this.rightCurrent = layoutTemp.rightCurrent - right;
+                    this.topCurrent = layoutTemp.top + top;
+                    this.bottomCurrent = layoutTemp.bottom - bottom;
+                    this.leftCurrent = layoutTemp.left + left;
+                    this.rightCurrent = layoutTemp.right - right;
                     this.layoutRegionItems(regionItems, relativeItems);
                 }
             }
@@ -54801,32 +55012,42 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             };
             return result;
         }
-        _checkAutoIndent(items) {
+        _checkAutoIndent(items, layoutTemp) {
             const result = {
                 top: 0,
                 left: 0,
                 bottom: 0,
                 right: 0
             };
-            const rightCurrent = this._chartViewBox.x2 - this._chartViewBox.x1 - this.rightCurrent;
-            const bottomCurrent = this._chartViewBox.y2 - this._chartViewBox.y1 - this.bottomCurrent;
             items.forEach(i => {
                 if (!i.getVisible() || !i.getAutoIndent()) {
                     return;
                 }
                 const vOrH = i.layoutOrient === 'left' || i.layoutOrient === 'right';
-                const outer = i.getLastComputeOutBounds();
+                const itemOuter = i.getLastComputeOutBounds();
+                const outer = this._getOutInLayout(itemOuter, i, layoutTemp);
                 if (vOrH) {
-                    result.top = Math.max(result.top, outer.y1 - this.topCurrent);
-                    result.bottom = Math.max(result.bottom, outer.y2 - bottomCurrent);
+                    result.top = Math.max(result.top, outer.top);
+                    result.bottom = Math.max(result.bottom, outer.bottom);
                 }
                 else {
-                    result.left = Math.max(result.left, outer.x1 - this.leftCurrent);
-                    result.right = Math.max(result.right, outer.x2 - rightCurrent);
+                    result.left = Math.max(result.left, outer.left);
+                    result.right = Math.max(result.right, outer.right);
                 }
             });
             return result;
         }
+        _getOutInLayout(itemOuter, i, tempBorder) {
+            const { x, y } = i.getLayoutStartPoint();
+            const { width, height } = i.getLayoutRect();
+            const result = {
+                left: tempBorder.left - (x - itemOuter.x1),
+                right: x + width + itemOuter.x2 - tempBorder.right,
+                top: tempBorder.top - (y - itemOuter.y1),
+                bottom: y + height + itemOuter.y2 - tempBorder.bottom
+            };
+            return result;
+        }
     }
     Layout.type = 'base';
 
@@ -55287,6 +55508,32 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             };
             return result;
         }
+        _checkAutoIndent(items) {
+            const result = {
+                top: 0,
+                left: 0,
+                bottom: 0,
+                right: 0
+            };
+            const rightCurrent = this._chartViewBox.x2 - this._chartViewBox.x1 - this.rightCurrent;
+            const bottomCurrent = this._chartViewBox.y2 - this._chartViewBox.y1 - this.bottomCurrent;
+            items.forEach(i => {
+                if (!i.getVisible() || !i.getAutoIndent()) {
+                    return;
+                }
+                const vOrH = i.layoutOrient === 'left' || i.layoutOrient === 'right';
+                const outer = i.getLastComputeOutBounds();
+                if (vOrH) {
+                    result.top = Math.max(result.top, outer.y1 - this.topCurrent);
+                    result.bottom = Math.max(result.bottom, outer.y2 - bottomCurrent);
+                }
+                else {
+                    result.left = Math.max(result.left, outer.x1 - this.leftCurrent);
+                    result.right = Math.max(result.right, outer.x2 - rightCurrent);
+                }
+            });
+            return result;
+        }
     }
     Layout3d.type = 'layout3d';
     const registerLayout3d = () => {
@@ -56635,6 +56882,26 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     }
     LinkPathMark.type = MarkTypeEnum.linkPath;
 
+    class RippleMark extends BaseMark {
+        constructor() {
+            super(...arguments);
+            this.type = RippleMark.type;
+        }
+        _getDefaultStyle() {
+            const defaultStyle = Object.assign(Object.assign({}, super._getDefaultStyle()), { x: 0, y: 0, ripple: 0 });
+            return defaultStyle;
+        }
+        _initProduct(group) {
+            registerRippleGlyph();
+            const view = this.getVGrammarView();
+            const id = this.getProductId();
+            const glyphType = 'ripplePoint';
+            this._product = view.glyph(glyphType, group !== null && group !== void 0 ? group : view.rootMark).id(id);
+            this._compiledProductId = id;
+        }
+    }
+    RippleMark.type = MarkTypeEnum.ripple;
+
     class ProgressArcMark extends BaseArcMark {
         constructor() {
             super(...arguments);
@@ -57916,7 +58183,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
     registerVChartCore();
 
-    const version = "1.5.1-alpha.5";
+    const version = "1.5.1";
 
     class ChartData {
         get dataList() {
@@ -58819,6 +59086,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     }
                     else {
                         const tempSpec = colorSpec;
+                        if (tempSpec.range) {
+                            tempSpec.range = tempSpec.range.map(color => { var _a; return getActualColor(color, (_a = this._theme) === null || _a === void 0 ? void 0 : _a.colorScheme); });
+                        }
                         Object.prototype.hasOwnProperty.call(tempSpec, 'type') && (colorScaleSpec.type = tempSpec.type);
                         Object.prototype.hasOwnProperty.call(tempSpec, 'domain') && (colorScaleSpec.domain = tempSpec.domain);
                         Object.prototype.hasOwnProperty.call(tempSpec, 'range') && (colorScaleSpec.range = tempSpec.range);
@@ -59440,6 +59710,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         ChartTypeEnum["sunburst"] = "sunburst";
         ChartTypeEnum["circlePacking"] = "circlePacking";
         ChartTypeEnum["heatmap"] = "heatmap";
+        ChartTypeEnum["correlation"] = "correlation";
     })(ChartTypeEnum || (ChartTypeEnum = {}));
 
     const addVChartProperty = (data, op) => {
@@ -60449,6 +60720,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return this._stackOffsetSilhouette;
         }
         get tooltipHelper() {
+            if (!this._tooltipHelper) {
+                this.initTooltip();
+            }
             return this._tooltipHelper;
         }
         getInvalidType() {
@@ -60490,7 +60764,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.initStatisticalData();
             this.event.emit(ChartEvent.afterInitData, { model: this });
             this.initTrigger();
-            this.initTooltip();
             this.initRootMark();
             this.initMark();
             this._initExtensionMark();
@@ -60521,7 +60794,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             };
         }
         setAttrFromSpec() {
-            var _a;
             super.setAttrFromSpec();
             this.setSeriesField(this._spec.seriesField);
             if (isBoolean$1(this._spec.stack)) {
@@ -60541,7 +60813,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (isValid$1(this._spec.invalidType)) {
                 this._invalidType = this._spec.invalidType;
             }
-            (_a = this._tooltipHelper) === null || _a === void 0 ? void 0 : _a.updateTooltipSpec();
         }
         initData() {
             var _a, _b, _c, _d;
@@ -61033,6 +61304,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
             this._updateExtensionMarkSpec(lastSpec);
             this._updateSpecData();
+            if (this._tooltipHelper) {
+                this._tooltipHelper.updateTooltipSpec();
+            }
         }
         onEvaluateEnd(ctx) {
             this._data.updateData();
@@ -61761,7 +62035,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return this._lineMark;
         }
         initLineMarkStyle(direction, areaCurveType) {
-            var _a, _b, _c;
+            var _a, _b;
             const lineMark = this._lineMark;
             if (lineMark) {
                 this.setMarkStyle(lineMark, {
@@ -61800,7 +62074,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     z: this._fieldZ ? this.dataToPositionZ.bind(this) : null
                 }, 'normal', AttributeLevel.Series);
                 this._trigger.registerMark(lineMark);
-                (_c = this._tooltipHelper) === null || _c === void 0 ? void 0 : _c.activeTriggerSet.dimension.add(lineMark);
             }
             return lineMark;
         }
@@ -61854,7 +62127,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return this._symbolMark;
         }
         initSymbolMarkStyle() {
-            var _a;
             const symbolMark = this._symbolMark;
             if (!symbolMark) {
                 return symbolMark;
@@ -61876,7 +62148,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 z: this._fieldZ ? this.dataToPositionZ.bind(this) : null
             }, 'normal', AttributeLevel.Series);
             this._trigger.registerMark(symbolMark);
-            (_a = this._tooltipHelper) === null || _a === void 0 ? void 0 : _a.activeTriggerSet.mark.add(symbolMark);
             if (this._symbolActiveMark && this._symbolMark.stateStyle.dimension_hover) {
                 this._symbolActiveMark.setVisible(true);
                 this.event.on(DimensionEventEnum.dimensionHover, this._dimensionTrigger.bind(this));
@@ -61959,6 +62230,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.initLineMark(progressive, seriesMark === 'line');
             this.initSymbolMark(progressive, seriesMark === 'point');
         }
+        initTooltip() {
+            super.initTooltip();
+            this._lineMark && this._tooltipHelper.activeTriggerSet.dimension.add(this._lineMark);
+            this._symbolMark && this._tooltipHelper.activeTriggerSet.mark.add(this._symbolMark);
+        }
         initMarkStyle() {
             this.initLineMarkStyle(this._direction);
             this.initSymbolMarkStyle();
@@ -62202,7 +62478,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     curveType
                 }, 'normal', AttributeLevel.Built_In);
                 this._trigger.registerMark(areaMark);
-                this._tooltipHelper.activeTriggerSet.dimension.add(areaMark);
                 Object.keys(areaMark.stateStyle).forEach(state => {
                     if (areaMark.stateStyle[state].stroke) {
                         areaMark.setPostProcess('stroke', result => {
@@ -62231,6 +62506,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         initTooltip() {
             this._tooltipHelper = new AreaSeriesTooltipHelper(this);
+            this._areaMark && this._tooltipHelper.activeTriggerSet.dimension.add(this._areaMark);
+            this._lineMark && this._tooltipHelper.activeTriggerSet.dimension.add(this._lineMark);
+            this._symbolMark && this._tooltipHelper.activeTriggerSet.mark.add(this._symbolMark);
         }
         viewDataStatisticsUpdate(d) {
             super.viewDataStatisticsUpdate(d);
@@ -62432,14 +62710,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
         }
         initMarkStyle() {
-            var _a;
             const rectMark = this._rectMark;
             if (rectMark) {
                 this.setMarkStyle(rectMark, {
                     fill: this.getColorAttribute()
                 }, 'normal', AttributeLevel.Series);
                 this._trigger.registerMark(rectMark);
-                (_a = this._tooltipHelper) === null || _a === void 0 ? void 0 : _a.activeTriggerSet.mark.add(rectMark);
             }
         }
         initLabelMarkStyle(textMark) {
@@ -62454,6 +62730,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 z: this._fieldZ ? this.dataToPositionZ.bind(this) : null
             });
         }
+        initTooltip() {
+            super.initTooltip();
+            this._rectMark && this._tooltipHelper.activeTriggerSet.mark.add(this._rectMark);
+        }
         init(option) {
             var _a, _b;
             super.init(option);
@@ -62951,7 +63231,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._symbolMark.setAnimationConfig(animationConfig((_c = Factory.getAnimationInKey('scatter')) === null || _c === void 0 ? void 0 : _c({}, appearPreset), userAnimationConfig(SeriesMarkNameEnum.point, this._spec)));
         }
         initSymbolMarkStyle() {
-            var _a;
             const symbolMark = this._symbolMark;
             if (!symbolMark) {
                 return;
@@ -62980,7 +63259,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.User_Mark);
             }
             this._trigger.registerMark(symbolMark);
-            (_a = this._tooltipHelper) === null || _a === void 0 ? void 0 : _a.activeTriggerSet.mark.add(symbolMark);
+        }
+        initTooltip() {
+            super.initTooltip();
+            this._symbolMark && this._tooltipHelper.activeTriggerSet.mark.add(this._symbolMark);
         }
         viewDataStatisticsUpdate(d) {
             super.viewDataStatisticsUpdate(d);
@@ -63932,6 +64214,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         clearScroll() {
         }
+        clearDrag() {
+        }
         parserDragEvent() {
             return true;
         }
@@ -63970,6 +64254,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         clearScroll() {
         }
+        clearDrag() {
+        }
     }
 
     const defaultTriggerEvent = {
@@ -64023,6 +64309,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
     };
 
+    const delayMap = {
+        debounce: debounce,
+        throttle: throttle
+    };
     class Zoomable {
         initZoomable(evt, mode = exports.RenderModeEnum['desktop-browser']) {
             this._eventObj = evt;
@@ -64035,112 +64325,124 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _getTriggerEvent(type) {
             return defaultTriggerEvent[this._renderMode][type];
         }
-        _bindZoomEventAsRegion(eventObj, regionOrSeries, callback) {
-            eventObj.on(this._getTriggerEvent('scrollEnd'), { level: Event_Bubble_Level.chart, consume: false }, params => {
-                this._zoomableTrigger.clearZoom();
-            });
-            eventObj.on(this._getTriggerEvent('scroll'), { level: Event_Bubble_Level.chart, consume: true }, params => {
-                if (!params.event) {
-                    return;
-                }
-                const event = params.event.clone();
-                this._zoomableTrigger.parserZoomEvent(event);
-                const { zoomDelta, zoomX, zoomY } = event;
-                if (isNil$1(zoomDelta)) {
-                    return;
-                }
-                if (!isPointInRect({
-                    x: zoomX,
-                    y: zoomY
-                }, Object.assign(Object.assign({}, regionOrSeries.getLayoutRect()), regionOrSeries.getLayoutStartPoint()))) {
-                    return;
-                }
-                this._clickEnable = false;
-                if (callback) {
-                    callback({ zoomDelta, zoomX, zoomY }, event);
-                }
-                this._eventObj.emit('zoom', {
-                    scale: event.zoomDelta,
-                    scaleCenter: { x: event.zoomX, y: event.zoomY },
-                    model: this
-                });
+        _zoomEventDispatch(params, regionOrSeries, callback) {
+            if (!params.event) {
+                return;
+            }
+            const event = params.event.clone();
+            this._zoomableTrigger.parserZoomEvent(event);
+            const { zoomDelta, zoomX, zoomY } = event;
+            if (isNil$1(zoomDelta)) {
+                return;
+            }
+            if (!isPointInRect({
+                x: zoomX,
+                y: zoomY
+            }, Object.assign(Object.assign({}, regionOrSeries.getLayoutRect()), regionOrSeries.getLayoutStartPoint()))) {
+                return;
+            }
+            this._clickEnable = false;
+            if (callback) {
+                callback({ zoomDelta, zoomX, zoomY }, event);
+            }
+            this._eventObj.emit('zoom', {
+                scale: event.zoomDelta,
+                scaleCenter: { x: event.zoomX, y: event.zoomY },
+                model: this
             });
         }
-        initZoomEventOfSeries(s, callback) {
+        _bindZoomEventAsRegion(eventObj, regionOrSeries, callback, option) {
+            var _a, _b;
+            const delayType = (_a = option === null || option === void 0 ? void 0 : option.delayType) !== null && _a !== void 0 ? _a : 'throttle';
+            const delayTime = (_b = option === null || option === void 0 ? void 0 : option.delayTime) !== null && _b !== void 0 ? _b : 0;
+            eventObj.on(this._getTriggerEvent('scrollEnd'), { level: Event_Bubble_Level.chart, consume: false }, delayMap[delayType]((params) => {
+                this._zoomableTrigger.clearZoom();
+            }, delayTime));
+            eventObj.on(this._getTriggerEvent('scroll'), { level: Event_Bubble_Level.chart, consume: true }, delayMap[delayType]((params) => {
+                this._zoomEventDispatch(params, regionOrSeries, callback);
+            }, delayTime));
+        }
+        initZoomEventOfSeries(s, callback, option) {
             if (defaultTriggerEvent[this._renderMode]) {
-                this._bindZoomEventAsRegion(s.event, s, callback);
+                this._bindZoomEventAsRegion(s.event, s, callback, option);
             }
         }
-        initZoomEventOfRegions(regions, filter, callback) {
+        initZoomEventOfRegions(regions, filter, callback, option) {
             if (defaultTriggerEvent[this._renderMode]) {
                 regions.forEach(r => {
                     if (filter) {
                         r.getSeries().forEach(s => {
                             if (filter(s)) {
-                                this._bindZoomEventAsRegion(s.event, s, callback);
+                                this._bindZoomEventAsRegion(s.event, s, callback, option);
                             }
                         });
                     }
                     else {
-                        this._bindZoomEventAsRegion(this._eventObj, r, callback);
+                        this._bindZoomEventAsRegion(this._eventObj, r, callback, option);
                     }
                 });
             }
         }
-        initScrollEventOfSeries(s, callback) {
+        _scrollEventDispatch(params, regionOrSeries, callback) {
+            if (!params.event) {
+                return;
+            }
+            const { event } = params;
+            this._zoomableTrigger.parserScrollEvent(event);
+            const { scrollX, scrollY } = event;
+            if (isNil$1(scrollX) && isNil$1(scrollY)) {
+                return;
+            }
+            if (!isPointInRect({
+                x: event.canvasX,
+                y: event.canvasY
+            }, Object.assign(Object.assign({}, regionOrSeries.getLayoutRect()), regionOrSeries.getLayoutStartPoint()))) {
+                return;
+            }
+            this._clickEnable = false;
+            if (callback) {
+                callback({ scrollX, scrollY }, event);
+            }
+            this._eventObj.emit('scroll', {
+                scrollX,
+                scrollY,
+                model: this
+            });
+        }
+        _bindScrollEventAsRegion(eventObj, regionOrSeries, callback, option) {
+            var _a, _b;
+            const delayType = (_a = option === null || option === void 0 ? void 0 : option.delayType) !== null && _a !== void 0 ? _a : 'throttle';
+            const delayTime = (_b = option === null || option === void 0 ? void 0 : option.delayTime) !== null && _b !== void 0 ? _b : 0;
+            eventObj.on(this._getTriggerEvent('scrollEnd'), { level: Event_Bubble_Level.chart, consume: false }, delayMap[delayType]((params) => {
+                this._zoomableTrigger.clearScroll();
+            }, delayTime));
+            eventObj.on(this._getTriggerEvent('scroll'), { level: Event_Bubble_Level.chart, consume: true }, delayMap[delayType]((params) => {
+                this._scrollEventDispatch(params, regionOrSeries, callback);
+            }, delayTime));
+        }
+        initScrollEventOfSeries(s, callback, option) {
             if (defaultTriggerEvent[this._renderMode]) {
-                this._bindScrollEventAsRegion(s.event, s, callback);
+                this._bindScrollEventAsRegion(s.event, s, callback, option);
             }
         }
-        initScrollEventOfRegions(regions, filter, callback) {
+        initScrollEventOfRegions(regions, filter, callback, option) {
             if (defaultTriggerEvent[this._renderMode]) {
                 regions.forEach(r => {
                     if (filter) {
                         r.getSeries().forEach(s => {
                             if (filter(s)) {
-                                this._bindScrollEventAsRegion(s.event, s, callback);
+                                this._bindScrollEventAsRegion(s.event, s, callback, option);
                             }
                         });
                     }
                     else {
-                        this._bindScrollEventAsRegion(this._eventObj, r, callback);
+                        this._bindScrollEventAsRegion(this._eventObj, r, callback, option);
                     }
                 });
             }
         }
-        _bindScrollEventAsRegion(eventObj, regionOrSeries, callback) {
-            eventObj.on(this._getTriggerEvent('scrollEnd'), { level: Event_Bubble_Level.chart, consume: false }, params => {
-                this._zoomableTrigger.clearScroll();
-            });
-            eventObj.on(this._getTriggerEvent('scroll'), { level: Event_Bubble_Level.chart, consume: true }, params => {
-                if (!params.event) {
-                    return;
-                }
-                const { event } = params;
-                this._zoomableTrigger.parserScrollEvent(event);
-                const { scrollX, scrollY } = event;
-                if (isNil$1(scrollX) && isNil$1(scrollY)) {
-                    return;
-                }
-                if (!isPointInRect({
-                    x: event.canvasX,
-                    y: event.canvasY
-                }, Object.assign(Object.assign({}, regionOrSeries.getLayoutRect()), regionOrSeries.getLayoutStartPoint()))) {
-                    return;
-                }
-                this._clickEnable = false;
-                if (callback) {
-                    callback({ scrollX, scrollY }, event);
-                }
-                this._eventObj.emit('scroll', {
-                    scrollX,
-                    scrollY,
-                    model: this
-                });
-            });
-        }
-        _bindDragEventAsRegion(eventObj, regionOrSeries, callback) {
-            eventObj.on(this._getTriggerEvent('start'), { level: Event_Bubble_Level.chart }, params => {
+        _bindDragEventAsRegion(eventObj, regionOrSeries, callback, option) {
+            eventObj.on(this._getTriggerEvent('start'), { level: Event_Bubble_Level.chart }, (params) => {
                 if (!params.event) {
                     return;
                 }
@@ -64150,21 +64452,21 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     y: event.canvasY
                 }, Object.assign(Object.assign({}, regionOrSeries.getLayoutRect()), regionOrSeries.getLayoutStartPoint()));
                 if (shouldTrigger) {
-                    this._handleDrag(params, callback);
+                    this._handleDrag(params, callback, option);
                 }
             });
             eventObj.on('click', { level: Event_Bubble_Level.chart }, () => {
                 return !this._clickEnable;
             });
         }
-        initDragEventOfSeries(s, callback) {
+        initDragEventOfSeries(s, callback, option) {
             if (defaultTriggerEvent[this._renderMode]) {
                 s.event.on(this._getTriggerEvent('start'), { level: Event_Bubble_Level.model, filter: ({ model }) => (model === null || model === void 0 ? void 0 : model.id) === s.id }, params => {
-                    this._handleDrag(params, callback);
+                    this._handleDrag(params, callback, option);
                 });
             }
         }
-        initDragEventOfRegions(regions, filter, callback) {
+        initDragEventOfRegions(regions, filter, callback, option) {
             if (defaultTriggerEvent[this._renderMode]) {
                 regions.forEach(r => {
                     if (filter) {
@@ -64180,45 +64482,65 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         });
                     }
                     else {
-                        this._bindDragEventAsRegion(this._eventObj, r, callback);
+                        this._bindDragEventAsRegion(this._eventObj, r, callback, option);
                     }
                 });
             }
         }
-        _handleDrag(params, callback) {
+        _handleDrag(params, callback, option) {
+            var _a, _b, _c;
             this._clickEnable = true;
             if (!this._zoomableTrigger.parserDragEvent(params.event)) {
                 return;
             }
+            const delayType = (_a = option === null || option === void 0 ? void 0 : option.delayType) !== null && _a !== void 0 ? _a : 'throttle';
+            const delayTime = (_b = option === null || option === void 0 ? void 0 : option.delayTime) !== null && _b !== void 0 ? _b : 0;
+            const realTime = (_c = option === null || option === void 0 ? void 0 : option.realTime) !== null && _c !== void 0 ? _c : true;
             const move = this._getTriggerEvent('move');
             const end = this._getTriggerEvent('end');
             const event = params.event;
-            let x = event.canvasX;
-            let y = event.canvasY;
-            const mouseup = () => {
+            let moveX = event.canvasX;
+            let moveY = event.canvasY;
+            let upX = event.canvasX;
+            let upY = event.canvasY;
+            const mouseup = delayMap[delayType]((params) => {
+                this._clickEnable = false;
+                const event = params.event;
+                const dx = event.canvasX - upX;
+                const dy = event.canvasY - upY;
+                const delta = [dx, dy];
+                upX = event.canvasX;
+                upY = event.canvasY;
+                if (!realTime && callback) {
+                    callback(delta, params.event);
+                }
+                this._eventObj.emit('panend', {
+                    delta,
+                    model: this
+                });
                 this._zoomableTrigger.pointerId = null;
                 this._eventObj.off(move, { level: Event_Bubble_Level.chart, source: Event_Source_Type.chart }, mousemove);
                 this._eventObj.off(end, { level: Event_Bubble_Level.chart, source: Event_Source_Type.window }, mouseup);
-            };
-            const mousemove = (params) => {
+            }, delayTime);
+            const mousemove = delayMap[delayType]((params) => {
                 if (!this._zoomableTrigger.parserDragEvent(params.event)) {
                     return;
                 }
                 this._clickEnable = false;
                 const event = params.event;
-                const dx = event.canvasX - x;
-                const dy = event.canvasY - y;
+                const dx = event.canvasX - moveX;
+                const dy = event.canvasY - moveY;
                 const delta = [dx, dy];
-                x = event.canvasX;
-                y = event.canvasY;
-                if (callback) {
+                moveX = event.canvasX;
+                moveY = event.canvasY;
+                if (realTime && callback) {
                     callback(delta, params.event);
                 }
                 this._eventObj.emit('panmove', {
                     delta,
                     model: this
                 });
-            };
+            }, delayTime);
             this._eventObj.on(move, { level: Event_Bubble_Level.chart, source: Event_Source_Type.chart }, mousemove);
             this._eventObj.on(end, { level: Event_Bubble_Level.chart, source: Event_Source_Type.chart }, mouseup);
         }
@@ -64624,7 +64946,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
         }
         initMarkStyle() {
-            var _a;
             const pathMark = this._pathMark;
             if (pathMark) {
                 this.setMarkStyle(pathMark, {
@@ -64647,7 +64968,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     smoothScale: true
                 }, 'normal', AttributeLevel.Built_In);
                 this._trigger.registerMark(pathMark);
-                (_a = this._tooltipHelper) === null || _a === void 0 ? void 0 : _a.activeTriggerSet.mark.add(pathMark);
             }
         }
         initLabelMarkStyle(labelMark) {
@@ -64670,6 +64990,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         initTooltip() {
             this._tooltipHelper = new MapSeriesTooltipHelper(this);
+            this._pathMark && this._tooltipHelper.activeTriggerSet.mark.add(this._pathMark);
         }
         getPath(datum) {
             var _a;
@@ -65338,7 +65659,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
         }
         initMarkStyle() {
-            var _a;
             const pieMark = this._pieMark;
             if (pieMark) {
                 this.setMarkStyle(pieMark, {
@@ -65358,9 +65678,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     centerOffset: this._centerOffset
                 }, 'normal', AttributeLevel.Series);
                 this._trigger.registerMark(pieMark);
-                (_a = this._tooltipHelper) === null || _a === void 0 ? void 0 : _a.activeTriggerSet.mark.add(pieMark);
             }
         }
+        initTooltip() {
+            super.initTooltip();
+            this._pieMark && this._tooltipHelper.activeTriggerSet.mark.add(this._pieMark);
+        }
         initMarkStyleWithSpec(mark, spec, key) {
             super.initMarkStyleWithSpec(mark, spec, key);
             if (mark.name === this._pieMarkName) {
@@ -65567,6 +65890,22 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         getActiveMarks() {
             return [this._pieMark];
         }
+        _mergeThemeToSpec() {
+            if (this._shouldMergeThemeToSpec()) {
+                const specFromChart = this._getDefaultSpecFromChart(this.getChart().getSpec());
+                const merge = (originalSpec) => {
+                    const chartSpec = this._prepareSpecBeforeMergingTheme(specFromChart);
+                    const userSpec = this._prepareSpecBeforeMergingTheme(originalSpec);
+                    const labelSpec = mergeSpec({}, this._theme.label, chartSpec.label, userSpec.label);
+                    const labelTheme = mergeSpec({}, this._theme.label, labelSpec.position === 'inside' ? this._theme.innerLabel : this._theme.outerLabel);
+                    const newTheme = Object.assign(Object.assign({}, this._theme), { label: labelTheme });
+                    return mergeSpec({}, newTheme, chartSpec, userSpec);
+                };
+                const baseSpec = this._spec;
+                this._spec = merge(baseSpec);
+            }
+            this._prepareSpecAfterMergingTheme();
+        }
     }
     BasePieSeries.mark = pieSeriesMark;
     class PieSeries extends BasePieSeries {
@@ -65675,7 +66014,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._angle3d = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.angle3d) !== null && _b !== void 0 ? _b : -Math.PI / 3;
         }
         initMarkStyle() {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
+            var _a, _b, _c, _d, _e, _f, _g;
             const pieMark = this._pieMark;
             if (pieMark) {
                 this.setMarkStyle(pieMark, {
@@ -65698,12 +66037,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     }
                 }
                 this._trigger.registerMark(pieMark);
-                (_a = this._tooltipHelper) === null || _a === void 0 ? void 0 : _a.activeTriggerSet.mark.add(pieMark);
             }
             const labelMark = this._labelMark;
             const spec = this.getSpec();
             const params3d = {};
-            if ((_b = spec === null || spec === void 0 ? void 0 : spec.label) === null || _b === void 0 ? void 0 : _b.support3d) {
+            if ((_a = spec === null || spec === void 0 ? void 0 : spec.label) === null || _a === void 0 ? void 0 : _a.support3d) {
                 params3d.beta = -Math.PI / 3;
                 params3d.anchor3d = (datum) => {
                     var _a, _b, _c, _d;
@@ -65715,7 +66053,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 };
             }
             if (labelMark) {
-                this.setMarkStyle(labelMark, Object.assign({ visible: field$2(DEFAULT_LABEL_VISIBLE).bind(this), x: field$2(DEFAULT_LABEL_X).bind(this), y: field$2(DEFAULT_LABEL_Y).bind(this), text: field$2(DEFAULT_LABEL_TEXT).bind(this), fill: ((_d = (_c = this._spec.label) === null || _c === void 0 ? void 0 : _c.style) === null || _d === void 0 ? void 0 : _d.fill) || this.getColorAttribute(), textAlign: field$2(DEFAULT_LABEL_ALIGN).bind(this), textBaseline: ((_e = this._spec.label) === null || _e === void 0 ? void 0 : _e.position) === 'inside' ? 'middle' : 'top', angle: (datum) => {
+                this.setMarkStyle(labelMark, Object.assign({ visible: field$2(DEFAULT_LABEL_VISIBLE).bind(this), x: field$2(DEFAULT_LABEL_X).bind(this), y: field$2(DEFAULT_LABEL_Y).bind(this), text: field$2(DEFAULT_LABEL_TEXT).bind(this), fill: ((_c = (_b = this._spec.label) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.fill) || this.getColorAttribute(), textAlign: field$2(DEFAULT_LABEL_ALIGN).bind(this), textBaseline: ((_d = this._spec.label) === null || _d === void 0 ? void 0 : _d.position) === 'inside' ? 'middle' : 'top', angle: (datum) => {
                         var _a;
                         const angle = datum[ARC_MIDDLE_ANGLE];
                         return ((_a = this._spec.label) === null || _a === void 0 ? void 0 : _a.position) === 'inside' ? radianToDegree(angle) : 0;
@@ -65724,7 +66062,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             const labelLineMark = this._labelLineMark;
             if (labelLineMark) {
-                this.setMarkStyle(labelLineMark, Object.assign(Object.assign(Object.assign({ visible: field$2(DEFAULT_LABEL_VISIBLE).bind(this), stroke: ((_h = (_g = (_f = this._spec.label) === null || _f === void 0 ? void 0 : _f.line) === null || _g === void 0 ? void 0 : _g.style) === null || _h === void 0 ? void 0 : _h.stroke) || this.getColorAttribute(), lineWidth: 1 }, this.generateLinePath('normal')), params3d), { anchor3d: () => {
+                this.setMarkStyle(labelLineMark, Object.assign(Object.assign(Object.assign({ visible: field$2(DEFAULT_LABEL_VISIBLE).bind(this), stroke: ((_g = (_f = (_e = this._spec.label) === null || _e === void 0 ? void 0 : _e.line) === null || _f === void 0 ? void 0 : _f.style) === null || _g === void 0 ? void 0 : _g.stroke) || this.getColorAttribute(), lineWidth: 1 }, this.generateLinePath('normal')), params3d), { anchor3d: () => {
                         var _a, _b, _c, _d;
                         return [
                             (_b = (_a = this._center) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : this._region.getLayoutRect().width / 2,
@@ -65895,7 +66233,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return angleBandWidth;
         }
         initRoseMarkStyle() {
-            var _a;
             const roseMark = this._roseMark;
             if (roseMark) {
                 this.setMarkStyle(roseMark, {
@@ -65920,9 +66257,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     }
                 });
                 this._trigger.registerMark(roseMark);
-                (_a = this._tooltipHelper) === null || _a === void 0 ? void 0 : _a.activeTriggerSet.mark.add(roseMark);
             }
         }
+        initTooltip() {
+            super.initTooltip();
+            this._roseMark && this._tooltipHelper.activeTriggerSet.mark.add(this._roseMark);
+        }
         initLabelMarkStyle(textMark) {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             if (!textMark) {
@@ -66275,7 +66615,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
         }
         initAreaMarkStyle() {
-            var _a;
             const areaMark = this._areaMark;
             if (areaMark) {
                 this.setMarkStyle(areaMark, {
@@ -66308,9 +66647,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     this.encodeDefined(areaMark, 'defined');
                 });
                 this._trigger.registerMark(areaMark);
-                (_a = this._tooltipHelper) === null || _a === void 0 ? void 0 : _a.activeTriggerSet.dimension.add(areaMark);
             }
         }
+        initTooltip() {
+            super.initTooltip();
+            this._lineMark && this._tooltipHelper.activeTriggerSet.dimension.add(this._lineMark);
+            this._symbolMark && this._tooltipHelper.activeTriggerSet.mark.add(this._symbolMark);
+            this._areaMark && this._tooltipHelper.activeTriggerSet.dimension.add(this._areaMark);
+        }
         initAnimation() {
             var _a, _b, _c, _d;
             const animationParams = {
@@ -66619,7 +66963,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
         }
         initMarkStyle() {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d;
             const clipMark = this._clipMark;
             if (clipMark) {
                 this.setMarkStyle(clipMark, {
@@ -66650,11 +66994,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     y1: this.dataToPositionYTo.bind(this)
                 }, 'normal', AttributeLevel.Series);
                 this._trigger.registerMark(linkMark);
-                (_a = this._tooltipHelper) === null || _a === void 0 ? void 0 : _a.activeTriggerSet.mark.add(linkMark);
             }
             const arrowMark = this._arrowMark;
             if (arrowMark) {
-                const arrowSize = (_e = (_d = (_c = (_b = this._theme) === null || _b === void 0 ? void 0 : _b.arrow) === null || _c === void 0 ? void 0 : _c.style) === null || _d === void 0 ? void 0 : _d.size) !== null && _e !== void 0 ? _e : 10;
+                const arrowSize = (_d = (_c = (_b = (_a = this._theme) === null || _a === void 0 ? void 0 : _a.arrow) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.size) !== null && _d !== void 0 ? _d : 10;
                 this.setMarkStyle(arrowMark, {
                     x: this.dataToPositionXTo.bind(this),
                     y: (datum) => this.dataToPositionArrowYTo(datum, arrowSize),
@@ -66666,7 +67009,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     }
                 }, 'normal', AttributeLevel.Series);
                 this._trigger.registerMark(arrowMark);
-                (_f = this._tooltipHelper) === null || _f === void 0 ? void 0 : _f.activeTriggerSet.mark.add(arrowMark);
             }
         }
         afterInitMark() {
@@ -66760,6 +67102,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         initTooltip() {
             this._tooltipHelper = new LinkSeriesTooltipHelper(this);
+            this._linkMark && this._tooltipHelper.activeTriggerSet.mark.add(this._linkMark);
+            this._arrowMark && this._tooltipHelper.activeTriggerSet.mark.add(this._arrowMark);
         }
         onMarkTreePositionUpdate(marks) {
             marks.forEach(m => {
@@ -67023,7 +67367,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
         }
         initMarkStyle() {
-            var _a;
             const clipMark = this._clipMark;
             if (clipMark) {
                 this.setMarkStyle(clipMark, {
@@ -67074,7 +67417,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     fillOpacity: this.dataToOpacity.bind(this)
                 }, 'normal', AttributeLevel.Series);
                 this._trigger.registerMark(dotMark);
-                (_a = this._tooltipHelper) === null || _a === void 0 ? void 0 : _a.activeTriggerSet.mark.add(dotMark);
             }
             const titleMark = this._titleMark;
             if (titleMark) {
@@ -67196,6 +67538,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         initTooltip() {
             this._tooltipHelper = new DotSeriesTooltipHelper(this);
+            this._dotMark && this._tooltipHelper.activeTriggerSet.mark.add(this._dotMark);
         }
         onEvaluateEnd(ctx) {
             super.onEvaluateEnd(ctx);
@@ -67375,7 +67718,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         if (dataLength) {
                             ratio = ((seriesSpec === null || seriesSpec === void 0 ? void 0 : seriesSpec.height) || defaultSeriesRowHeight) / (dataLength * 30);
                         }
-                        scrollBar.push(Object.assign({ orient: 'right', visible: seriesSpec.type === SeriesTypeEnum.dot && ratio < 1, id: `scrollBarRightRow${rowNum}`, start: 0, end: Math.min(ratio, 1), roam: false, filterMode: IFilterMode.axis, regionIndex: region.length - 1, axisId: `axesLeftRow${rowNum}` }, array(spec === null || spec === void 0 ? void 0 : spec.scrollBar)[0]));
+                        scrollBar.push(Object.assign({ orient: 'right', visible: seriesSpec.type === SeriesTypeEnum.dot && ratio < 1, id: `scrollBarRightRow${rowNum}`, start: 0, end: Math.min(ratio, 1), filterMode: IFilterMode.axis, regionIndex: region.length - 1, axisId: `axesLeftRow${rowNum}` }, array(spec === null || spec === void 0 ? void 0 : spec.scrollBar)[0]));
                     }
                     seriesSpec.regionIndex = region.length - 1;
                     rowNum++;
@@ -67896,7 +68239,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return this._progressMark;
         }
         _initProgressMarkStyle() {
-            var _a, _b;
+            var _a;
             const progressMark = this._progressMark;
             if (progressMark) {
                 this.setMarkStyle(progressMark, {
@@ -67914,9 +68257,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     forceShowCap: true
                 }, 'normal', AttributeLevel.Series);
                 this._trigger.registerMark(progressMark);
-                (_b = this._tooltipHelper) === null || _b === void 0 ? void 0 : _b.activeTriggerSet.mark.add(progressMark);
             }
         }
+        initTooltip() {
+            super.initTooltip();
+            this._progressMark && this._tooltipHelper.activeTriggerSet.mark.add(this._progressMark);
+        }
         _initTrackMark() {
             this._trackMark = this._createMark(CircularProgressSeries.mark.track, {
                 parent: this._arcGroupMark
@@ -68033,7 +68379,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         initGroups() {
         }
         initPointerMarkStyle() {
-            var _a;
             const pointerMark = this._pointerMark;
             const pointerSpec = this._spec.pointer;
             if (pointerMark) {
@@ -68072,9 +68417,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     });
                 }
                 this._trigger.registerMark(pointerMark);
-                (_a = this._tooltipHelper) === null || _a === void 0 ? void 0 : _a.activeTriggerSet.mark.add(pointerMark);
             }
         }
+        initTooltip() {
+            super.initTooltip();
+            this._pointerMark && this._tooltipHelper.activeTriggerSet.mark.add(this._pointerMark);
+        }
         _getPointerWidth() {
             return this._spec.pointer.width * this._computeLayoutRadius();
         }
@@ -68211,7 +68559,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.initSegmentMarkStyle();
         }
         initSegmentMarkStyle() {
-            var _a, _b;
+            var _a;
             const segmentMark = this._segmentMark;
             if (segmentMark) {
                 this.setMarkStyle(segmentMark, {
@@ -68230,9 +68578,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 });
                 segmentMark.setLabelSpec(this._preprocessLabelSpec());
                 this._trigger.registerMark(segmentMark);
-                (_b = this._tooltipHelper) === null || _b === void 0 ? void 0 : _b.activeTriggerSet.mark.add(segmentMark);
             }
         }
+        initTooltip() {
+            super.initTooltip();
+            this._segmentMark && this._tooltipHelper.activeTriggerSet.mark.add(this._segmentMark);
+        }
         initTrackMarkStyle() {
             const trackMark = this._trackMark;
             if (trackMark) {
@@ -68507,7 +68858,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         initMarkStyle() {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
             const wordMark = this._wordMark;
             const fillingWordMark = this._fillingWordMark;
             const textField = ((_a = this._spec.word) === null || _a === void 0 ? void 0 : _a.formatMethod) ? WORD_CLOUD_TEXT : this._nameField;
@@ -68550,9 +68901,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }, 'normal', AttributeLevel.User_Mark);
             }
             this._trigger.registerMark(wordMark);
-            (_m = this._tooltipHelper) === null || _m === void 0 ? void 0 : _m.activeTriggerSet.mark.add(wordMark);
             this._trigger.registerMark(fillingWordMark);
-            (_o = this._tooltipHelper) === null || _o === void 0 ? void 0 : _o.activeTriggerSet.mark.add(fillingWordMark);
+        }
+        initTooltip() {
+            super.initTooltip();
+            this._wordMark && this._tooltipHelper.activeTriggerSet.mark.add(this._wordMark);
+            this._fillingWordMark && this._tooltipHelper.activeTriggerSet.mark.add(this._fillingWordMark);
         }
         initAnimation() {
             [this._wordMark, this._fillingWordMark].forEach(mark => {
@@ -70930,7 +71284,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         initMarkStyle() {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
             const wordMark = this._wordMark;
             const fillingWordMark = this._fillingWordMark;
             if (wordMark) {
@@ -70974,9 +71328,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }, 'normal', AttributeLevel.User_Mark);
             }
             this._trigger.registerMark(wordMark);
-            (_l = this._tooltipHelper) === null || _l === void 0 ? void 0 : _l.activeTriggerSet.mark.add(wordMark);
             this._trigger.registerMark(fillingWordMark);
-            (_m = this._tooltipHelper) === null || _m === void 0 ? void 0 : _m.activeTriggerSet.mark.add(fillingWordMark);
         }
         initAnimation() {
             var _a, _b;
@@ -71263,6 +71615,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         initTooltip() {
             this._tooltipHelper = new FunnelSeriesTooltipHelper(this);
+            this._funnelMark && this._tooltipHelper.activeTriggerSet.mark.add(this._funnelMark);
+            this._funnelTransformMark && this._tooltipHelper.activeTriggerSet.mark.add(this._funnelTransformMark);
         }
         getDimensionField() {
             return this._seriesField ? [this._seriesField] : [];
@@ -71274,7 +71628,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return null;
         }
         initMarkStyle() {
-            var _a, _b;
             const funnelMark = this._funnelMark;
             if (funnelMark) {
                 this.setMarkStyle(funnelMark, {
@@ -71283,13 +71636,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     fill: this.getColorAttribute()
                 }, 'normal', AttributeLevel.Series);
                 this._trigger.registerMark(funnelMark);
-                (_a = this._tooltipHelper) === null || _a === void 0 ? void 0 : _a.activeTriggerSet.mark.add(funnelMark);
             }
             const funnelTransformMark = this._funnelTransformMark;
             if (funnelTransformMark) {
                 this.setMarkStyle(funnelTransformMark, { points: (datum) => this.getPoints(datum) }, 'normal', AttributeLevel.Series);
                 this._trigger.registerMark(funnelTransformMark);
-                (_b = this._tooltipHelper) === null || _b === void 0 ? void 0 : _b.activeTriggerSet.mark.add(funnelTransformMark);
             }
             const outerLabelMark = this._funnelOuterLabelMark.label;
             if (outerLabelMark) {
@@ -71992,7 +72343,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return this._progressMark;
         }
         _initProgressMarkStyle() {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            var _a, _b, _c, _d, _e, _f, _g, _h;
             const progressMark = this._progressMark;
             if (progressMark) {
                 if (this._spec.direction === 'vertical') {
@@ -72034,7 +72385,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     }, 'normal', AttributeLevel.Series);
                 }
                 this._trigger.registerMark(progressMark);
-                (_j = this._tooltipHelper) === null || _j === void 0 ? void 0 : _j.activeTriggerSet.mark.add(progressMark);
             }
         }
         _initTrackMark() {
@@ -72044,7 +72394,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return this._trackMark;
         }
         _initTrackMarkStyle() {
-            var _a;
             const trackMark = this._trackMark;
             if (trackMark) {
                 if (this._spec.direction === 'vertical') {
@@ -72074,7 +72423,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     }, 'normal', AttributeLevel.Series);
                 }
                 this._trigger.registerMark(trackMark);
-                (_a = this._tooltipHelper) === null || _a === void 0 ? void 0 : _a.activeTriggerSet.mark.add(trackMark);
             }
         }
         _initProgressGroupMark() {
@@ -72139,6 +72487,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         initTooltip() {
             this._tooltipHelper = new LinearProgressSeriesTooltipHelper(this);
+            this._progressMark && this._tooltipHelper.activeTriggerSet.mark.add(this._progressMark);
+            this._trackMark && this._tooltipHelper.activeTriggerSet.mark.add(this._trackMark);
         }
         getActiveMarks() {
             return [this._progressMark];
@@ -72502,7 +72852,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         initMarkStyle() {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
             super.initMarkStyle();
             const minLabelMark = this._minLabelMark;
             const minLabelSpec = (_a = this._spec.label) === null || _a === void 0 ? void 0 : _a.minLabel;
@@ -72530,13 +72880,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         : this._rectMark.getAttribute('y', datum) +
                             this._rectMark.getAttribute('height', datum);
                 }, () => this._direction);
-                (_f = this._tooltipHelper) === null || _f === void 0 ? void 0 : _f.ignoreTriggerSet.mark.add(minLabelMark);
             }
             const maxLabelMark = this._maxLabelMark;
-            const maxLabelSpec = (_g = this._spec.label) === null || _g === void 0 ? void 0 : _g.maxLabel;
+            const maxLabelSpec = (_f = this._spec.label) === null || _f === void 0 ? void 0 : _f.maxLabel;
             if (maxLabelMark) {
                 this.setMarkStyle(maxLabelMark, {
-                    fill: (_j = (_h = maxLabelSpec === null || maxLabelSpec === void 0 ? void 0 : maxLabelSpec.style) === null || _h === void 0 ? void 0 : _h.fill) !== null && _j !== void 0 ? _j : this.getColorAttribute(),
+                    fill: (_h = (_g = maxLabelSpec === null || maxLabelSpec === void 0 ? void 0 : maxLabelSpec.style) === null || _g === void 0 ? void 0 : _g.fill) !== null && _h !== void 0 ? _h : this.getColorAttribute(),
                     text: (datum) => {
                         const max = this._spec.direction === Direction.horizontal ? datum[this._spec.xField[1]] : datum[this._spec.yField[1]];
                         if (maxLabelSpec === null || maxLabelSpec === void 0 ? void 0 : maxLabelSpec.formatMethod) {
@@ -72545,8 +72894,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         return max;
                     }
                 });
-                const position = (_k = maxLabelSpec === null || maxLabelSpec === void 0 ? void 0 : maxLabelSpec.position) !== null && _k !== void 0 ? _k : 'start';
-                const offset = (_l = maxLabelSpec === null || maxLabelSpec === void 0 ? void 0 : maxLabelSpec.offset) !== null && _l !== void 0 ? _l : (this._direction === 'vertical' ? -20 : -25);
+                const position = (_j = maxLabelSpec === null || maxLabelSpec === void 0 ? void 0 : maxLabelSpec.position) !== null && _j !== void 0 ? _j : 'start';
+                const offset = (_k = maxLabelSpec === null || maxLabelSpec === void 0 ? void 0 : maxLabelSpec.offset) !== null && _k !== void 0 ? _k : (this._direction === 'vertical' ? -20 : -25);
                 setRectLabelPos(this, maxLabelMark, position, offset, (datum) => this._rectMark.getAttribute('x', datum), (datum) => {
                     return this._direction === 'vertical'
                         ? this._rectMark.getAttribute('x', datum) +
@@ -72558,11 +72907,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         : this._rectMark.getAttribute('y', datum) +
                             this._rectMark.getAttribute('height', datum);
                 }, () => this._direction);
-                (_m = this._tooltipHelper) === null || _m === void 0 ? void 0 : _m.ignoreTriggerSet.mark.add(maxLabelMark);
             }
         }
         initLabelMarkStyle(labelMark) {
-            var _a;
             if (!labelMark) {
                 return;
             }
@@ -72582,7 +72929,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 },
                 z: this._fieldZ ? this.dataToPositionZ.bind(this) : null
             });
-            (_a = this._tooltipHelper) === null || _a === void 0 ? void 0 : _a.ignoreTriggerSet.mark.add(labelMark);
+            this._labelMark = labelMark;
         }
         initBandRectMarkStyle() {
             var _a, _b, _c, _d;
@@ -72635,6 +72982,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         initTooltip() {
             this._tooltipHelper = new RangeColumnSeriesTooltipHelper(this);
+            this._minLabelMark && this._tooltipHelper.ignoreTriggerSet.mark.add(this._minLabelMark);
+            this._maxLabelMark && this._tooltipHelper.ignoreTriggerSet.mark.add(this._maxLabelMark);
+            this._labelMark && this._tooltipHelper.ignoreTriggerSet.mark.add(this._labelMark);
         }
     }
     RangeColumnSeries.type = SeriesTypeEnum.rangeColumn;
@@ -73822,7 +74172,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._initLabelMarkStyle();
         }
         _initArcMark() {
-            var _a;
             if (this._sunburst.visible === false) {
                 return;
             }
@@ -73831,7 +74180,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
             this._sunburstMark = sunburstMark;
             this._trigger.registerMark(this._sunburstMark);
-            (_a = this._tooltipHelper) === null || _a === void 0 ? void 0 : _a.activeTriggerSet.mark.add(this._sunburstMark);
         }
         _initArcMarkStyle() {
             if (isNil$1(this._sunburstMark)) {
@@ -73848,7 +74196,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series);
         }
         _initLabelMark() {
-            var _a;
             if (this._label.visible !== true) {
                 return;
             }
@@ -73857,7 +74204,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
             this._labelMark = labelMark;
             this._trigger.registerMark(labelMark);
-            (_a = this._tooltipHelper) === null || _a === void 0 ? void 0 : _a.activeTriggerSet.mark.add(labelMark);
         }
         _initLabelMarkStyle() {
             if (isNil$1(this._labelMark)) {
@@ -73884,6 +74230,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         initTooltip() {
             this._tooltipHelper = new SunburstTooltipHelper(this);
+            this._sunburstMark && this._tooltipHelper.activeTriggerSet.mark.add(this._sunburstMark);
+            this._labelMark && this._tooltipHelper.activeTriggerSet.mark.add(this._labelMark);
         }
         initAnimation() {
             var _a, _b;
@@ -74157,7 +74505,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._initLabelMarkStyle();
         }
         _initCirclePackingMark() {
-            var _a, _b;
+            var _a;
             if (((_a = this._circlePacking) === null || _a === void 0 ? void 0 : _a.visible) === false) {
                 return;
             }
@@ -74166,7 +74514,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
             this._circlePackingMark = circlePacking;
             this._trigger.registerMark(circlePacking);
-            (_b = this._tooltipHelper) === null || _b === void 0 ? void 0 : _b.activeTriggerSet.mark.add(circlePacking);
         }
         _initCirclePackingMarkStyle() {
             if (isNil$1(this._circlePackingMark)) {
@@ -74184,7 +74531,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series);
         }
         _initLabelMark() {
-            var _a, _b;
+            var _a;
             if (((_a = this._label) === null || _a === void 0 ? void 0 : _a.visible) === false) {
                 return;
             }
@@ -74193,7 +74540,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
             this._labelMark = labelMark;
             this._trigger.registerMark(labelMark);
-            (_b = this._tooltipHelper) === null || _b === void 0 ? void 0 : _b.activeTriggerSet.mark.add(labelMark);
         }
         _initLabelMarkStyle() {
             if (isNil$1(this._labelMark)) {
@@ -74231,6 +74577,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         initTooltip() {
             this._tooltipHelper = new CirclePackingTooltipHelper(this);
+            this._tooltipHelper.updateTooltipSpec();
+            this._circlePackingMark && this._tooltipHelper.activeTriggerSet.mark.add(this._circlePackingMark);
+            this._labelMark && this._tooltipHelper.activeTriggerSet.mark.add(this._labelMark);
         }
         initAnimation() {
             var _a, _b;
@@ -74539,7 +74888,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             ]);
         }
         initMark() {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b;
             const nonLeafMark = this._createMark(TreemapSeries.mark.nonLeaf, { isSeriesMark: true });
             if (nonLeafMark) {
                 nonLeafMark.setTransform([
@@ -74552,7 +74901,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 ]);
                 this._trigger.registerMark(nonLeafMark);
                 this._nonLeafMark = nonLeafMark;
-                (_a = this._tooltipHelper) === null || _a === void 0 ? void 0 : _a.activeTriggerSet.mark.add(nonLeafMark);
             }
             const leafMark = this._createMark(TreemapSeries.mark.leaf, { isSeriesMark: true });
             if (leafMark) {
@@ -74566,9 +74914,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 ]);
                 this._leafMark = leafMark;
                 this._trigger.registerMark(leafMark);
-                (_b = this._tooltipHelper) === null || _b === void 0 ? void 0 : _b.activeTriggerSet.mark.add(leafMark);
             }
-            if ((_c = this._spec.label) === null || _c === void 0 ? void 0 : _c.visible) {
+            if ((_a = this._spec.label) === null || _a === void 0 ? void 0 : _a.visible) {
                 const textMark = this._createMark(TreemapSeries.mark.label, {
                     skipBeforeLayouted: false
                 });
@@ -74583,10 +74930,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     ]);
                     this._labelMark = textMark;
                     this._trigger.registerMark(textMark);
-                    (_d = this._tooltipHelper) === null || _d === void 0 ? void 0 : _d.activeTriggerSet.mark.add(textMark);
                 }
             }
-            if ((_e = this._spec.nonLeafLabel) === null || _e === void 0 ? void 0 : _e.visible) {
+            if ((_b = this._spec.nonLeafLabel) === null || _b === void 0 ? void 0 : _b.visible) {
                 const textMark = this._createMark(TreemapSeries.mark.nonLeafLabel);
                 if (textMark) {
                     textMark.setTransform([
@@ -74599,7 +74945,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     ]);
                     this._nonLeafLabelMark = textMark;
                     this._trigger.registerMark(textMark);
-                    (_f = this._tooltipHelper) === null || _f === void 0 ? void 0 : _f.activeTriggerSet.mark.add(textMark);
                 }
             }
         }
@@ -74716,6 +75061,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         initTooltip() {
             this._tooltipHelper = new TreemapTooltipHelper(this);
+            this._nonLeafLabelMark && this._tooltipHelper.activeTriggerSet.mark.add(this._nonLeafMark);
+            this._leafMark && this._tooltipHelper.activeTriggerSet.mark.add(this._leafMark);
+            this._labelMark && this._tooltipHelper.activeTriggerSet.mark.add(this._labelMark);
+            this._nonLeafLabelMark && this._tooltipHelper.activeTriggerSet.mark.add(this._nonLeafLabelMark);
         }
         _shouldFilterElement(datum, nodeType) {
             const isLeaf = datum.isLeaf;
@@ -75518,7 +75867,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         transformSpec(spec) {
             super.transformSpec(spec);
             if (spec.legends) {
-                array(spec.legends).forEach(l => {
+                array(spec.legends).forEach((l) => {
                     l.select = false;
                     l.hover = false;
                     l.filter = false;
@@ -75825,7 +76174,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
         }
         initMarkStyle() {
-            var _a, _b, _c, _d, _e, _f, _g;
+            var _a, _b, _c, _d, _e;
             const boxPlotMark = this._boxPlotMark;
             if (boxPlotMark) {
                 const commonBoxplotStyles = {
@@ -75840,17 +76189,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     ? Object.assign(Object.assign({ x: this.dataToPositionX.bind(this) }, commonBoxplotStyles), { boxWidth: () => { var _a; return (_a = this._boxWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth(); }, ruleWidth: () => { var _a; return (_a = this._shaftWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth(); }, q1q3Width: () => { var _a; return (_a = this._boxWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth(); }, minMaxWidth: () => { var _a; return (_a = this._shaftWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth(); } }) : Object.assign(Object.assign({ y: this.dataToPositionY.bind(this) }, commonBoxplotStyles), { boxHeight: () => { var _a; return (_a = this._boxWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth(); }, ruleHeight: () => { var _a; return (_a = this._shaftWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth(); }, q1q3Height: () => { var _a; return (_a = this._boxWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth(); }, minMaxHeight: () => { var _a; return (_a = this._shaftWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth(); } });
                 this.setMarkStyle(boxPlotMark, boxPlotMarkStyles, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series);
                 this._trigger.registerMark(boxPlotMark);
-                (_c = this._tooltipHelper) === null || _c === void 0 ? void 0 : _c.activeTriggerSet.mark.add(boxPlotMark);
             }
             const outlierMark = this._outlierMark;
             if (outlierMark) {
                 this.setMarkStyle(outlierMark, {
-                    fill: (_e = (_d = this._outliersStyle) === null || _d === void 0 ? void 0 : _d.fill) !== null && _e !== void 0 ? _e : this.getColorAttribute(),
-                    size: isNumber$2((_f = this._outliersStyle) === null || _f === void 0 ? void 0 : _f.size) ? this._outliersStyle.size : DEFAULT_OUTLIER_SIZE,
+                    fill: (_d = (_c = this._outliersStyle) === null || _c === void 0 ? void 0 : _c.fill) !== null && _d !== void 0 ? _d : this.getColorAttribute(),
+                    size: isNumber$2((_e = this._outliersStyle) === null || _e === void 0 ? void 0 : _e.size) ? this._outliersStyle.size : DEFAULT_OUTLIER_SIZE,
                     symbolType: 'circle'
                 }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series);
                 this._trigger.registerMark(outlierMark);
-                (_g = this._tooltipHelper) === null || _g === void 0 ? void 0 : _g.activeTriggerSet.mark.add(outlierMark);
             }
         }
         initBoxPlotMarkStyle() {
@@ -75946,7 +76293,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._autoBoxWidth = null;
         }
         _initAnimationSpec(config = {}) {
-            const newConfig = Object.assign({}, config);
+            const newConfig = merge$1({}, config);
             ['appear', 'enter', 'update', 'exit', 'disappear'].forEach(state => {
                 if (newConfig[state] && newConfig[state].type === 'scaleIn') {
                     newConfig[state].type = this._shaftShape === 'line' ? 'boxplotScaleIn' : 'barBoxplotScaleIn';
@@ -75986,6 +76333,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         initTooltip() {
             this._tooltipHelper = new BoxPlotSeriesTooltipHelper(this);
+            this._boxPlotMark && this._tooltipHelper.activeTriggerSet.mark.add(this._boxPlotMark);
+            this._outlierMark && this._tooltipHelper.activeTriggerSet.mark.add(this._outlierMark);
         }
         getStatisticFields() {
             const fields = super.getStatisticFields();
@@ -77458,7 +77807,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._initLabelMarkStyle();
         }
         _initNodeMarkStyle() {
-            var _a;
             const nodeMark = this._nodeMark;
             if (!nodeMark) {
                 return;
@@ -77476,10 +77824,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
             }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Mark);
             this._trigger.registerMark(nodeMark);
-            (_a = this._tooltipHelper) === null || _a === void 0 ? void 0 : _a.activeTriggerSet.mark.add(nodeMark);
         }
         _initLinkMarkStyle() {
-            var _a, _b;
+            var _a;
             const linkMark = this._linkMark;
             if (!linkMark) {
                 return;
@@ -77500,10 +77847,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 direction: (_a = this._spec.direction) !== null && _a !== void 0 ? _a : 'horizontal'
             }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series);
             this._trigger.registerMark(linkMark);
-            (_b = this._tooltipHelper) === null || _b === void 0 ? void 0 : _b.activeTriggerSet.mark.add(linkMark);
         }
         _initLabelMarkStyle() {
-            var _a;
             if (!this._labelMark) {
                 return;
             }
@@ -77655,7 +78000,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             this._labelMark.setZIndex(this._labelLayoutZIndex);
             this._trigger.registerMark(this._labelMark);
-            (_a = this._tooltipHelper) === null || _a === void 0 ? void 0 : _a.activeTriggerSet.mark.add(this._labelMark);
         }
         _createText(datum) {
             var _a;
@@ -77722,6 +78066,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         initTooltip() {
             this._tooltipHelper = new SankeySeriesTooltipHelper(this);
+            this._nodeMark && this._tooltipHelper.activeTriggerSet.mark.add(this._nodeMark);
+            this._linkMark && this._tooltipHelper.activeTriggerSet.mark.add(this._linkMark);
+            this._labelMark && this._tooltipHelper.activeTriggerSet.mark.add(this._labelMark);
         }
         getNodeOrdinalColorScale(item) {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
@@ -77997,11 +78344,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     curveType
                 }, 'normal', AttributeLevel.Built_In);
                 this._trigger.registerMark(areaMark);
-                this._tooltipHelper.activeTriggerSet.dimension.add(areaMark);
             }
         }
         initTooltip() {
             this._tooltipHelper = new RangeAreaSeriesTooltipHelper(this);
+            this._areaMark && this._tooltipHelper.activeTriggerSet.dimension.add(this._areaMark);
         }
         viewDataStatisticsUpdate(d) {
             super.viewDataStatisticsUpdate(d);
@@ -78120,7 +78467,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
         }
         initCellMarkStyle() {
-            var _a;
             this.setMarkStyle(this._cellMark, {
                 x: (datum) => {
                     const pos = this.dataToPositionX(datum);
@@ -78136,7 +78482,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 fill: this.getColorAttribute()
             }, 'normal', AttributeLevel.Series);
             this._trigger.registerMark(this._cellMark);
-            (_a = this._tooltipHelper) === null || _a === void 0 ? void 0 : _a.activeTriggerSet.mark.add(this._cellMark);
         }
         initCellBackgroundMarkStyle() {
             var _a, _b, _c;
@@ -78186,6 +78531,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         initTooltip() {
             this._tooltipHelper = new HeatmapSeriesTooltipHelper(this);
+            this._cellMark && this._tooltipHelper.activeTriggerSet.mark.add(this._cellMark);
         }
         getDefaultShapeType() {
             return 'square';
@@ -78227,6 +78573,467 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         Factory.registerChart(HeatmapChart.type, HeatmapChart);
     };
 
+    const correlation = (data, options) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        if (!data || !(options === null || options === void 0 ? void 0 : options.view) || !isArray$1(data)) {
+            return data;
+        }
+        const viewBox = options.view();
+        if (viewBox.x1 - viewBox.x0 === 0 ||
+            viewBox.y1 - viewBox.y0 === 0 ||
+            viewBox.x1 - viewBox.x0 === -Infinity ||
+            viewBox.x1 - viewBox.x0 === Infinity ||
+            viewBox.y1 - viewBox.y0 === -Infinity ||
+            viewBox.y1 - viewBox.y0 === Infinity) {
+            return data;
+        }
+        const startAngle = degreeToRadian((_a = options.startAngle) !== null && _a !== void 0 ? _a : -90);
+        const endAngle = degreeToRadian((_b = options.endAngle) !== null && _b !== void 0 ? _b : 270);
+        const maxRadius = Math.max((viewBox.x1 - viewBox.x0) / 2, (viewBox.y1 - viewBox.y0) / 2);
+        const innerRadius = toPercent((_c = options.innerRadius) !== null && _c !== void 0 ? _c : 0, maxRadius);
+        const outerRadius = toPercent(options.outerRadius, maxRadius);
+        const center = [
+            isNumber$2((_d = options.center) === null || _d === void 0 ? void 0 : _d[0])
+                ? options.center[0]
+                : viewBox.x0 + toPercent((_f = (_e = options.center) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : '50%', viewBox.x1 - viewBox.x0),
+            isNumber$2((_g = options.center) === null || _g === void 0 ? void 0 : _g[1])
+                ? options.center[1]
+                : viewBox.y0 + toPercent((_j = (_h = options.center) === null || _h === void 0 ? void 0 : _h[1]) !== null && _j !== void 0 ? _j : '50%', viewBox.y1 - viewBox.y0)
+        ];
+        const fieldAccessor = field$3(options.field);
+        const values = data.map(fieldAccessor);
+        const [min, max] = extent$2(values);
+        const radiusScale = min === max
+            ? (val) => (innerRadius + outerRadius) / 2
+            : (val) => innerRadius + ((outerRadius - innerRadius) * (val - min)) / (max - min);
+        const sizeAccessor = !isNil$1(options.radiusField) ? field$3(options.radiusField) : fieldAccessor;
+        const defaultSize = (_l = (_k = options === null || options === void 0 ? void 0 : options.radiusRange) === null || _k === void 0 ? void 0 : _k[1]) !== null && _l !== void 0 ? _l : 5;
+        let sizeScale = (datum) => defaultSize;
+        if (sizeAccessor) {
+            const [minSize, maxSize] = sizeAccessor !== fieldAccessor ? extent$2(data.map(sizeAccessor)) : [min, max];
+            const minR = (_o = (_m = options.radiusRange) === null || _m === void 0 ? void 0 : _m[0]) !== null && _o !== void 0 ? _o : 5;
+            const maxR = (_q = (_p = options.radiusRange) === null || _p === void 0 ? void 0 : _p[1]) !== null && _q !== void 0 ? _q : 5;
+            if (minSize !== maxSize) {
+                sizeScale = (datum) => minR + ((maxR - minR) * (sizeAccessor(datum) - minSize)) / (maxSize - minSize);
+            }
+        }
+        const minAngle = Math.min(startAngle, endAngle);
+        const maxAngle = Math.max(startAngle, endAngle);
+        const angles = getPartialAngles(minAngle, maxAngle, data.length);
+        const res = [];
+        const searchStep = 60;
+        const searchAngle = (maxAngle - minAngle) / searchStep;
+        data.forEach((datum, index) => {
+            const radius = radiusScale(values[index]);
+            const size = sizeScale(datum);
+            let x;
+            let y;
+            let angle = angles[index];
+            for (let i = 0; i < searchStep; i++) {
+                x = center[0] + radius * Math.cos(angle);
+                y = center[1] + radius * Math.sin(angle);
+                if (hasOverlap({ x, y, size }, res) ||
+                    x - size < viewBox.x0 ||
+                    x + size > viewBox.x1 ||
+                    y - size < viewBox.y0 ||
+                    y + size > viewBox.y1) {
+                    if (i < searchStep - 1) {
+                        angle += searchAngle;
+                        if (angle > maxAngle) {
+                            angle = minAngle;
+                        }
+                        else if (angle < minAngle) {
+                            angle = maxAngle;
+                        }
+                    }
+                    continue;
+                }
+                else {
+                    break;
+                }
+            }
+            res.push(Object.assign({ [CORRELATION_X]: x, [CORRELATION_Y]: y, [CORRELATION_SIZE]: size }, datum));
+        });
+        return res;
+    };
+    const getPartialAngles = (minAngle, maxAngle, count) => {
+        let offsetAngle = 0;
+        let stepCount = Math.max(Math.ceil((2 * (maxAngle - minAngle)) / Math.PI), 2);
+        let stepAngle = (maxAngle - minAngle) / stepCount;
+        let stepIndex = 0;
+        let stepSign = 1;
+        let i = 0;
+        let j = 0;
+        const res = [];
+        let startAngle = minAngle;
+        while (i < count) {
+            if (j < stepCount) {
+                res.push(startAngle + (j % 2 ? Math.floor(j / 2) + Math.floor(stepCount / 2) : j / 2) * stepAngle * stepSign);
+                j++;
+            }
+            i++;
+            if (j === stepCount) {
+                j = 0;
+                stepIndex += 1;
+                stepSign *= -1;
+                if (offsetAngle === 0) {
+                    offsetAngle = stepAngle / 2;
+                }
+                else {
+                    offsetAngle /= 2;
+                }
+                startAngle = stepSign === -1 ? maxAngle - offsetAngle : minAngle + offsetAngle;
+                if (stepIndex >= 2) {
+                    stepAngle /= 2;
+                    stepCount *= 2;
+                }
+            }
+        }
+        return res;
+    };
+    const hasOverlap = (item, arr) => {
+        if (!arr || !arr.length) {
+            return false;
+        }
+        return arr.some(entry => {
+            return Math.pow(item.x - entry.x, 2) + Math.pow(item.y - entry.y, 2) < Math.pow(item.size + entry.size, 2);
+        });
+    };
+
+    const correlationCenter = (data, options) => {
+        if (!data || !isArray$1(data)) {
+            return [];
+        }
+        const { keyword, categoryField } = options;
+        const nodeInfo = data[0].latestData[0];
+        const centerInfo = {
+            [categoryField]: keyword,
+            [DEFAULT_DATA_INDEX]: nodeInfo === null || nodeInfo === void 0 ? void 0 : nodeInfo[DEFAULT_DATA_INDEX],
+            [DEFAULT_DATA_SERIES_FIELD]: nodeInfo === null || nodeInfo === void 0 ? void 0 : nodeInfo[DEFAULT_DATA_SERIES_FIELD]
+        };
+        return centerInfo;
+    };
+
+    const correlationPresetAnimation = (_params, preset) => {
+        switch (preset) {
+            case 'fadeIn': {
+                return {
+                    type: 'fadeIn'
+                };
+            }
+            case 'scaleIn': {
+                return {
+                    type: 'scaleIn'
+                };
+            }
+            default: {
+                return {
+                    type: 'scaleIn'
+                };
+            }
+        }
+    };
+    const registerCorrelationAnimation = () => {
+        Factory.registerAnimation('correlation', (params, preset) => (Object.assign({ appear: correlationPresetAnimation(params, preset) }, ScaleInOutAnimation)));
+    };
+
+    class CorrelationSeries extends PolarSeries {
+        constructor() {
+            super(...arguments);
+            this.type = SeriesTypeEnum.correlation;
+            this._viewBox = new Bounds();
+        }
+        getCategoryField() {
+            return this._categoryField;
+        }
+        setCategoryField(f) {
+            this._categoryField = f;
+            return this._categoryField;
+        }
+        getValueField() {
+            return this._valueField;
+        }
+        setValueField(f) {
+            this._valueField = f;
+            return this._valueField;
+        }
+        getSeriesField() {
+            return this._seriesField;
+        }
+        setSeriesField(field) {
+            if (isValid$1(field)) {
+                this._seriesField = field;
+            }
+        }
+        getSizeField() {
+            return this._sizeField;
+        }
+        setSizeField(field) {
+            if (isValid$1(field)) {
+                this._sizeField = field;
+            }
+        }
+        getSizeRange() {
+            return this._sizeRange;
+        }
+        setSizeRange(range) {
+            if (isValid$1(range)) {
+                this._sizeRange = range;
+            }
+        }
+        setAttrFromSpec() {
+            super.setAttrFromSpec();
+            this.setCategoryField(this._spec.categoryField);
+            this.setValueField(this._spec.valueField);
+            this.setSeriesField(this._spec.seriesField);
+            this.setSizeField(this._spec.sizeField);
+            this.setSizeRange(this._spec.sizeRange);
+        }
+        initData() {
+            var _a, _b, _c, _d;
+            super.initData();
+            if (!this._data) {
+                return;
+            }
+            registerDataSetInstanceTransform(this._dataSet, 'correlation', correlation);
+            const centerDataSet = new DataSet();
+            registerDataSetInstanceParser(centerDataSet, 'dataview', dataViewParser);
+            registerDataSetInstanceTransform(centerDataSet, 'correlationCenter', correlationCenter);
+            const centerDataView = new DataView(centerDataSet);
+            centerDataView.parse([this.getViewData()], {
+                type: 'dataview'
+            });
+            centerDataView.transform({
+                type: 'correlationCenter',
+                options: {
+                    keyword: (_d = (_c = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.centerLabel) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.text) !== null && _d !== void 0 ? _d : '',
+                    categoryField: this._spec.categoryField
+                }
+            });
+            this._centerSeriesData = new SeriesData(this._option, centerDataView);
+        }
+        _statisticViewData() {
+            super._statisticViewData();
+            this._data.getDataView().transform({
+                type: 'correlation',
+                options: {
+                    view: () => {
+                        return {
+                            x0: this._viewBox.x1,
+                            x1: this._viewBox.x2,
+                            y0: this._viewBox.y1,
+                            y1: this._viewBox.y2
+                        };
+                    },
+                    field: this._spec.valueField,
+                    radiusRange: this._spec.sizeRange,
+                    radiusField: this._spec.sizeField,
+                    center: [this._spec.centerX, this._spec.centerY],
+                    innerRadius: this._spec.innerRadius,
+                    outerRadius: this._spec.outerRadius,
+                    startAngle: this._spec.startAngle,
+                    endAngle: this._spec.endAngle
+                }
+            });
+        }
+        initMark() {
+            const nodePointMark = this._createMark(CorrelationSeries.mark.nodePoint, {
+                groupKey: this._seriesField,
+                label: mergeSpec({ animation: this._spec.animation }, this._spec.label),
+                isSeriesMark: true,
+                key: DEFAULT_DATA_INDEX
+            });
+            if (nodePointMark) {
+                nodePointMark.setZIndex(LayoutZIndex.Node);
+                this._nodePointMark = nodePointMark;
+            }
+            const ripplePointMark = this._createMark(CorrelationSeries.mark.ripplePoint, {
+                key: DEFAULT_DATA_INDEX,
+                dataView: this._centerSeriesData.getDataView(),
+                dataProductId: this._centerSeriesData.getProductId()
+            });
+            if (ripplePointMark) {
+                this._ripplePointMark = ripplePointMark;
+            }
+            const centerPointMark = this._createMark(CorrelationSeries.mark.centerPoint, {
+                label: mergeSpec({ animation: this._spec.animation }, this._spec.centerLabel),
+                key: DEFAULT_DATA_INDEX,
+                dataView: this._centerSeriesData.getDataView(),
+                dataProductId: this._centerSeriesData.getProductId()
+            });
+            if (centerPointMark) {
+                centerPointMark.setZIndex(LayoutZIndex.Node);
+                this._centerPointMark = centerPointMark;
+            }
+        }
+        initMarkStyle() {
+            this._initNodePointMarkStyle();
+            this._initRipplePointMarkStyle();
+            this._initCenterPointMarkStyle();
+        }
+        _initNodePointMarkStyle() {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            const nodePointMark = this._nodePointMark;
+            if (!nodePointMark) {
+                return;
+            }
+            this.setMarkStyle(nodePointMark, {
+                x: (datum) => datum[CORRELATION_X],
+                y: (datum) => datum[CORRELATION_Y],
+                size: (datum) => datum[CORRELATION_SIZE],
+                fill: (_d = (_c = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.nodePoint) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.fill) !== null && _d !== void 0 ? _d : this.getColorAttribute(),
+                fillOpacity: (_h = (_g = (_f = (_e = this._spec) === null || _e === void 0 ? void 0 : _e.nodePoint) === null || _f === void 0 ? void 0 : _f.style) === null || _g === void 0 ? void 0 : _g.fillOpacity) !== null && _h !== void 0 ? _h : 1,
+                lineWidth: 0
+            }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series);
+            this._trigger.registerMark(nodePointMark);
+        }
+        _initRipplePointMarkStyle() {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+            const ripplePointMark = this._ripplePointMark;
+            if (!ripplePointMark) {
+                return;
+            }
+            this.setMarkStyle(ripplePointMark, {
+                x: () => {
+                    var _a, _b;
+                    return (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.centerX) !== null && _b !== void 0 ? _b : (this._viewBox.x1 + this._viewBox.x2) / 2;
+                },
+                y: () => {
+                    var _a, _b;
+                    return (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.centerY) !== null && _b !== void 0 ? _b : (this._viewBox.y1 + this._viewBox.y2) / 2;
+                },
+                size: () => {
+                    return Math.max(this._viewBox.x2 - this._viewBox.x1, this._viewBox.y2 - this._viewBox.y1) / 2;
+                },
+                fill: (_d = (_c = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.ripplePoint) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.fill) !== null && _d !== void 0 ? _d : this.getColorAttribute(),
+                opacity: (_h = (_g = (_f = (_e = this._spec) === null || _e === void 0 ? void 0 : _e.ripplePoint) === null || _f === void 0 ? void 0 : _f.style) === null || _g === void 0 ? void 0 : _g.fillOpacity) !== null && _h !== void 0 ? _h : 0.2,
+                ripple: (_m = (_l = (_k = (_j = this._spec) === null || _j === void 0 ? void 0 : _j.ripplePoint) === null || _k === void 0 ? void 0 : _k.style) === null || _l === void 0 ? void 0 : _l.ripple) !== null && _m !== void 0 ? _m : 0
+            }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series);
+        }
+        _initCenterPointMarkStyle() {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            const centerPointMark = this._centerPointMark;
+            if (!centerPointMark) {
+                return;
+            }
+            this.setMarkStyle(centerPointMark, {
+                x: () => {
+                    var _a, _b;
+                    return (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.centerX) !== null && _b !== void 0 ? _b : (this._viewBox.x1 + this._viewBox.x2) / 2;
+                },
+                y: () => {
+                    var _a, _b;
+                    return (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.centerY) !== null && _b !== void 0 ? _b : (this._viewBox.y1 + this._viewBox.y2) / 2;
+                },
+                size: () => {
+                    return (0.2 * Math.max(this._viewBox.x2 - this._viewBox.x1, this._viewBox.y2 - this._viewBox.y1)) / 2;
+                },
+                fill: (_d = (_c = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.centerPoint) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.fill) !== null && _d !== void 0 ? _d : this.getColorAttribute(),
+                fillOpacity: (_h = (_g = (_f = (_e = this._spec) === null || _e === void 0 ? void 0 : _e.centerPoint) === null || _f === void 0 ? void 0 : _f.style) === null || _g === void 0 ? void 0 : _g.fillOpacity) !== null && _h !== void 0 ? _h : 1
+            }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series);
+            this._trigger.registerMark(centerPointMark);
+        }
+        initTooltip() {
+            super.initTooltip();
+            this._nodePointMark && this._tooltipHelper.activeTriggerSet.mark.add(this._nodePointMark);
+        }
+        initLabelMarkStyle(labelMark) {
+            if (!labelMark) {
+                return;
+            }
+            this.setMarkStyle(labelMark, {
+                fill: this.getColorAttribute(),
+                text: (datum) => {
+                    return datum[this._categoryField];
+                },
+                z: this.dataToPositionZ.bind(this)
+            }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series);
+        }
+        initAnimation() {
+            var _a, _b, _c;
+            const appearPreset = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.animationAppear) === null || _b === void 0 ? void 0 : _b.preset;
+            this._nodePointMark.setAnimationConfig(animationConfig((_c = Factory.getAnimationInKey('correlation')) === null || _c === void 0 ? void 0 : _c({}, appearPreset), userAnimationConfig(SeriesMarkNameEnum.nodePoint, this._spec)));
+        }
+        getGroupFields() {
+            return [];
+        }
+        getStackGroupFields() {
+            return [];
+        }
+        getStackValueField() {
+            return '';
+        }
+        setValueFieldToStack() {
+            return;
+        }
+        setValueFieldToPercent() {
+            return;
+        }
+        getActiveMarks() {
+            return [this._nodePointMark, this._centerPointMark];
+        }
+        getDimensionField() {
+            return [this._categoryField];
+        }
+        getMeasureField() {
+            return [this._valueField];
+        }
+        onLayoutEnd(ctx) {
+            super.onLayoutEnd(ctx);
+            this._viewBox.set(0, 0, this._region.getLayoutRect().width, this._region.getLayoutRect().height);
+            this._rawData.reRunAllTransform();
+            this.getViewData().reRunAllTransform();
+        }
+    }
+    CorrelationSeries.type = SeriesTypeEnum.correlation;
+    CorrelationSeries.mark = correlationSeriesMark;
+    const registerCorrelationSeries = () => {
+        Factory.registerMark(SymbolMark.type, SymbolMark);
+        Factory.registerMark(RippleMark.type, RippleMark);
+        Factory.registerSeries(CorrelationSeries.type, CorrelationSeries);
+        registerCorrelationAnimation();
+    };
+
+    class CorrelationChart extends BaseChart {
+        constructor() {
+            super(...arguments);
+            this.type = ChartTypeEnum.correlation;
+            this.seriesType = SeriesTypeEnum.correlation;
+        }
+        _getDefaultSeriesSpec(spec) {
+            const series = Object.assign(Object.assign({}, super._getDefaultSeriesSpec(spec)), { categoryField: spec.categoryField, valueField: spec.valueField, seriesField: spec.seriesField, sizeField: spec.sizeField, sizeRange: spec.sizeRange, centerX: spec.centerX, centerY: spec.centerY, innerRadius: spec.innerRadius, outerRadius: spec.outerRadius, startAngle: spec.startAngle, endAngle: spec.endAngle, ripplePoint: spec.ripplePoint, centerPoint: spec.centerPoint, centerLabel: spec.centerLabel, nodePoint: spec.nodePoint, label: spec.label });
+            const seriesType = SeriesTypeEnum.correlation;
+            series.type = seriesType;
+            series[seriesType] = spec[seriesType];
+            return series;
+        }
+        transformSpec(spec) {
+            super.transformSpec(spec);
+            const defaultSeriesSpec = this._getDefaultSeriesSpec(spec);
+            if (!spec.series || spec.series.length === 0) {
+                spec.series = [defaultSeriesSpec];
+            }
+            else {
+                spec.series.forEach(s => {
+                    if (!this.isValidSeries(s.type)) {
+                        return;
+                    }
+                    Object.keys(defaultSeriesSpec).forEach(k => {
+                        if (!(k in s)) {
+                            s[k] = defaultSeriesSpec[k];
+                        }
+                    });
+                });
+            }
+        }
+    }
+    CorrelationChart.type = ChartTypeEnum.correlation;
+    CorrelationChart.view = 'singleDefault';
+    const registerCorrelationChart = () => {
+        registerCorrelationSeries();
+        Factory.registerChart(CorrelationChart.type, CorrelationChart);
+    };
+
     function isValidAlignDomain(domain) {
         return domain.length === 2 && isValidNumber$1(domain[0]) && isValidNumber$1(domain[1]) && domain[1] >= domain[0];
     }
@@ -79189,6 +79996,19 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                             });
                         }
                         this._delegateAxisContainerEvent(product.getGroupGraphicItem());
+                        if (this._unitText) {
+                            const bounds = product.graphicItem.AABBBounds;
+                            const pos = isXAxis(this._orient)
+                                ? {
+                                    x: bounds.x2,
+                                    y: this.getLayoutStartPoint().y
+                                }
+                                : {
+                                    x: this.getLayoutStartPoint().x,
+                                    y: bounds.y1
+                                };
+                            this._unitText.setAttributes(pos);
+                        }
                     }
                 });
             }
@@ -79336,17 +80156,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.setLayoutRect(rect);
             this.updateScaleRange();
             this.computeData();
-            const isX = isXAxis(this.getOrient());
             const context = { skipLayout: false };
-            if (isX) {
-                this.pluginService &&
-                    this.callPlugin(plugin => {
+            const isX = isXAxis(this.getOrient());
+            if (this.pluginService) {
+                isX
+                    ? this.callPlugin(plugin => {
                         plugin.onWillLayoutHorizontal && plugin.onWillLayoutHorizontal(this.pluginService, context, this);
-                    });
-            }
-            else {
-                this.pluginService &&
-                    this.callPlugin(plugin => {
+                    })
+                    : this.callPlugin(plugin => {
                         plugin.onWillLayoutVertical && plugin.onWillLayoutVertical(this.pluginService, context, this);
                     });
             }
@@ -79357,7 +80174,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 const axisComponent = product.getGroupGraphicItem();
                 const updateBounds = axisComponent.getBoundsWithoutRender(mergeSpec(Object.assign({}, this.getLayoutStartPoint()), this._axisStyle, attrs));
                 if (isFinite(updateBounds.width())) {
-                    result = updateBounds;
+                    result = this._appendAxisUnit(updateBounds, isX);
                     this._latestBounds = updateBounds;
                 }
             }
@@ -79541,6 +80358,56 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const chartSpec = this._option.getChart().getSpec();
             this._spec.inverse = transformInverse(this._spec, chartSpec.direction === Direction.horizontal);
         }
+        _appendAxisUnit(bounds, isX) {
+            var _a;
+            if (this._spec.unit && this._spec.unit.visible) {
+                const { text, style } = this._spec.unit;
+                let pos;
+                let unitTextStyle;
+                if (isX) {
+                    pos = {
+                        x: bounds.x2,
+                        y: this.getLayoutStartPoint().y
+                    };
+                    unitTextStyle = {
+                        textAlign: 'left',
+                        textBaseline: 'middle'
+                    };
+                }
+                else {
+                    pos = {
+                        x: this.getLayoutStartPoint().x,
+                        y: bounds.y1
+                    };
+                    unitTextStyle = {
+                        textAlign: this._orient === 'left' ? 'left' : 'right',
+                        textBaseline: 'bottom'
+                    };
+                }
+                unitTextStyle = Object.assign(Object.assign(Object.assign({}, unitTextStyle), style), { x: pos.x, y: pos.y, text });
+                if (this._unitText) {
+                    this._unitText.setAttributes(unitTextStyle);
+                }
+                else {
+                    this._unitText = createText(unitTextStyle);
+                    this._unitText.name = 'axis-unit';
+                    (_a = this.getContainer()) === null || _a === void 0 ? void 0 : _a.add(this._unitText);
+                }
+                const textBounds = this._unitText.AABBBounds;
+                if (!isX) {
+                    bounds.x1 += textBounds.x1 < bounds.x1 ? textBounds.x1 - bounds.x1 : 0;
+                    bounds.y1 += textBounds.y1 < bounds.y1 ? textBounds.y1 - bounds.y1 : 0;
+                }
+                else {
+                    bounds.x2 += textBounds.x2 > bounds.x2 ? textBounds.x2 - bounds.x2 : 0;
+                    bounds.y2 += textBounds.y2 > bounds.y2 ? textBounds.y2 - bounds.y2 : 0;
+                }
+            }
+            return bounds;
+        }
+        getVRenderComponents() {
+            return this._unitText ? [this._unitText] : [];
+        }
     }
     CartesianAxis.type = ComponentTypeEnum.cartesianAxis;
 
@@ -81594,7 +82461,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             shapeColor,
             keyStyle,
             valueStyle,
-            spaceRow
+            spaceRow,
+            datum
         };
     };
 
@@ -85152,6 +86020,33 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         setStartAndEnd(start, end) {
             this._handleChange(start, end, true);
         }
+        enableInteraction() {
+            this._activeRoam = true;
+        }
+        disableInteraction() {
+            this._activeRoam = false;
+        }
+        zoomIn(location) {
+            this._handleChartZoom({
+                zoomDelta: 1.2,
+                zoomX: location === null || location === void 0 ? void 0 : location.x,
+                zoomY: location === null || location === void 0 ? void 0 : location.y
+            });
+        }
+        zoomOut(location) {
+            this._handleChartZoom({
+                zoomDelta: 0.8,
+                zoomX: location === null || location === void 0 ? void 0 : location.x,
+                zoomY: location === null || location === void 0 ? void 0 : location.y
+            });
+        }
+        _handleChange(start, end, updateComponent) {
+            var _a;
+            const zoomLock = (_a = this._spec.zoomLock) !== null && _a !== void 0 ? _a : false;
+            if (zoomLock || end - start < this._minSpan || end - start > this._maxSpan) {
+                return;
+            }
+        }
         get visible() {
             return this._visible;
         }
@@ -85160,6 +86055,22 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.layoutType = 'region-relative';
             this._orient = 'left';
             this._stateField = 'x';
+            this._activeRoam = true;
+            this._zoomAttr = {
+                enable: true,
+                rate: 1,
+                focus: true
+            };
+            this._dragAttr = {
+                enable: true,
+                rate: 1,
+                reverse: true
+            };
+            this._scrollAttr = {
+                enable: true,
+                rate: 1,
+                reverse: true
+            };
             this.effect = {
                 onZoomChange: () => {
                     var _a;
@@ -85201,36 +86112,69 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 (_b = (_a = this.effect).onZoomChange) === null || _b === void 0 ? void 0 : _b.call(_a);
                 return true;
             };
-            this._handleChartScroll = (params, e) => {
-                this._handleChartDrag([params.scrollX, params.scrollY], e);
-            };
-            this._handleChartZoom = (params, e) => {
-                const { zoomDelta } = params;
+            this._handleChartZoom = (params) => {
+                var _a, _b;
+                if (!this._activeRoam) {
+                    return;
+                }
+                const { zoomDelta, zoomX, zoomY } = params;
+                const { x, y } = this._regions[0].getLayoutStartPoint();
+                const { width, height } = this._regions[0].getLayoutRect();
                 const delta = Math.abs(this._start - this._end);
-                const ZOOM_RATE = 0.15;
-                if (delta >= 1 && zoomDelta > 1) {
+                const zoomRate = (_b = (_a = this._spec.roamZoom) === null || _a === void 0 ? void 0 : _a.rate) !== null && _b !== void 0 ? _b : 1;
+                if (delta >= 1 && zoomDelta < 1) {
                     return;
                 }
-                if (delta <= 0.01 && zoomDelta < 1) {
+                if (delta <= 0.01 && zoomDelta > 1) {
                     return;
                 }
-                const value = (delta * (zoomDelta - 1) * ZOOM_RATE) / 2;
-                const start = clamp$1(this._start - value, 0, 1);
-                const end = clamp$1(this._end + value, 0, 1);
+                const focusLoc = this._isHorizontal ? zoomX : zoomY;
+                const totalValue = delta * (zoomDelta - 1) * zoomRate;
+                let startValue = totalValue / 2;
+                let endValue = totalValue / 2;
+                if (focusLoc) {
+                    const startLoc = this._isHorizontal ? x : y;
+                    const endLoc = this._isHorizontal ? width : height;
+                    startValue = (Math.abs(startLoc - focusLoc) / Math.abs(endLoc - startLoc)) * totalValue;
+                    endValue = (Math.abs(endLoc - focusLoc) / Math.abs(endLoc - startLoc)) * totalValue;
+                }
+                const start = clamp$1(this._start + startValue, 0, 1);
+                const end = clamp$1(this._end - endValue, 0, 1);
                 this._handleChange(Math.min(start, end), Math.max(start, end), true);
             };
+            this._handleChartScroll = (params, e) => {
+                var _a;
+                if (!this._activeRoam) {
+                    return;
+                }
+                const { scrollX, scrollY } = params;
+                let value = this._isHorizontal ? scrollX : scrollY;
+                if (!this._scrollAttr.reverse) {
+                    value = -value;
+                }
+                this._handleChartMove(value, (_a = this._scrollAttr.rate) !== null && _a !== void 0 ? _a : 1);
+            };
             this._handleChartDrag = (delta, e) => {
+                var _a;
+                if (!this._activeRoam) {
+                    return;
+                }
                 const [dx, dy] = delta;
-                const value = this._isHorizontal ? dx : dy;
+                let value = this._isHorizontal ? dx : dy;
+                if (this._dragAttr.reverse) {
+                    value = -value;
+                }
+                this._handleChartMove(value, (_a = this._dragAttr.rate) !== null && _a !== void 0 ? _a : 1);
+            };
+            this._handleChartMove = (value, rate) => {
                 const totalValue = this._isHorizontal ? this.getLayoutRect().width : this.getLayoutRect().height;
-                const SCROLL_RATE = 0.02;
                 if (Math.abs(value) >= 1e-6) {
                     if (value > 0 && this._end < 1) {
-                        const moveDelta = Math.min(1 - this._end, value / totalValue) * SCROLL_RATE;
+                        const moveDelta = Math.min(1 - this._end, value / totalValue) * rate;
                         this._handleChange(this._start + moveDelta, this._end + moveDelta, true);
                     }
                     else if (value < 0 && this._start > 0) {
-                        const moveDelta = Math.max(-this._start, value / totalValue) * SCROLL_RATE;
+                        const moveDelta = Math.max(-this._start, value / totalValue) * rate;
                         this._handleChange(this._start + moveDelta, this._end + moveDelta, true);
                     }
                 }
@@ -85244,6 +86188,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             super.created();
             this._setAxisFromSpec();
             this._setRegionsFromSpec();
+            this._initEvent();
             this._initData();
             this._initStateScale();
             this._setStateFromSpec();
@@ -85317,6 +86262,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             return domain;
         }
+        _initEvent() {
+            this._initCommonEvent();
+        }
         _initData() {
             const dataCollection = [];
             const stateFields = [];
@@ -85404,8 +86352,23 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         setAttrFromSpec() {
             var _a;
             super.setAttrFromSpec();
-            if (this._spec.roam) {
-                this.initZoomable(this.event, this._option.mode);
+            if (this._spec.roamZoom === true || this._spec.roamZoom) {
+                this._zoomAttr = merge$1({}, this._zoomAttr, this._spec.roamZoom);
+            }
+            else {
+                this._zoomAttr.enable = false;
+            }
+            if (this._spec.roamDrag === true || this._spec.roamDrag) {
+                this._dragAttr = merge$1({}, this._dragAttr, this._spec.roamDrag);
+            }
+            else {
+                this._dragAttr.enable = false;
+            }
+            if (this._spec.roamScroll === true || this._spec.roamScroll) {
+                this._scrollAttr = merge$1({}, this._scrollAttr, this._spec.roamScroll);
+            }
+            else {
+                this._scrollAttr.enable = false;
             }
             this._field = this._spec.field;
             this._width = this._computeWidth();
@@ -85437,6 +86400,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return (mode === 'percent' && this._spec.end) || (mode === 'value' && this._spec.endValue);
         }
         _setStateFromSpec() {
+            var _a, _b;
             this._auto = !!this._spec.auto;
             let start;
             let end;
@@ -85459,6 +86423,18 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._endValue = this._statePointToData(end);
             this._start = start;
             this._end = end;
+            this._minSpan = (_a = this._spec.minSpan) !== null && _a !== void 0 ? _a : 0;
+            this._maxSpan = (_b = this._spec.maxSpan) !== null && _b !== void 0 ? _b : 1;
+            if (isContinuous(this._stateScale.type) && this._stateScale.domain[0] !== this._stateScale.domain[1]) {
+                if (this._spec.minValueSpan) {
+                    this._minSpan = this._spec.minValueSpan / (this._stateScale.domain()[1] - this._stateScale.domain()[0]);
+                }
+                if (this._spec.maxValueSpan) {
+                    this._maxSpan = this._spec.maxValueSpan / (this._stateScale.domain()[1] - this._stateScale.domain()[0]);
+                }
+            }
+            this._minSpan = Math.max(0, this._minSpan);
+            this._maxSpan = Math.min(this._maxSpan, 1);
             if ((!this._relatedAxisComponent || this._filterMode !== IFilterMode.axis) &&
                 (this._start !== 0 || this._end !== 1)) {
                 this._newDomain = this._parseDomainFromState(this._startValue, this._endValue);
@@ -85551,18 +86527,25 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return allDomain.slice(Math.min(startIndex, endIndex), Math.max(startIndex, endIndex) + 1);
         }
         _initCommonEvent() {
-            if (this._spec.roam) {
-                this.initZoomEventOfRegions(this._regions, null, this._handleChartZoom);
-                this.initScrollEventOfRegions(this._regions, null, this._handleChartScroll);
-                this.initDragEventOfRegions(this._regions, null, this._handleChartDrag);
+            var _a, _b, _c, _d, _e, _f, _g;
+            const delayType = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.delayType) !== null && _b !== void 0 ? _b : 'throttle';
+            const delayTime = isValid$1((_c = this._spec) === null || _c === void 0 ? void 0 : _c.delayType) ? (_e = (_d = this._spec) === null || _d === void 0 ? void 0 : _d.delayTime) !== null && _e !== void 0 ? _e : 30 : 0;
+            const realTime = (_g = (_f = this._spec) === null || _f === void 0 ? void 0 : _f.realTime) !== null && _g !== void 0 ? _g : false;
+            const option = { delayType, delayTime, realTime };
+            if (this._zoomAttr.enable) {
+                this.initZoomEventOfRegions(this._regions, null, this._handleChartZoom, option);
+            }
+            if (this._scrollAttr.enable) {
+                this.initScrollEventOfRegions(this._regions, null, this._handleChartScroll, option);
+            }
+            if (this._dragAttr.enable) {
+                this.initDragEventOfRegions(this._regions, null, this._handleChartDrag, option);
             }
         }
         updateLayoutAttribute() {
             if (this._visible) {
                 this._createOrUpdateComponent();
             }
-            this._initCommonEvent();
-            this._initEvent();
             super.updateLayoutAttribute();
         }
         _boundsInRect(rect) {
@@ -85728,6 +86711,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         setAttrFromSpec() {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
             super.setAttrFromSpec();
+            if (isBoolean$1(this._spec.roam)) {
+                this._zoomAttr.enable = this._spec.roam;
+                this._dragAttr.enable = this._spec.roam;
+                this._scrollAttr.enable = this._spec.roam;
+            }
+            if (this._zoomAttr.enable || this._dragAttr.enable || this._scrollAttr.enable) {
+                this.initZoomable(this.event, this._option.mode);
+            }
             this._backgroundSize = (_b = (_a = this._spec.background) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 30;
             this._middleHandlerSize = this._computeMiddleHandlerSize();
             this._width = this._computeWidth();
@@ -85737,7 +86728,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     ? this._height - this._middleHandlerSize
                     : this._width - this._middleHandlerSize;
             }
-            if (isNil$1((_h = (_g = (_f = this._originalSpec) === null || _f === void 0 ? void 0 : _f.startHandler) === null || _g === void 0 ? void 0 : _g.style) === null || _h === void 0 ? void 0 : _h.size)) {
+            if (isNil$1((_h = (_g = (_f = this._originalSpec) === null || _f === void 0 ? void 0 : _f.endHandler) === null || _g === void 0 ? void 0 : _g.style) === null || _h === void 0 ? void 0 : _h.size)) {
                 this._spec.endHandler.style.size = this._isHorizontal
                     ? this._height - this._middleHandlerSize
                     : this._width - this._middleHandlerSize;
@@ -85848,7 +86839,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return true;
         }
         _createOrUpdateComponent() {
-            var _a, _b, _c;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
             if (!this._component && this._visible) {
                 const container = this.getContainer();
                 const xScale = this._isHorizontal ? this._stateScale : this._valueScale;
@@ -85860,12 +86851,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     }, orient: this._orient, size: {
                         width: this.getLayoutRect().width,
                         height: this.getLayoutRect().height
-                    }, showDetail: (_a = this._spec) === null || _a === void 0 ? void 0 : _a.showDetail, brushSelect: (_c = (_b = this._spec) === null || _b === void 0 ? void 0 : _b.brushSelect) !== null && _c !== void 0 ? _c : false, previewData: isNeedPreview && this._data.getLatestData(), previewCallbackX: isNeedPreview && this._dataToPositionX, previewCallbackY: isNeedPreview && this._dataToPositionY }, this._getComponentAttrs()));
+                    }, showDetail: (_a = this._spec) === null || _a === void 0 ? void 0 : _a.showDetail, brushSelect: (_c = (_b = this._spec) === null || _b === void 0 ? void 0 : _b.brushSelect) !== null && _c !== void 0 ? _c : false, zoomLock: (_e = (_d = this._spec) === null || _d === void 0 ? void 0 : _d.zoomLock) !== null && _e !== void 0 ? _e : false, minSpan: this._minSpan, maxSpan: this._maxSpan, delayType: (_f = this._spec) === null || _f === void 0 ? void 0 : _f.delayType, delayTime: isValid$1((_g = this._spec) === null || _g === void 0 ? void 0 : _g.delayType) ? (_j = (_h = this._spec) === null || _h === void 0 ? void 0 : _h.delayTime) !== null && _j !== void 0 ? _j : 30 : 0, realTime: (_l = (_k = this._spec) === null || _k === void 0 ? void 0 : _k.realTime) !== null && _l !== void 0 ? _l : true, previewData: isNeedPreview && this._data.getLatestData(), previewPointsX: isNeedPreview && this._dataToPositionX, previewPointsY: isNeedPreview && this._dataToPositionY }, this._getComponentAttrs()));
                 if (this._isHorizontal) {
-                    isNeedPreview && this._component.setPreviewCallbackY1(this._dataToPositionY2);
+                    isNeedPreview && this._component.setPreviewPointsY1(this._dataToPositionY2);
                 }
                 else {
-                    isNeedPreview && this._component.setPreviewCallbackX1(this._dataToPositionX2);
+                    isNeedPreview && this._component.setPreviewPointsX1(this._dataToPositionX2);
                 }
                 this._component.setStatePointToData((state) => this._statePointToData(state));
                 this._component.setUpdateStateCallback((start, end) => {
@@ -85876,6 +86867,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         _handleChange(start, end, updateComponent) {
+            super._handleChange(start, end, updateComponent);
             if (updateComponent && this._component) {
                 this._component.setStartAndEnd(start, end);
             }
@@ -85908,8 +86900,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
             }
         }
-        _initEvent() {
-        }
         _getComponentAttrs() {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
             return {
@@ -85979,6 +86969,17 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.layoutLevel = LayoutLevel.DataZoom;
             this._filterMode = (_a = spec.filterMode) !== null && _a !== void 0 ? _a : IFilterMode.axis;
         }
+        setAttrFromSpec() {
+            super.setAttrFromSpec();
+            if (isBoolean$1(this._spec.roam)) {
+                this._zoomAttr.enable = false;
+                this._dragAttr.enable = this._spec.roam;
+                this._scrollAttr.enable = this._spec.roam;
+            }
+            if (this._zoomAttr.enable || this._dragAttr.enable || this._scrollAttr.enable) {
+                this.initZoomable(this.event, this._option.mode);
+            }
+        }
         onLayoutEnd(ctx) {
             var _a, _b;
             this._updateScaleRange();
@@ -86014,13 +87015,19 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return SCROLL_BAR_DEFAULT_SIZE;
         }
         _createOrUpdateComponent() {
+            var _a, _b, _c, _d, _e, _f;
             if (!this._component) {
                 const container = this.getContainer();
-                this._component = new ScrollBar$1(Object.assign({ zIndex: this.layoutZIndex, x: this.getLayoutStartPoint().x, y: this.getLayoutStartPoint().y, width: this.getLayoutRect().width, height: this.getLayoutRect().height, range: [this._start, this._end], direction: this._isHorizontal ? 'horizontal' : 'vertical' }, this._getComponentAttrs()));
+                this._component = new ScrollBar$1(Object.assign({ zIndex: this.layoutZIndex, x: this.getLayoutStartPoint().x, y: this.getLayoutStartPoint().y, width: this.getLayoutRect().width, height: this.getLayoutRect().height, range: [this._start, this._end], direction: this._isHorizontal ? 'horizontal' : 'vertical', delayType: (_a = this._spec) === null || _a === void 0 ? void 0 : _a.delayType, delayTime: isValid$1((_b = this._spec) === null || _b === void 0 ? void 0 : _b.delayType) ? (_d = (_c = this._spec) === null || _c === void 0 ? void 0 : _c.delayTime) !== null && _d !== void 0 ? _d : 30 : 0, realTime: (_f = (_e = this._spec) === null || _e === void 0 ? void 0 : _e.realTime) !== null && _f !== void 0 ? _f : true }, this._getComponentAttrs()));
+                this._component.addEventListener('scroll', (e) => {
+                    const value = e.detail.value;
+                    this._handleChange(value[0], value[1]);
+                });
                 container.add(this._component);
             }
         }
         _handleChange(start, end, updateComponent) {
+            super._handleChange(start, end, updateComponent);
             if (updateComponent && this._component) {
                 this._component.setAttribute('range', [start, end]);
             }
@@ -86043,7 +87050,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _handleDataCollectionChange() {
         }
-        _initEvent() {
+        _initCommonEvent() {
+            super._initCommonEvent();
             if (this._component) {
                 this._component.on('scroll', (e) => {
                     const value = e.detail.value;
@@ -86051,12 +87059,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 });
             }
         }
-        _initCommonEvent() {
-            if (this._spec.roam) {
-                this.initScrollEventOfRegions(this._regions, null, this._handleChartScroll);
-                this.initDragEventOfRegions(this._regions, null, this._handleChartDrag);
-            }
-        }
         _getComponentAttrs() {
             const { rail, slider, innerPadding } = this._spec;
             const attrs = {};
@@ -89093,6 +90095,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         registerMapChart,
         registerGaugeChart,
         registerWordCloudChart,
+        registerWordCloud3dChart,
         registerFunnelChart,
         registerWaterfallChart,
         registerBoxplotChart,
@@ -89106,6 +90109,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         registerSankeyChart,
         registerHeatmapChart,
         registerSequenceChart,
+        registerCorrelationChart,
         registerCommonChart,
         registerBar3dChart,
         registerPie3dChart,
@@ -89177,6 +90181,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     exports.CommonChart = CommonChart;
     exports.ComponentMark = ComponentMark;
     exports.ContinuousLegend = ContinuousLegend;
+    exports.CorrelationChart = CorrelationChart;
+    exports.CorrelationSeries = CorrelationSeries;
     exports.CustomMark = CustomMark;
     exports.DataZoom = DataZoom;
     exports.DiscreteLegend = DiscreteLegend;
@@ -89240,6 +90246,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     exports.RangeColumnSeries = RangeColumnSeries;
     exports.Rect3dMark = Rect3dMark;
     exports.RectMark = RectMark;
+    exports.RippleMark = RippleMark;
     exports.RoseChart = RoseChart;
     exports.RoseLikeChart = RoseLikeChart;
     exports.RoseLikeSeries = RoseLikeSeries;
@@ -89292,6 +90299,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     exports.registerCircularProgressSeries = registerCircularProgressSeries;
     exports.registerCommonChart = registerCommonChart;
     exports.registerContinuousLegend = registerContinuousLegend;
+    exports.registerCorrelationChart = registerCorrelationChart;
     exports.registerCustomMark = registerCustomMark;
     exports.registerDataZoom = registerDataZoom;
     exports.registerDiscreteLegend = registerDiscreteLegend;