@visactor/vchart 1.5.1-alpha.6 → 1.5.2-alpha.0

package/build/index.js

@@ -1226,12 +1226,12 @@
     function radianToDegree(radian) {
       return 180 * radian / Math.PI;
     }
-    const clampRadian = function () {
+    const clampRadian$1 = function () {
       let angle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
       if (angle < 0) for (; angle < -tau$1;) angle += tau$1;else if (angle > 0) for (; angle > tau$1;) angle -= tau$1;
       return angle;
     };
-    const clampAngleByRadian = clampRadian;
+    const clampAngleByRadian = clampRadian$1;
     function polarToCartesian$2(center, radius, angleInRadian) {
       return {
         x: center.x + radius * Math.cos(angleInRadian),
@@ -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;
       }
@@ -26245,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;
     }
@@ -26361,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;
       }
@@ -26840,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;
@@ -26848,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;
@@ -27200,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'
             }
@@ -27221,7 +27223,7 @@
             offset: 5,
             position: 'top',
             style: {
-                stroke: 'white',
+                stroke: { type: 'palette', key: 'backgroundColor' },
                 lineWidth: 2
             }
         },
@@ -27239,7 +27241,7 @@
             offset: 5,
             style: {
                 lineWidth: 2,
-                stroke: 'white'
+                stroke: { type: 'palette', key: 'backgroundColor' }
             }
         }
     };
@@ -27332,7 +27334,7 @@
     const funnel$1 = {
         transform: {
             style: {
-                fill: '#f5f5f5'
+                fill: { type: 'palette', key: 'axisGridColor' }
             }
         },
         label: {
@@ -27346,7 +27348,7 @@
             style: {
                 fontSize: THEME_CONSTANTS.l4FontSize,
                 lineHeight: THEME_CONSTANTS.l4LineHeight,
-                fill: '#707070'
+                fill: { type: 'palette', key: 'secondaryFontColor' }
             },
             line: {
                 style: {
@@ -27358,7 +27360,7 @@
             style: {
                 fontSize: THEME_CONSTANTS.l4FontSize,
                 lineHeight: THEME_CONSTANTS.l4LineHeight,
-                fill: '#707070',
+                fill: { type: 'palette', key: 'secondaryFontColor' },
                 textBaseline: 'middle'
             }
         }
@@ -27452,7 +27454,7 @@
             offset: 5,
             style: {
                 lineWidth: 2,
-                stroke: 'white'
+                stroke: { type: 'palette', key: 'backgroundColor' }
             }
         },
         point: {
@@ -27502,7 +27504,7 @@
                 lineHeight: THEME_CONSTANTS.l6LineHeight,
                 textBaseline: 'middle',
                 fill: { type: 'palette', key: 'secondaryFontColor', default: '#89909d' },
-                stroke: 'white'
+                stroke: { type: 'palette', key: 'backgroundColor' }
             }
         }
     };
@@ -27519,9 +27521,14 @@
             position: 'outside',
             style: {
                 fontWeight: 'normal',
-                stroke: 'white',
+                stroke: { type: 'palette', key: 'backgroundColor' },
                 fillOpacity: 1
             }
+        },
+        innerLabel: {
+            style: {
+                lineWidth: 2
+            }
         }
     };
 
@@ -27545,7 +27552,7 @@
             offset: 5,
             style: {
                 lineWidth: 2,
-                stroke: 'white'
+                stroke: { type: 'palette', key: 'backgroundColor' }
             }
         },
         point: {
@@ -27570,7 +27577,7 @@
             position: 'top',
             style: {
                 lineWidth: 2,
-                stroke: 'white'
+                stroke: { type: 'palette', key: 'backgroundColor' }
             }
         }
     };
@@ -27647,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,
@@ -28699,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 => {
@@ -28733,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) {
@@ -28764,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
         });
@@ -28780,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();
@@ -28910,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) {
@@ -30229,7 +30264,7 @@
       labeling(textBounds, graphicBounds, position, offset) {}
       _labelLine(text) {}
       render() {
-        if (this._prepare(), this._isCollectionBase && isNil$1(this._idToPoint) || !this._isCollectionBase && isNil$1(this._idToGraphic)) return;
+        if (this._prepare(), isNil$1(this._idToGraphic) || this._isCollectionBase && isNil$1(this._idToPoint)) return;
         const {
           overlap: overlap,
           smartInvert: smartInvert,
@@ -30274,25 +30309,25 @@
         const {
           data: data
         } = this.attribute;
-        if (data && 0 !== data.length) if (this._isCollectionBase) {
+        if (data && 0 !== data.length) if (this._idToGraphic || (this._idToGraphic = new Map()), this._isCollectionBase) {
           this._idToPoint || (this._idToPoint = new Map());
-          const baseMark = currentBaseMarks[0],
-            points = getPointsOfLineArea(baseMark);
-          if (null == points ? void 0 : points.length) for (let i = 0; i < points.length; i++) {
-            const textData = data[i];
-            textData && points[i] && (isValid$1(textData.id) || (textData.id = `vrender-component-${this.name}-${i}`), this._idToPoint.set(textData.id, points[i]));
-          }
-        } else {
-          this._idToGraphic || (this._idToGraphic = 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._isCollectionBase ? this._baseMarks[0] : this._idToGraphic.get(item.id);
+        return this._idToGraphic.get(item.id);
       }
       _layout() {
         let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
@@ -31871,11 +31906,14 @@
           value: tickDatum.rawValue,
           index: tickDatum.index,
           layer: layer
-        })), Object.assign(Object.assign(Object.assign({}, point), {
+        })), Object.assign(Object.assign(Object.assign({}, this.getLabelPosition(point, vector, text, textStyle)), {
           text: text,
           lineHeight: null == textStyle ? void 0 : textStyle.fontSize
         }), textStyle);
       }
+      getLabelPosition(point, vector, text, style) {
+        return point;
+      }
       _transformItems(items) {
         const data = [];
         return items.forEach(item => {
@@ -31900,7 +31938,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) {
@@ -31921,10 +31959,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 => {
@@ -32488,6 +32526,37 @@
       }
     }
 
+    const clampRadian = function () {
+      let angle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      if (angle < 0) for (; angle < 0;) angle += tau$1;else if (angle > 0) for (; angle > tau$1;) angle -= tau$1;
+      return angle;
+    };
+    function isInRange(a, min, max) {
+      return !isLess(a, min, 0, 1e-6) && !isGreater(a, max, 0, 1e-6);
+    }
+    function getLabelPosition(tickPosition, tickVector, text, style) {
+      const labelBounds = getTextBounds(Object.assign({
+          text: text
+        }, style)),
+        width = labelBounds.width(),
+        height = labelBounds.height(),
+        angle = clampRadian(Math.atan2(tickVector[1], tickVector[0])) - Math.PI,
+        PI_3_4 = 3 * Math.PI / 4,
+        PI_1_4 = Math.PI / 4,
+        PI_1_2 = Math.PI / 2,
+        baseX = tickPosition.x;
+      let dx = 0;
+      dx = isInRange(angle, -PI_3_4, -PI_1_4) ? ((angle + PI_3_4) / PI_1_2 - .5) * width : isInRange(angle, PI_1_4, PI_3_4) ? (.5 - (angle - PI_1_4) / PI_1_2) * width : Math.cos(angle) >= 0 ? .5 * width : .5 * -width;
+      const x = baseX - dx,
+        baseY = tickPosition.y;
+      let dy = 0;
+      dy = isInRange(angle, -PI_3_4, -PI_1_4) ? .5 * -height : isInRange(angle, PI_1_4, PI_3_4) ? .5 * height : Math.cos(angle) >= 0 ? (.5 - (PI_1_4 - angle) / PI_1_2) * height : (.5 - clampRadian(angle - PI_3_4) / PI_1_2) * height;
+      return {
+        x: x,
+        y: baseY - dy
+      };
+    }
+
     var __rest$3 = undefined && undefined.__rest || function (s, e) {
       var t = {};
       for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
@@ -32619,10 +32688,13 @@
       afterLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {}
       getLabelAlign(vector, inside, angle) {
         return {
-          textAlign: this.getTextAlign(vector),
-          textBaseline: this.getTextBaseline(vector)
+          textAlign: "center",
+          textBaseline: "middle"
         };
       }
+      getLabelPosition(point, vector, text, style) {
+        return getLabelPosition(point, vector, text, style);
+      }
     }
     CircleAxis.defaultAttributes = DEFAULT_AXIS_THEME, mixin(CircleAxis, CircleAxisMixin);
 
@@ -33120,6 +33192,12 @@
       orient: "bottom",
       showDetail: "auto",
       brushSelect: !0,
+      zoomLock: !1,
+      minSpan: 0,
+      maxSpan: 1,
+      delayType: "throttle",
+      delayTime: 0,
+      realTime: !0,
       backgroundStyle: {
         fill: "white",
         stroke: "#D1DBEE",
@@ -33217,6 +33295,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 = {
@@ -33240,9 +33322,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),
             {
@@ -33250,10 +33333,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,
@@ -33263,29 +33347,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));
       }
@@ -33299,6 +33385,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();
@@ -33312,16 +33410,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();
@@ -33341,11 +33437,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 {
@@ -33616,8 +33712,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 {
@@ -33628,10 +33724,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 {
@@ -33717,10 +33813,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;
@@ -33746,17 +33839,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);
@@ -35153,9 +35246,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();
@@ -35175,20 +35268,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 {
@@ -35227,9 +35317,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 {
@@ -36703,7 +36793,7 @@
     };
     const DEFAULT_SIZE_THRESHOLD = 5;
 
-    const delayMap = {
+    const delayMap$1 = {
       debounce: debounce,
       throttle: throttle
     };
@@ -36744,7 +36834,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),
@@ -36939,7 +37029,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;
@@ -44760,7 +44850,7 @@
           return !1 === untransformedPoint.defined && (invertedPoint.defined = !1), invertedPoint;
         }
         let theta = Math.atan(sin / cos);
-        theta += cos >= 0 ? 2 * Math.PI : Math.PI, theta >= 2 * Math.PI && (theta -= 2 * Math.PI), theta = clampRadian(theta);
+        theta += cos >= 0 ? 2 * Math.PI : Math.PI, theta >= 2 * Math.PI && (theta -= 2 * Math.PI), theta = clampRadian$1(theta);
         const radius = isNumberClose(sin, 0) ? cos / Math.cos(theta) : sin / Math.sin(theta),
           invertedPoint = this.isTransposed() ? {
             r: theta,
@@ -47225,6 +47315,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,
@@ -48844,6 +48972,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`;
@@ -49007,7 +49139,7 @@
             style: {
                 cursor: 'pointer',
                 fill: 'black',
-                stroke: 'white',
+                stroke: { type: 'palette', key: 'backgroundColor' },
                 lineWidth: 2,
                 fontSize: THEME_CONSTANTS.l5FontSize,
                 lineHeight: THEME_CONSTANTS.l5LineHeight
@@ -49044,7 +49176,8 @@
         },
         label: {
             style: {
-                stroke: 'white',
+                lineWidth: 2,
+                stroke: { type: 'palette', key: 'backgroundColor' },
                 textAlign: 'center',
                 textBaseline: 'middle'
             }
@@ -49059,6 +49192,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,
@@ -49087,7 +49238,8 @@
         heatmap,
         sankey: sankey$1,
         rose,
-        boxPlot
+        boxPlot,
+        correlation: correlation$1
     };
 
     const markByType = {
@@ -49182,7 +49334,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: {
@@ -49193,7 +49354,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 = {
@@ -49299,7 +49469,7 @@
             }
         },
         label: {
-            space: 8
+            space: 5
         }
     };
 
@@ -49498,7 +49668,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',
@@ -49529,7 +49699,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
         },
@@ -49607,7 +49777,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
@@ -49746,7 +49916,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: {
@@ -49754,9 +49924,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: {
@@ -49766,8 +49934,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' }
                 }
             }
         }
@@ -49777,7 +49945,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: {
@@ -49787,7 +49955,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: {
@@ -49797,7 +49965,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: {
@@ -49806,9 +49974,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: {
@@ -49818,8 +49984,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' }
                 }
             }
         }
@@ -49834,12 +50000,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' }
                 }
             }
         },
@@ -49921,7 +50087,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,
@@ -49960,7 +50126,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',
@@ -49981,7 +50147,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
@@ -49995,7 +50161,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,
@@ -50026,7 +50192,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' }
         }
     };
 
@@ -50217,6 +50383,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) {
@@ -50268,6 +50435,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));
 
@@ -50291,6 +50462,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 = {}));
@@ -50357,6 +50529,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,
@@ -50385,7 +50559,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) {
@@ -50543,7 +50718,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',
@@ -50551,6 +50725,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'
             }
@@ -53588,9 +53763,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);
@@ -54704,21 +54876,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);
                 }
             }
@@ -54877,32 +55049,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';
 
@@ -55363,6 +55545,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 = () => {
@@ -56711,6 +56919,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);
@@ -57992,7 +58220,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
     registerVChartCore();
 
-    const version = "1.5.1-alpha.6";
+    const version = "1.5.2-alpha.0";
 
     class ChartData {
         get dataList() {
@@ -58895,6 +59123,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);
@@ -59516,6 +59747,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) => {
@@ -60525,6 +60757,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() {
@@ -60566,7 +60801,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();
@@ -60597,7 +60831,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)) {
@@ -60617,7 +60850,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;
@@ -61109,6 +61341,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();
@@ -61837,7 +62072,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, {
@@ -61876,7 +62111,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;
         }
@@ -61930,7 +62164,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;
@@ -61952,7 +62185,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));
@@ -62035,6 +62267,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();
@@ -62278,7 +62515,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 => {
@@ -62307,6 +62543,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);
@@ -62508,14 +62747,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) {
@@ -62530,6 +62767,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);
@@ -63027,7 +63268,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;
@@ -63056,7 +63296,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);
@@ -64008,6 +64251,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         clearScroll() {
         }
+        clearDrag() {
+        }
         parserDragEvent() {
             return true;
         }
@@ -64046,6 +64291,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         clearScroll() {
         }
+        clearDrag() {
+        }
     }
 
     const defaultTriggerEvent = {
@@ -64099,6 +64346,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;
@@ -64111,112 +64362,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;
                 }
@@ -64226,21 +64489,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) {
@@ -64256,45 +64519,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);
         }
@@ -64700,7 +64983,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, {
@@ -64723,7 +65005,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) {
@@ -64746,6 +65027,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;
@@ -65414,7 +65696,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, {
@@ -65434,9 +65715,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) {
@@ -65643,6 +65927,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 {
@@ -65751,7 +66051,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, {
@@ -65774,12 +66074,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;
@@ -65791,7 +66090,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;
@@ -65800,7 +66099,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,
@@ -65971,7 +66270,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, {
@@ -65996,9 +66294,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) {
@@ -66351,7 +66652,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, {
@@ -66384,9 +66684,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 = {
@@ -66695,7 +67000,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, {
@@ -66726,11 +67031,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),
@@ -66742,7 +67046,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() {
@@ -66836,6 +67139,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 => {
@@ -67099,7 +67404,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, {
@@ -67150,7 +67454,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) {
@@ -67272,6 +67575,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);
@@ -67451,7 +67755,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++;
@@ -67630,7 +67934,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const series = Object.assign(Object.assign({}, super._getDefaultSeriesSpec(spec)), { seriesField: spec.seriesField, categoryField: spec.categoryField || spec.radiusField, valueField: spec.valueField || spec.angleField, startAngle: spec.startAngle, endAngle: spec.endAngle, radius: spec.radius, innerRadius: spec.innerRadius, centerX: spec.centerX, centerY: spec.centerY });
             return series;
         }
-        _transformProgressAxisSpec(spec, angleAxisDefaultSpec, radiusAxisDefaultSpec) {
+        _transformProgressAxisSpec(spec, angleAxisDefaultSpec, radiusAxisDefaultSpec, angleAxisAppendSpec, radiusAxisAppendSpec) {
             var _a;
             if (!spec.axes) {
                 spec.axes = [];
@@ -67666,6 +67970,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (isNil$1(axesPtr.angle.max)) {
                 axesPtr.angle.max = domain.max;
             }
+            if (angleAxisAppendSpec) {
+                const newSpec = mergeSpec({}, angleAxisAppendSpec, axesPtr.angle);
+                Object.assign(axesPtr.angle, newSpec);
+            }
+            if (radiusAxisAppendSpec) {
+                const newSpec = mergeSpec({}, radiusAxisAppendSpec, axesPtr.radius);
+                Object.assign(axesPtr.radius, newSpec);
+            }
         }
     }
 
@@ -67972,7 +68284,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, {
@@ -67990,9 +68302,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
@@ -68109,7 +68424,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) {
@@ -68148,9 +68462,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();
         }
@@ -68287,7 +68604,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, {
@@ -68306,9 +68623,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) {
@@ -68421,6 +68741,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }, {
                     orient: 'radius',
                     visible: false
+                }, {
+                    zIndex: LayoutZIndex.Region + 50
                 });
             }
             else {
@@ -68462,6 +68784,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (isNil$1(axesPtr.radius.type)) {
                 axesPtr.radius.type = 'linear';
             }
+            if (isNil$1(axesPtr.angle.zIndex)) {
+                axesPtr.angle.zIndex = LayoutZIndex.Region + 50;
+            }
         }
     }
     GaugeChart.type = ChartTypeEnum.gauge;
@@ -68583,7 +68908,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;
@@ -68626,9 +68951,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 => {
@@ -71006,7 +71334,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) {
@@ -71050,9 +71378,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;
@@ -71339,6 +71665,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] : [];
@@ -71350,7 +71678,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, {
@@ -71359,13 +71686,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) {
@@ -72068,7 +72393,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') {
@@ -72110,7 +72435,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() {
@@ -72120,7 +72444,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') {
@@ -72150,7 +72473,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() {
@@ -72215,6 +72537,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];
@@ -72578,7 +72902,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;
@@ -72606,13 +72930,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) {
@@ -72621,8 +72944,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) +
@@ -72634,11 +72957,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;
             }
@@ -72658,7 +72979,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;
@@ -72711,6 +73032,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;
@@ -73898,7 +74222,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._initLabelMarkStyle();
         }
         _initArcMark() {
-            var _a;
             if (this._sunburst.visible === false) {
                 return;
             }
@@ -73907,7 +74230,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)) {
@@ -73924,7 +74246,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;
             }
@@ -73933,7 +74254,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)) {
@@ -73960,6 +74280,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;
@@ -74233,7 +74555,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;
             }
@@ -74242,7 +74564,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)) {
@@ -74260,7 +74581,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;
             }
@@ -74269,7 +74590,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)) {
@@ -74307,6 +74627,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;
@@ -74615,7 +74938,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([
@@ -74628,7 +74951,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) {
@@ -74642,9 +74964,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
                 });
@@ -74659,10 +74980,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([
@@ -74675,7 +74995,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);
                 }
             }
         }
@@ -74792,6 +75111,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;
@@ -75594,7 +75917,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;
@@ -75901,7 +76224,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 = {
@@ -75916,17 +76239,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() {
@@ -76022,7 +76343,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';
@@ -76062,6 +76383,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();
@@ -77534,7 +77857,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;
@@ -77552,10 +77874,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;
@@ -77576,10 +77897,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;
             }
@@ -77731,7 +78050,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;
@@ -77798,6 +78116,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;
@@ -78073,11 +78394,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);
@@ -78196,7 +78517,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);
@@ -78212,7 +78532,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;
@@ -78262,6 +78581,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';
@@ -78303,6 +78623,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];
     }
@@ -79265,6 +80046,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);
+                        }
                     }
                 });
             }
@@ -79412,17 +80206,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);
                     });
             }
@@ -79433,7 +80224,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;
                 }
             }
@@ -79617,6 +80408,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;
 
@@ -81670,7 +82511,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             shapeColor,
             keyStyle,
             valueStyle,
-            spaceRow
+            spaceRow,
+            datum
         };
     };
 
@@ -85228,6 +86070,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;
         }
@@ -85236,6 +86105,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;
@@ -85277,36 +86162,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);
                     }
                 }
@@ -85320,6 +86238,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();
@@ -85393,6 +86312,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             return domain;
         }
+        _initEvent() {
+            this._initCommonEvent();
+        }
         _initData() {
             const dataCollection = [];
             const stateFields = [];
@@ -85480,8 +86402,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();
@@ -85513,6 +86450,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;
@@ -85535,6 +86473,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);
@@ -85627,18 +86577,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) {
@@ -85804,6 +86761,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();
@@ -85813,7 +86778,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;
@@ -85924,7 +86889,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;
@@ -85936,12 +86901,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) => {
@@ -85952,6 +86917,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);
             }
@@ -85984,8 +86950,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 {
@@ -86055,6 +87019,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();
@@ -86090,13 +87065,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]);
             }
@@ -86119,7 +87100,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;
@@ -86127,12 +87109,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 = {};
@@ -89169,6 +90145,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         registerMapChart,
         registerGaugeChart,
         registerWordCloudChart,
+        registerWordCloud3dChart,
         registerFunnelChart,
         registerWaterfallChart,
         registerBoxplotChart,
@@ -89182,6 +90159,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         registerSankeyChart,
         registerHeatmapChart,
         registerSequenceChart,
+        registerCorrelationChart,
         registerCommonChart,
         registerBar3dChart,
         registerPie3dChart,
@@ -89253,6 +90231,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;
@@ -89316,6 +90296,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;
@@ -89368,6 +90349,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;