@visactor/vchart 1.10.3 → 1.10.5-alpha.1

package/build/index.js

@@ -8652,6 +8652,7 @@
     const DefaultStyle = Object.assign(Object.assign(Object.assign(Object.assign({
       opacity: 1,
       background: null,
+      backgroundOpacity: 1,
       backgroundCornerRadius: 0,
       texture: null,
       textureColor: "black",
@@ -13328,7 +13329,7 @@
       }
       tryUpdateGlobalAABBBounds() {
         const b = this.AABBBounds;
-        return this._globalAABBBounds ? this._globalAABBBounds.setValue(b.x1, b.y1, b.x2, b.y2) : this._globalAABBBounds = b.clone(), this.parent && this._globalAABBBounds.transformWithMatrix(this.parent.globalTransMatrix), this._globalAABBBounds;
+        return this._globalAABBBounds ? this._globalAABBBounds.setValue(b.x1, b.y1, b.x2, b.y2) : this._globalAABBBounds = b.clone(), this._globalAABBBounds.empty() || this.parent && this._globalAABBBounds.transformWithMatrix(this.parent.globalTransMatrix), this._globalAABBBounds;
       }
       tryUpdateGlobalTransMatrix() {
         if (this._globalTransMatrix) {
@@ -18918,8 +18919,11 @@
         this.time = BaseRenderContributionTime.beforeFillStroke, this.useStyle = !0, this.order = 0;
       }
       drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, options) {
+        var _a;
         const {
           background: background,
+          backgroundOpacity = null !== (_a = graphic.attribute.fillOpacity) && void 0 !== _a ? _a : graphicAttribute.backgroundOpacity,
+          opacity = graphicAttribute.opacity,
           backgroundMode = graphicAttribute.backgroundMode,
           backgroundFit = graphicAttribute.backgroundFit
         } = graphic.attribute;
@@ -18936,8 +18940,8 @@
           }
           context.clip();
           const b = graphic.AABBBounds;
-          context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), context.restore(), graphic.transMatrix.onlyTranslate() || context.setTransformForCurrent();
-        } else context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = background, context.fill(), context.highPerformanceRestore();
+          context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.globalAlpha = backgroundOpacity * opacity, this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), context.restore(), graphic.transMatrix.onlyTranslate() || context.setTransformForCurrent();
+        } else context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.globalAlpha = backgroundOpacity * opacity, context.fillStyle = background, context.fill(), context.highPerformanceRestore();
       }
       doDrawImage(context, data, b, backgroundMode, backgroundFit) {
         if ("no-repeat" === backgroundMode) context.drawImage(data, b.x1, b.y1, b.width(), b.height());else {
@@ -30979,22 +30983,21 @@
       specialCharSet: "-/: .,@%'\"~" + TextMeasure.ALPHABET_CHAR_SET + TextMeasure.ALPHABET_CHAR_SET.toUpperCase()
     }, null != option ? option : {}), textSpec);
     function measureTextSize(text, textSpec) {
-      let fontFamily = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_TEXT_FONT_FAMILY;
-      var _a, _b;
+      let defaultTextTheme = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
       if (!text) return {
         width: 0,
         height: 0
       };
       const bounds = getTextBounds({
         text: text,
-        fontFamily: null !== (_a = textSpec.fontFamily) && void 0 !== _a ? _a : fontFamily,
-        fontSize: textSpec.fontSize || 12,
-        fontWeight: textSpec.fontWeight,
-        textAlign: null !== (_b = textSpec.textAlign) && void 0 !== _b ? _b : "center",
+        fontFamily: textSpec.fontFamily || defaultTextTheme.fontFamily || DEFAULT_TEXT_FONT_FAMILY,
+        fontSize: textSpec.fontSize || defaultTextTheme.fontSize || 12,
+        fontWeight: textSpec.fontWeight || defaultTextTheme.fontWeight,
+        textAlign: textSpec.textAlign || "center",
         textBaseline: textSpec.textBaseline,
         ellipsis: !!textSpec.ellipsis,
         maxLineWidth: textSpec.maxLineWidth || 1 / 0,
-        lineHeight: textSpec.fontSize || 12
+        lineHeight: textSpec.fontSize || defaultTextTheme.fontSize || 12
       });
       return {
         width: bounds.width(),
@@ -31029,7 +31032,7 @@
         super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, Tag.defaultAttributes, attributes)), this.name = "tag";
       }
       render() {
-        var _a, _b;
+        var _a, _b, _c;
         const {
             text = "",
             textStyle = {},
@@ -31110,11 +31113,11 @@
             y: 0
           });
           isNil$3(textAttrs.lineHeight) && (textAttrs.lineHeight = textStyle.fontSize), textShape = group.createOrUpdateChild("tag-text", textAttrs, "text"), isEmpty(null == state ? void 0 : state.text) || (textShape.states = state.text);
-          const textBounds = measureTextSize(textAttrs.text, textStyle, null === (_a = this.stage) || void 0 === _a ? void 0 : _a.getTheme().text.fontFamily),
+          const textBounds = measureTextSize(textAttrs.text, textStyle, null === (_b = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.getTheme()) || void 0 === _b ? void 0 : _b.text),
             textWidth = textBounds.width,
             textHeight = textBounds.height;
           tagWidth += textWidth;
-          const size = null !== (_b = shape.size) && void 0 !== _b ? _b : 10,
+          const size = null !== (_c = shape.size) && void 0 !== _c ? _c : 10,
             maxSize = isNumber$3(size) ? size : Math.max(size[0], size[1]);
           tagHeight += Math.max(textHeight, shape.visible ? maxSize : 0);
           const {
@@ -32408,7 +32411,9 @@
         state && !isEmpty(state) && (target.states = state);
       }
       _createLabelText(attributes) {
-        return isRichText(attributes, "textType") ? graphicCreator.richtext(richTextAttributeTransform(attributes)) : graphicCreator.text(attributes);
+        var _a, _b;
+        const textAttrs = Object.assign(Object.assign({}, null === (_b = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.getTheme()) || void 0 === _b ? void 0 : _b.text), attributes);
+        return isRichText(attributes, "textType") ? graphicCreator.richtext(richTextAttributeTransform(textAttrs)) : graphicCreator.text(textAttrs);
       }
       _prepare() {
         var _a, _b, _c, _d, _e;
@@ -34691,9 +34696,9 @@
       }
       getLabelAlign(vector, inside, angle) {
         const orient = this.attribute.orient;
-        if (isValidNumber$1(angle) || 0 === vector[0] && 0 === vector[1]) {
-          if ("top" === orient || "bottom" === orient) return getXAxisLabelAlign(orient, angle);
-          if ("left" === orient || "right" === orient) return getYAxisLabelAlign(orient, angle);
+        if (["top", "bottom", "right", "left"].includes(orient) || 0 === vector[0] && 0 === vector[1]) {
+          if ("top" === orient || "bottom" === orient) return getXAxisLabelAlign(inside ? "bottom" === orient ? "top" : "bottom" : orient, angle);
+          if ("left" === orient || "right" === orient) return getYAxisLabelAlign(inside ? "left" === orient ? "right" : "left" : orient, angle);
         }
         return {
           textAlign: this.getTextAlign(vector),
@@ -34837,7 +34842,7 @@
         }
       }
       _getAxisLabelLimitLength(limitSize, layerCount) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         const {
             label: label,
             title: title,
@@ -34851,7 +34856,7 @@
         const axisLineWidth = line && line.visible ? null !== (_b = line.style.lineWidth) && void 0 !== _b ? _b : 1 : 0,
           tickLength = tick && tick.visible ? null !== (_c = tick.length) && void 0 !== _c ? _c : 4 : 0;
         if (title && title.visible && "string" == typeof title.text) {
-          titleHeight = measureTextSize(title.text, title.textStyle, null === (_d = this.stage) || void 0 === _d ? void 0 : _d.getTheme().text.fontFamily).height;
+          titleHeight = measureTextSize(title.text, title.textStyle, null === (_e = null === (_d = this.stage) || void 0 === _d ? void 0 : _d.getTheme()) || void 0 === _e ? void 0 : _e.text).height;
           const padding = normalizePadding$1(title.padding);
           titleSpacing = title.space + padding[0] + padding[2];
         }
@@ -37148,7 +37153,7 @@
         };
       }
       render() {
-        var _a, _b;
+        var _a, _b, _c;
         this._reset();
         const {
           layout = "horizontal",
@@ -37190,7 +37195,7 @@
           } = measureTextSize(this._getPageText(total), Object.assign({
             textAlign: "center",
             textBaseline: "middle"
-          }, textStyle), null === (_b = this.stage) || void 0 === _b ? void 0 : _b.getTheme().text.fontFamily),
+          }, textStyle), null === (_c = null === (_b = this.stage) || void 0 === _b ? void 0 : _b.getTheme()) || void 0 === _c ? void 0 : _c.text),
           handlerSizeX = isNumber$3(handlerSize) ? handlerSize : handlerSize[0],
           handlerSizeY = isNumber$3(handlerSize) ? handlerSize : handlerSize[1],
           text = graphicCreator.text(Object.assign({
@@ -37420,7 +37425,7 @@
             maxRow = 2,
             maxWidth: maxWidth,
             maxHeight: maxHeight,
-            defaultSelected = [],
+            defaultSelected: defaultSelected,
             lazyload: lazyload,
             autoPage: autoPage
           } = this.attribute,
@@ -37446,7 +37451,9 @@
           } = this._itemContext;
         for (let index = startIndex, len = legendItems.length; index < len && !(lazyload && pages > this._itemContext.currentPage * maxPages); index++) {
           lazyload && (this._itemContext.startIndex = index + 1), item = legendItems[index], item.id || (item.id = item.label), item.index = index;
-          const itemGroup = this._renderEachItem(item, !!isEmpty(defaultSelected) || (null == defaultSelected ? void 0 : defaultSelected.includes(item.label)), index, legendItems),
+          let isSelected = !0;
+          isArray$3(defaultSelected) && (isSelected = defaultSelected.includes(item.label));
+          const itemGroup = this._renderEachItem(item, isSelected, index, legendItems),
             itemWidth = itemGroup.attribute.width,
             itemHeight = itemGroup.attribute.height;
           this._itemHeight = Math.max(this._itemHeight, itemHeight), maxWidthInCol = Math.max(itemWidth, maxWidthInCol), this._itemMaxWidth = Math.max(itemWidth, this._itemMaxWidth), isHorizontal ? (isValid$3(maxWidth) && (isScrollbar && autoPage ? (pages = Math.ceil((startX + itemWidth) / maxWidth), doWrap = pages > 1) : startX + itemWidth > maxWidth && (doWrap = !0, startX > 0 && (pages += 1, startX = 0, startY += itemHeight + spaceRow))), 0 === startX && 0 === startY || itemGroup.setAttributes({
@@ -40152,12 +40159,12 @@
         group.setAttribute("y", size.height / 2 - totalHeight / 2), group.setAttribute("x", size.width / 2);
       }
       _setLocalAutoFit(limit, indicatorItem, indicatorItemSpec) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         if ("default" !== (null !== (_a = indicatorItemSpec.fitStrategy) && void 0 !== _a ? _a : "default")) return;
-        const originWidth = measureTextSize(null !== (_c = null === (_b = indicatorItemSpec.style) || void 0 === _b ? void 0 : _b.text) && void 0 !== _c ? _c : "", null !== (_d = indicatorItemSpec.style) && void 0 !== _d ? _d : {}, null === (_e = this.stage) || void 0 === _e ? void 0 : _e.getTheme().text.fontFamily).width;
+        const originWidth = measureTextSize(null !== (_c = null === (_b = indicatorItemSpec.style) || void 0 === _b ? void 0 : _b.text) && void 0 !== _c ? _c : "", null !== (_d = indicatorItemSpec.style) && void 0 !== _d ? _d : {}, null === (_f = null === (_e = this.stage) || void 0 === _e ? void 0 : _e.getTheme()) || void 0 === _f ? void 0 : _f.text).width;
         if (originWidth > 0) {
-          const ratio = limit * (null !== (_f = indicatorItemSpec.fitPercent) && void 0 !== _f ? _f : .5) / originWidth,
-            fontSize = Math.floor((null !== (_h = null === (_g = indicatorItemSpec.style) || void 0 === _g ? void 0 : _g.fontSize) && void 0 !== _h ? _h : 20) * ratio);
+          const ratio = limit * (null !== (_g = indicatorItemSpec.fitPercent) && void 0 !== _g ? _g : .5) / originWidth,
+            fontSize = Math.floor((null !== (_j = null === (_h = indicatorItemSpec.style) || void 0 === _h ? void 0 : _h.fontSize) && void 0 !== _j ? _j : 20) * ratio);
           indicatorItem.setAttribute("fontSize", fontSize), indicatorItem.setAttribute("lineHeight", isValid$3(indicatorItemSpec.style.lineHeight) ? indicatorItemSpec.style.lineHeight : fontSize);
         }
       }
@@ -40284,13 +40291,13 @@
         }, this.renderForward = () => {
           this._forwardController.setAttributes(this._forwardAttr.style);
         }, this.play = () => {
-          this._dispatchEvent("ControllerEventEnum.OnPlay");
+          this._dispatchEvent(ControllerEventEnum.OnPlay);
         }, this.pause = () => {
-          this._dispatchEvent("ControllerEventEnum.OnPause");
+          this._dispatchEvent(ControllerEventEnum.OnPause);
         }, this.forward = () => {
-          this._dispatchEvent("ControllerEventEnum.OnForward");
+          this._dispatchEvent(ControllerEventEnum.OnForward);
         }, this.backward = () => {
-          this._dispatchEvent("ControllerEventEnum.OnBackward");
+          this._dispatchEvent(ControllerEventEnum.OnBackward);
         }, this.togglePlay = () => {
           this._playController.setAttributes(this._startAttr.style), this._isPaused = !0;
         }, this.togglePause = () => {
@@ -40411,15 +40418,15 @@
 
     class BasePlayer extends AbstractComponent {
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, BasePlayer.defaultAttributes, attributes)), this._data = [], this._layoutInfo = {}, this._updateSliderAttrs = () => {
-          var _a, _b, _c;
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, BasePlayer.defaultAttributes, attributes)), this._data = [], this._dataIndex = 0, this._layoutInfo = {}, this._updateSliderAttrs = () => {
+          var _a, _b;
           let handlerSize;
           isValidNumber$1(this._handlerStyle.size) ? handlerSize = this._handlerStyle.size : this._handlerStyle.size && this._handlerStyle.size.length && (handlerSize = max$1(this._handlerStyle.size[0], this._handlerStyle.size[1]));
           const attrs = {
             visible: this._sliderVisible,
             min: this._minIndex,
             max: this._maxIndex,
-            value: null !== (_a = this.attribute.dataIndex) && void 0 !== _a ? _a : 0,
+            value: this._dataIndex,
             railWidth: this._railStyle.width,
             railHeight: this._railStyle.height,
             railStyle: this._railStyle,
@@ -40443,11 +40450,11 @@
           };
           if (isHorizontal$1(this._orient)) {
             const railWidth = Math.max(0, this._layoutInfo.slider.size),
-              railHeight = null !== (_b = this._railStyle.height) && void 0 !== _b ? _b : RailDefaultSize[1];
+              railHeight = null !== (_a = this._railStyle.height) && void 0 !== _a ? _a : RailDefaultSize[1];
             attrs.layout = "horizontal", attrs.railHeight = railHeight, attrs.railWidth = railWidth, attrs.x = this._layoutInfo.slider.x, attrs.y = this._layoutInfo.slider.y;
           } else {
             const railHeight = Math.max(0, this._layoutInfo.slider.size),
-              railWidth = null !== (_c = this._railStyle.width) && void 0 !== _c ? _c : RailDefaultSize[1];
+              railWidth = null !== (_b = this._railStyle.width) && void 0 !== _b ? _b : RailDefaultSize[1];
             attrs.layout = "vertical", attrs.railWidth = railWidth, attrs.railHeight = railHeight, attrs.x = this._layoutInfo.slider.x, attrs.y = this._layoutInfo.slider.y;
           }
           return attrs;
@@ -40506,7 +40513,7 @@
         }, this._initController = () => {
           const attrs = this._updateControllerAttrs();
           this._controller = new Controller(attrs), this._controllerVisible && this.add(this._controller);
-        }, this._initAttributes(), this._initLayoutInfo(), this._initController(), this._initSlider();
+        }, this._initAttributes(), this._initDataIndex(), this._initLayoutInfo(), this._initController(), this._initSlider();
       }
       _initAttributes() {
         this._size = this.attribute.size, this._orient = this.attribute.orient, this._data = this.attribute.data, this._minIndex = 0, this._maxIndex = this._data.length - 1;
@@ -40516,6 +40523,10 @@
         } = this.attribute;
         this._sliderVisible = slider.visible, this._railStyle = Object.assign({}, slider.railStyle), this._trackStyle = Object.assign({}, slider.trackStyle), this._handlerStyle = Object.assign({}, slider.handlerStyle), this._controllerVisible = controller.visible, this._start = Object.assign({}, controller.start), this._pause = Object.assign({}, controller.pause), this._forward = Object.assign({}, controller.forward), this._backward = Object.assign({}, controller.backward);
       }
+      _initDataIndex() {
+        var _a;
+        this._dataIndex = null !== (_a = this.attribute.dataIndex) && void 0 !== _a ? _a : 0;
+      }
       _initLayoutInfo() {
         var _a, _b, _c;
         const controllers = [this._start, this._backward, this._forward].sort((a, b) => a.order - b.order),
@@ -40640,8 +40651,11 @@
     class DiscretePlayer extends BasePlayer {
       constructor(attributes, options) {
         super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, attributes)), this._activeIndex = -1, this._isReachEnd = !1, this._initAttributes = () => {
-          var _a, _b, _c, _d;
-          super._initAttributes(), this._alternate = null !== (_a = this.attribute.alternate) && void 0 !== _a && _a, this._interval = null !== (_b = this.attribute.interval) && void 0 !== _b ? _b : 1e3, this._direction = null !== (_c = this.attribute.direction) && void 0 !== _c ? _c : DirectionEnum.Default, this._dataIndex = isNil$3(this.attribute.dataIndex) ? "default" === this._direction ? this._minIndex : this._maxIndex : null !== (_d = this.attribute.dataIndex) && void 0 !== _d ? _d : 0, this._slider.setAttribute("value", this._dataIndex);
+          var _a, _b, _c;
+          super._initAttributes(), this._alternate = null !== (_a = this.attribute.alternate) && void 0 !== _a && _a, this._interval = null !== (_b = this.attribute.interval) && void 0 !== _b ? _b : 1e3, this._direction = null !== (_c = this.attribute.direction) && void 0 !== _c ? _c : DirectionEnum.Default;
+        }, this._initDataIndex = () => {
+          var _a;
+          this._dataIndex = isNil$3(this.attribute.dataIndex) ? "default" === this._direction ? this._minIndex : this._maxIndex : null !== (_a = this.attribute.dataIndex) && void 0 !== _a ? _a : 0, this._slider.setAttribute("value", this._dataIndex);
         }, this._initEvents = () => {
           this.attribute.disableTriggerEvent || (this._controller.addEventListener(ControllerEventEnum.OnPlay, e => {
             e.stopPropagation(), this.play();
@@ -40683,7 +40697,7 @@
         }, this.forward = () => {
           const index = Math.min(this._dataIndex + 1, this._maxIndex);
           this._updateDataIndex(index), this.dispatchCustomEvent(PlayerEventEnum.change), this.dispatchCustomEvent(PlayerEventEnum.forward);
-        }, this._initAttributes(), this._initEvents();
+        }, this._initAttributes(), this._initDataIndex(), this._initEvents();
       }
       setAttributes(params, forceUpdateTag) {
         super.setAttributes(params, forceUpdateTag), this._initAttributes();
@@ -40722,10 +40736,13 @@
     class ContinuousPlayer extends BasePlayer {
       constructor(attributes) {
         super(attributes), this._isPlaying = !1, this._startTime = Date.now(), this._initAttributes = () => {
-          var _a, _b;
-          super._initAttributes(), this._maxIndex = this._data.length, this._slider.setAttribute("max", this._maxIndex), this._isPlaying = !1, this._elapsed = 0, this._interval = null !== (_a = this.attribute.interval) && void 0 !== _a ? _a : 1e3, this._dataIndex = null !== (_b = this.attribute.dataIndex) && void 0 !== _b ? _b : this._minIndex;
+          var _a;
+          super._initAttributes(), this._maxIndex = this._data.length, this._slider.setAttribute("max", this._maxIndex), this._isPlaying = !1, this._elapsed = 0, this._interval = null !== (_a = this.attribute.interval) && void 0 !== _a ? _a : 1e3;
           const frames = this._data.length;
           this.attribute.totalDuration && this._data.length ? (this._totalDuration = this.attribute.totalDuration, this._interval = this._totalDuration / (null != frames ? frames : 1)) : (this._totalDuration = this._interval * frames, this._interval = this.attribute.interval);
+        }, this._initDataIndex = () => {
+          var _a;
+          this._dataIndex = null !== (_a = this.attribute.dataIndex) && void 0 !== _a ? _a : this._minIndex;
         }, this._initEvents = () => {
           this.attribute.disableTriggerEvent || (this._controller.addEventListener(ControllerEventEnum.OnPlay, e => {
             e.stopPropagation(), this.play();
@@ -40771,7 +40788,7 @@
             interval = 1 * this._interval,
             elapsed = this._elapsed + interval;
           elapsed >= this._totalDuration ? (this._startTime = now - this._totalDuration, this._elapsed = this._totalDuration) : (this._startTime = this._startTime - interval, this._elapsed = elapsed), this._updateSlider(), this.dispatchCustomEvent(PlayerEventEnum.forward);
-        }, this._initAttributes(), this._initEvents();
+        }, this._initAttributes(), this._initDataIndex(), this._initEvents();
       }
       dispatchCustomEvent(eventType) {
         super.dispatchCustomEvent(eventType, this._dataIndex);
@@ -41787,6 +41804,96 @@
       };
     }
 
+    function isDataView(obj) {
+      return obj instanceof DataView;
+    }
+    function isHTMLElement(obj) {
+      try {
+        return obj instanceof Element;
+      } catch (_a) {
+        const htmlElementKeys = ["children", "innerHTML", "classList", "setAttribute", "tagName", "getBoundingClientRect"],
+          keys = Object.keys(obj);
+        return htmlElementKeys.every(key => keys.includes(key));
+      }
+    }
+
+    function cloneDeepSpec(spec) {
+      let excludeKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ["data"];
+      const value = spec;
+      let result;
+      if (!isValid$3(value) || "object" != typeof value) return value;
+      if (isDataView(value) || isHTMLElement(value)) return value;
+      const isArr = isArray$3(value),
+        length = value.length;
+      result = isArr ? new Array(length) : "object" == typeof value ? {} : isBoolean$1(value) || isNumber$3(value) || isString$1(value) ? value : isDate$1(value) ? new Date(+value) : void 0;
+      const props = isArr ? void 0 : Object.keys(Object(value));
+      let index = -1;
+      if (result) for (; ++index < (props || value).length;) {
+        const key = props ? props[index] : index,
+          subValue = value[key];
+        (null == excludeKeys ? void 0 : excludeKeys.includes(key.toString())) ? result[key] = subValue : result[key] = cloneDeepSpec(subValue, excludeKeys);
+      }
+      return result;
+    }
+
+    function baseMerge(target, source) {
+      let shallowArray = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !1;
+      if (source) {
+        if (target === source) return;
+        if (isValid$3(source) && "object" == typeof source) {
+          const iterable = Object(source),
+            props = [];
+          for (const key in iterable) props.push(key);
+          let {
+              length: length
+            } = props,
+            propIndex = -1;
+          for (; length--;) {
+            const key = props[++propIndex];
+            isValid$3(iterable[key]) && "object" == typeof iterable[key] && !isArray$3(target[key]) ? baseMergeDeep(target, source, key, shallowArray) : assignMergeValue(target, key, iterable[key]);
+          }
+        }
+      }
+    }
+    function baseMergeDeep(target, source, key) {
+      let shallowArray = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;
+      const objValue = target[key],
+        srcValue = source[key];
+      let newValue = source[key],
+        isCommon = !0;
+      if (isArray$3(srcValue)) {
+        if (shallowArray) newValue = [];else if (isArray$3(objValue)) newValue = objValue;else if (isArrayLike$1(objValue)) {
+          newValue = new Array(objValue.length);
+          let index = -1;
+          const length = objValue.length;
+          for (; ++index < length;) newValue[index] = objValue[index];
+        }
+      } else isPlainObject$1(srcValue) ? (newValue = null != objValue ? objValue : {}, "function" != typeof objValue && "object" == typeof objValue || (newValue = {})) : isCommon = !1;
+      isCommon && baseMerge(newValue, srcValue, shallowArray), assignMergeValue(target, key, newValue);
+    }
+    function assignMergeValue(target, key, value) {
+      (void 0 !== value && !eq(target[key], value) || void 0 === value && !(key in target)) && (target[key] = value);
+    }
+    function eq(value, other) {
+      return value === other || Number.isNaN(value) && Number.isNaN(other);
+    }
+    function mergeSpec(target) {
+      let sourceIndex = -1;
+      const length = arguments.length <= 1 ? 0 : arguments.length - 1;
+      for (; ++sourceIndex < length;) {
+        baseMerge(target, sourceIndex + 1 < 1 || arguments.length <= sourceIndex + 1 ? undefined : arguments[sourceIndex + 1], !0);
+      }
+      return target;
+    }
+    function mergeSpecWithFilter(target, filter, spec, forceMerge) {
+      Object.keys(target).forEach(k => {
+        if (isObject$2(filter)) filter.type === k && (isArray$3(target[k]) ? target[k].length >= filter.index && (target[k][filter.index] = forceMerge ? mergeSpec({}, target[k][filter.index], spec) : spec) : target[k] = forceMerge ? mergeSpec({}, target[k], spec) : spec);else if (isArray$3(target[k])) {
+          const index = target[k].findIndex(_s => _s.id === filter);
+          index >= 0 && (target[k][index] = forceMerge ? mergeSpec({}, target[k][index], spec) : spec);
+        } else target.id === filter && (target[k] = forceMerge ? mergeSpec({}, target[k], spec) : spec);
+      });
+    }
+
     const isClose = isNumberClose;
     function polarToCartesian(point) {
         if (!point.radius) {
@@ -51112,609 +51219,6 @@
         return originNumValue;
     };
 
-    function convertBackgroundSpec(bg) {
-        if (!bg) {
-            return null;
-        }
-        if (typeof bg === 'string') {
-            return {
-                fill: bg,
-                fillOpacity: 1
-            };
-        }
-        if (typeof bg !== 'object') {
-            return null;
-        }
-        const result = pickWithout(bg, ['x', 'y', 'width', 'height', 'x1', 'y1', 'image']);
-        result.background = bg.image;
-        return result;
-    }
-
-    function isDataView(obj) {
-        return obj instanceof DataView;
-    }
-    function isHTMLElement(obj) {
-        try {
-            return obj instanceof Element;
-        }
-        catch (_a) {
-            const htmlElementKeys = [
-                'children',
-                'innerHTML',
-                'classList',
-                'setAttribute',
-                'tagName',
-                'getBoundingClientRect'
-            ];
-            const keys = Object.keys(obj);
-            return htmlElementKeys.every(key => keys.includes(key));
-        }
-    }
-
-    function cloneDeepSpec(spec, excludeKeys = ['data']) {
-        const value = spec;
-        let result;
-        if (!isValid$3(value) || typeof value !== 'object') {
-            return value;
-        }
-        if (isDataView(value) || isHTMLElement(value)) {
-            return value;
-        }
-        const isArr = isArray$3(value);
-        const length = value.length;
-        if (isArr) {
-            result = new Array(length);
-        }
-        else if (typeof value === 'object') {
-            result = {};
-        }
-        else if (isBoolean$1(value) || isNumber$3(value) || isString$1(value)) {
-            result = value;
-        }
-        else if (isDate$1(value)) {
-            result = new Date(+value);
-        }
-        else {
-            result = undefined;
-        }
-        const props = isArr ? undefined : Object.keys(Object(value));
-        let index = -1;
-        if (result) {
-            while (++index < (props || value).length) {
-                const key = props ? props[index] : index;
-                const subValue = value[key];
-                if (excludeKeys === null || excludeKeys === void 0 ? void 0 : excludeKeys.includes(key.toString())) {
-                    result[key] = subValue;
-                }
-                else {
-                    result[key] = cloneDeepSpec(subValue, excludeKeys);
-                }
-            }
-        }
-        return result;
-    }
-
-    function baseMerge(target, source, shallowArray = false) {
-        if (source) {
-            if (target === source) {
-                return;
-            }
-            if (isValid$3(source) && typeof source === 'object') {
-                const iterable = Object(source);
-                const props = [];
-                for (const key in iterable) {
-                    props.push(key);
-                }
-                let { length } = props;
-                let propIndex = -1;
-                while (length--) {
-                    const key = props[++propIndex];
-                    if (isValid$3(iterable[key]) &&
-                        typeof iterable[key] === 'object' &&
-                        !isArray$3(target[key])) {
-                        baseMergeDeep(target, source, key, shallowArray);
-                    }
-                    else {
-                        assignMergeValue(target, key, iterable[key]);
-                    }
-                }
-            }
-        }
-    }
-    function baseMergeDeep(target, source, key, shallowArray = false) {
-        const objValue = target[key];
-        const srcValue = source[key];
-        let newValue = source[key];
-        let isCommon = true;
-        if (isArray$3(srcValue)) {
-            if (shallowArray) {
-                newValue = [];
-            }
-            else if (isArray$3(objValue)) {
-                newValue = objValue;
-            }
-            else if (isArrayLike$1(objValue)) {
-                newValue = new Array(objValue.length);
-                let index = -1;
-                const length = objValue.length;
-                while (++index < length) {
-                    newValue[index] = objValue[index];
-                }
-            }
-        }
-        else if (isPlainObject$1(srcValue)) {
-            newValue = objValue !== null && objValue !== void 0 ? objValue : {};
-            if (typeof objValue === 'function' || typeof objValue !== 'object') {
-                newValue = {};
-            }
-        }
-        else {
-            isCommon = false;
-        }
-        if (isCommon) {
-            baseMerge(newValue, srcValue, shallowArray);
-        }
-        assignMergeValue(target, key, newValue);
-    }
-    function assignMergeValue(target, key, value) {
-        if ((value !== undefined && !eq(target[key], value)) || (value === undefined && !(key in target))) {
-            target[key] = value;
-        }
-    }
-    function eq(value, other) {
-        return value === other || (Number.isNaN(value) && Number.isNaN(other));
-    }
-    function mergeSpec(target, ...sources) {
-        let sourceIndex = -1;
-        const length = sources.length;
-        while (++sourceIndex < length) {
-            const source = sources[sourceIndex];
-            baseMerge(target, source, true);
-        }
-        return target;
-    }
-    function mergeSpecWithFilter(target, filter, spec, forceMerge) {
-        Object.keys(target).forEach(k => {
-            if (isObject$2(filter)) {
-                if (filter.type === k) {
-                    if (isArray$3(target[k])) {
-                        if (target[k].length >= filter.index) {
-                            target[k][filter.index] = forceMerge ? mergeSpec({}, target[k][filter.index], spec) : spec;
-                        }
-                    }
-                    else {
-                        target[k] = forceMerge ? mergeSpec({}, target[k], spec) : spec;
-                    }
-                }
-            }
-            else {
-                if (isArray$3(target[k])) {
-                    const index = target[k].findIndex((_s) => _s.id === filter);
-                    if (index >= 0) {
-                        target[k][index] = forceMerge ? mergeSpec({}, target[k][index], spec) : spec;
-                    }
-                }
-                else if (target.id === filter) {
-                    target[k] = forceMerge ? mergeSpec({}, target[k], spec) : spec;
-                }
-            }
-        });
-    }
-
-    function mergeTheme(target, ...sources) {
-        return mergeSpec(transformThemeToMerge(target), ...sources.map(transformThemeToMerge));
-    }
-    function transformThemeToMerge(theme) {
-        var _a;
-        if (!theme) {
-            return theme;
-        }
-        const colorScheme = transformColorSchemeToMerge(theme.colorScheme);
-        const { series } = theme;
-        const { mark: markByType, markByName } = theme;
-        let newSeriesTheme;
-        if (markByType || markByName) {
-            newSeriesTheme = Object.keys(seriesMarkInfoMap).reduce((newSeriesTheme, key) => {
-                var _a;
-                const value = (_a = series === null || series === void 0 ? void 0 : series[key]) !== null && _a !== void 0 ? _a : {};
-                newSeriesTheme[key] = transformSeriesThemeToMerge(value, key, markByType, markByName);
-                return newSeriesTheme;
-            }, {});
-        }
-        return Object.assign({}, theme, {
-            colorScheme,
-            token: (_a = theme.token) !== null && _a !== void 0 ? _a : {},
-            series: Object.assign({}, theme.series, newSeriesTheme)
-        });
-    }
-    function transformColorSchemeToMerge(colorScheme) {
-        if (colorScheme) {
-            colorScheme = Object.keys(colorScheme).reduce((scheme, key) => {
-                const value = colorScheme[key];
-                scheme[key] = transformColorSchemeToStandardStruct(value);
-                return scheme;
-            }, {});
-        }
-        return colorScheme;
-    }
-    function transformSeriesThemeToMerge(seriesTheme, seriesType, markByType, markByName) {
-        if (!seriesMarkInfoMap[seriesType]) {
-            return seriesTheme;
-        }
-        const newTheme = {};
-        Object.values(seriesMarkInfoMap[seriesType]).forEach(({ type, name }) => {
-            newTheme[name] = mergeSpec({}, markByType === null || markByType === void 0 ? void 0 : markByType[array(type)[0]], markByName === null || markByName === void 0 ? void 0 : markByName[name], seriesTheme === null || seriesTheme === void 0 ? void 0 : seriesTheme[name]);
-        });
-        return Object.assign(Object.assign({}, seriesTheme), newTheme);
-    }
-
-    function queryToken(tokenMap, tokenKey) {
-        if (tokenMap && tokenKey.key in tokenMap) {
-            return tokenMap[tokenKey.key];
-        }
-        return tokenKey.default;
-    }
-    function isTokenKey(obj) {
-        return obj && obj.type === 'token' && !!obj.key;
-    }
-
-    const token = {
-        fontFamily: 'PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol',
-        fontSize: 14,
-        l1FontSize: 32,
-        l1LineHeight: '150%',
-        l2FontSize: 20,
-        l2LineHeight: '140%',
-        l3FontSize: 16,
-        l3LineHeight: '150%',
-        l4FontSize: 14,
-        l4LineHeight: '150%',
-        l5FontSize: 12,
-        l5LineHeight: '130%',
-        l6FontSize: 10,
-        l6LineHeight: '120%'
-    };
-
-    const IGNORE_KEYS = ['animationThreshold', 'colorScheme', 'name', 'padding'];
-    function preprocessTheme(obj, colorScheme, tokenMap, seriesSpec) {
-        if (!obj) {
-            return obj;
-        }
-        if (!colorScheme) {
-            colorScheme = obj.colorScheme;
-        }
-        if (!tokenMap) {
-            tokenMap = obj.token;
-        }
-        const newObj = {};
-        Object.keys(obj).forEach(key => {
-            const value = obj[key];
-            if (IGNORE_KEYS.includes(key)) {
-                newObj[key] = value;
-            }
-            else if (isPlainObject$1(value)) {
-                if (isColorKey(value)) {
-                    newObj[key] = getActualColor(value, colorScheme, seriesSpec);
-                }
-                else if (isTokenKey(value)) {
-                    newObj[key] = queryToken(tokenMap, value);
-                }
-                else {
-                    newObj[key] = preprocessTheme(value, colorScheme, tokenMap, seriesSpec);
-                }
-            }
-            else {
-                newObj[key] = value;
-            }
-        });
-        return newObj;
-    }
-
-    function specTransform(spec, special = {
-        data: v => v
-    }) {
-        if (!spec) {
-            return spec;
-        }
-        if (spec.constructor === Object) {
-            const result = {};
-            for (const key in spec) {
-                if (Object.prototype.hasOwnProperty.call(spec, key)) {
-                    if (special[key]) {
-                        result[key] = special[key](spec[key]);
-                        continue;
-                    }
-                    result[key] = specTransform(spec[key], special);
-                }
-            }
-            return result;
-        }
-        if (isArray$3(spec)) {
-            return spec.map(s => specTransform(s, special));
-        }
-        return spec;
-    }
-    function functionTransform(spec, VChart) {
-        if (!spec) {
-            return spec;
-        }
-        if (isPlainObject$1(spec)) {
-            const result = {};
-            for (const key in spec) {
-                if (Object.prototype.hasOwnProperty.call(spec, key)) {
-                    if (isString$1(spec[key]) && VChart.getFunction(spec[key])) {
-                        result[key] = VChart.getFunction(spec[key]);
-                        continue;
-                    }
-                    result[key] = functionTransform(spec[key], VChart);
-                }
-            }
-            return result;
-        }
-        if (isArray$3(spec)) {
-            return spec.map((s) => functionTransform(s, VChart));
-        }
-        return spec;
-    }
-
-    const initTextMeasure = (textSpec, option, useNaiveCanvas) => {
-        return initTextMeasure$2(textSpec, option, useNaiveCanvas, {
-            fontFamily: token.fontFamily,
-            fontSize: token.fontSize
-        });
-    };
-    const measureText = (text, textSpec, option, useNaiveCanvas) => {
-        return initTextMeasure(textSpec, option, useNaiveCanvas).measure(text);
-    };
-
-    function mergeFields(targetFields, mergeFields) {
-        for (let i = 0; i < mergeFields.length; i++) {
-            const element = mergeFields[i];
-            const _target = findFields(targetFields, element.key);
-            if (!_target) {
-                targetFields.push(element);
-            }
-            else {
-                _target.operations = [...new Set(_target.operations.concat(element.operations))];
-            }
-        }
-        return targetFields;
-    }
-    function findFields(list, fieldKey) {
-        return list.find(i => i.key === fieldKey);
-    }
-    function getFieldAlias(dataView, field) {
-        var _a;
-        if (!dataView) {
-            return field !== null && field !== void 0 ? field : null;
-        }
-        const fields = dataView.getFields();
-        if (!fields) {
-            return field !== null && field !== void 0 ? field : null;
-        }
-        if (!fields[field]) {
-            return field !== null && field !== void 0 ? field : null;
-        }
-        return (_a = fields[field].alias) !== null && _a !== void 0 ? _a : field;
-    }
-    function getRegionStackGroup(region, setInitialValue, filter) {
-        const stackValueGroup = {};
-        region.getSeries().forEach(s => {
-            var _a;
-            const stackData = s.getStackData();
-            const stackValue = s.getStackValue();
-            const stackValueField = s.getStackValueField();
-            const filterEnable = filter ? filter(s) : true;
-            if (stackData && stackValueField && filterEnable) {
-                stackValueGroup[stackValue] = (_a = stackValueGroup[stackValue]) !== null && _a !== void 0 ? _a : {
-                    nodes: {}
-                };
-                stackGroup(s, stackData, stackValueGroup[stackValue], stackValueField, setInitialValue);
-            }
-        });
-        return stackValueGroup;
-    }
-    function stackTotal(stackData, valueField) {
-        if ('values' in stackData && stackData.values.length) {
-            const total = sum$1(stackData.values, valueField);
-            const percent = max(stackData.values, STACK_FIELD_END_PERCENT);
-            stackData.values.forEach(v => {
-                v[STACK_FIELD_TOTAL] = total;
-                v[STACK_FIELD_TOTAL_PERCENT] = percent;
-                delete v[STACK_FIELD_TOTAL_TOP];
-            });
-            const maxNode = stackData.values.reduce((max, current) => {
-                return current[STACK_FIELD_END] > max[STACK_FIELD_END] ? current : max;
-            });
-            maxNode[STACK_FIELD_TOTAL_TOP] = true;
-            return;
-        }
-        for (const key in stackData.nodes) {
-            stackTotal(stackData.nodes[key], valueField);
-        }
-    }
-    function stackOffsetSilhouette(stackCache) {
-        if (!stackCache.values.length) {
-            return;
-        }
-        const centerValue = stackCache.values[stackCache.values.length - 1][STACK_FIELD_END] / 2;
-        for (let j = 0; j < stackCache.values.length; j++) {
-            stackCache.values[j][STACK_FIELD_START_OffsetSilhouette] = stackCache.values[j][STACK_FIELD_START] - centerValue;
-            stackCache.values[j][STACK_FIELD_END_OffsetSilhouette] = stackCache.values[j][STACK_FIELD_END] - centerValue;
-        }
-    }
-    function stack(stackCache, stackInverse, hasPercent) {
-        if (stackCache.values.length > 0) {
-            let positiveStart = 0;
-            let negativeStart = 0;
-            let sign = 1;
-            let value = 0;
-            const maxLength = stackCache.values.length;
-            for (let index = 0; index < maxLength; index++) {
-                const v = stackCache.values[stackInverse ? maxLength - 1 - index : index];
-                value = v[STACK_FIELD_END];
-                if (value >= 0) {
-                    v[STACK_FIELD_START] = positiveStart;
-                    positiveStart += v[STACK_FIELD_END];
-                    v[STACK_FIELD_END] = positiveStart;
-                }
-                else {
-                    v[STACK_FIELD_START] = negativeStart;
-                    negativeStart += v[STACK_FIELD_END];
-                    v[STACK_FIELD_END] = negativeStart;
-                }
-                v[STACK_FIELD_KEY] = stackCache.key;
-            }
-            if (hasPercent) {
-                for (let index = 0; index < maxLength; index++) {
-                    const v = stackCache.values[stackInverse ? maxLength - 1 - index : index];
-                    value = v[STACK_FIELD_END];
-                    const denominator = value >= 0 ? positiveStart : negativeStart;
-                    sign = value >= 0 ? 1 : -1;
-                    v[STACK_FIELD_START_PERCENT] = denominator === 0 ? 0 : Math.min(1, v[STACK_FIELD_START] / denominator) * sign;
-                    v[STACK_FIELD_END_PERCENT] = denominator === 0 ? 0 : Math.min(1, v[STACK_FIELD_END] / denominator) * sign;
-                }
-            }
-        }
-        for (const key in stackCache.nodes) {
-            stack(stackCache.nodes[key], stackInverse, hasPercent);
-        }
-    }
-    function stackGroup(s, stackData, stackCache, valueField, setInitialValue, stackKey) {
-        if ('values' in stackData) {
-            setInitialValue && stackData.values.forEach(v => (v[STACK_FIELD_END] = toValidNumber(v[valueField])));
-            stackCache.values.push(...stackData.values);
-            stackCache.series.push({ s: s, values: stackData.values });
-            return;
-        }
-        for (const key in stackData.nodes) {
-            const newStackKey = stackKey ? `${stackKey}_${key}` : key;
-            !stackCache.nodes[key] &&
-                (stackCache.nodes[key] = {
-                    values: [],
-                    series: [],
-                    nodes: {},
-                    key: newStackKey
-                });
-            stackGroup(s, stackData.nodes[key], stackCache.nodes[key], valueField, setInitialValue, newStackKey);
-        }
-    }
-
-    const findHierarchyNode = (hierarchyData, key, keyField = 'key', childrenField = 'children') => {
-        for (let i = 0; i < hierarchyData.length; i++) {
-            const node = hierarchyData[i];
-            if (node[keyField] === key) {
-                return node;
-            }
-            if (node[childrenField]) {
-                const result = findHierarchyNode(node[childrenField], key, keyField, childrenField);
-                if (result) {
-                    return result;
-                }
-            }
-        }
-        return null;
-    };
-    const findHierarchyNodeParent = (hierarchyData, key, keyField = 'key', childrenField = 'children') => {
-        for (let i = 0; i < hierarchyData.length; i++) {
-            const node = hierarchyData[i];
-            if (node[childrenField]) {
-                for (let j = 0; j < node[childrenField].length; j++) {
-                    const childNode = node[childrenField][j];
-                    if (childNode[keyField] === key) {
-                        return node;
-                    }
-                    const result = findHierarchyNodeParent([childNode], key, keyField, childrenField);
-                    if (result) {
-                        return result;
-                    }
-                }
-            }
-        }
-        return null;
-    };
-    const findHierarchyPath = (hierarchyData, key, keyField = 'key', childrenField = 'children') => {
-        const result = [];
-        const dfs = (data, path) => {
-            for (const item of data) {
-                if (item[keyField] === key) {
-                    result.push(...path, item[keyField].toString());
-                    return true;
-                }
-                if (item[childrenField]) {
-                    const res = dfs(item[childrenField], [...path, item[keyField]]);
-                    if (res === true) {
-                        return res;
-                    }
-                }
-            }
-            return false;
-        };
-        dfs(hierarchyData, []);
-        return result;
-    };
-
-    function transformComponentStyle(cfg = {}) {
-        const newConfig = Object.assign({}, cfg);
-        if (isFunction$1(cfg.style)) {
-            newConfig.style = (item, isSelected, index, allItems) => transformToGraphic(cfg.style(item, isSelected, index, allItems));
-        }
-        else if (!isEmpty(cfg.style)) {
-            newConfig.style = transformToGraphic(cfg.style);
-        }
-        if (!isEmpty(cfg.state)) {
-            const newStateStyle = {};
-            Object.keys(cfg.state).forEach(key => {
-                if (isFunction$1(cfg.state[key])) {
-                    newStateStyle[key] = (item, isSelected, index, allItems) => transformToGraphic(cfg.state[key](item, isSelected, index, allItems));
-                }
-                else if (!isEmpty(cfg.state[key])) {
-                    newStateStyle[key] = transformToGraphic(cfg.state[key]);
-                }
-            });
-            newConfig.state = newStateStyle;
-        }
-        return newConfig;
-    }
-    function transformStateStyle(stateStyle) {
-        if (isEmpty(stateStyle)) {
-            return null;
-        }
-        const newStateStyle = {};
-        Object.keys(stateStyle).forEach(key => {
-            if (isFunction$1(stateStyle[key])) {
-                newStateStyle[key] = (value, index, datum, data) => transformToGraphic(stateStyle[key](value, index, datum, data));
-            }
-            else if (!isEmpty(stateStyle[key])) {
-                newStateStyle[key] = transformToGraphic(stateStyle[key]);
-            }
-        });
-        return newStateStyle;
-    }
-    function transformAxisLabelStateStyle(stateStyle) {
-        if (isEmpty(stateStyle)) {
-            return null;
-        }
-        const newStateStyle = {};
-        Object.keys(stateStyle).forEach(key => {
-            if (isFunction$1(stateStyle[key])) {
-                newStateStyle[key] = (datum, index, data, layer) => {
-                    return transformToGraphic(stateStyle[key](datum.rawValue, index, datum, data, layer));
-                };
-            }
-            else if (!isEmpty(stateStyle[key])) {
-                newStateStyle[key] = transformToGraphic(stateStyle[key]);
-            }
-        });
-        return newStateStyle;
-    }
-    function transformToGraphic(style) {
-        if (style === null || style === void 0 ? void 0 : style.angle) {
-            style.angle = degreeToRadian(style.angle);
-        }
-        return style;
-    }
-
     const dataScheme = [
         {
             maxDomainLength: 10,
@@ -53424,6 +52928,33 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         scrollBar
     };
 
+    function queryToken(tokenMap, tokenKey) {
+        if (tokenMap && tokenKey.key in tokenMap) {
+            return tokenMap[tokenKey.key];
+        }
+        return tokenKey.default;
+    }
+    function isTokenKey(obj) {
+        return obj && obj.type === 'token' && !!obj.key;
+    }
+
+    const token = {
+        fontFamily: 'PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol',
+        fontSize: 14,
+        l1FontSize: 32,
+        l1LineHeight: '150%',
+        l2FontSize: 20,
+        l2LineHeight: '140%',
+        l3FontSize: 16,
+        l3LineHeight: '150%',
+        l4FontSize: 14,
+        l4LineHeight: '150%',
+        l5FontSize: 12,
+        l5LineHeight: '130%',
+        l6FontSize: 10,
+        l6LineHeight: '120%'
+    };
+
     const lightTheme = {
         name: 'light',
         background: { type: 'palette', key: 'backgroundColor' },
@@ -53490,6 +53021,88 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
     };
 
+    function mergeTheme(target, ...sources) {
+        return mergeSpec(transformThemeToMerge(target), ...sources.map(transformThemeToMerge));
+    }
+    function transformThemeToMerge(theme) {
+        var _a;
+        if (!theme) {
+            return theme;
+        }
+        const colorScheme = transformColorSchemeToMerge(theme.colorScheme);
+        const { series } = theme;
+        const { mark: markByType, markByName } = theme;
+        let newSeriesTheme;
+        if (markByType || markByName) {
+            newSeriesTheme = Object.keys(seriesMarkInfoMap).reduce((newSeriesTheme, key) => {
+                var _a;
+                const value = (_a = series === null || series === void 0 ? void 0 : series[key]) !== null && _a !== void 0 ? _a : {};
+                newSeriesTheme[key] = transformSeriesThemeToMerge(value, key, markByType, markByName);
+                return newSeriesTheme;
+            }, {});
+        }
+        return Object.assign({}, theme, {
+            colorScheme,
+            token: (_a = theme.token) !== null && _a !== void 0 ? _a : {},
+            series: Object.assign({}, theme.series, newSeriesTheme)
+        });
+    }
+    function transformColorSchemeToMerge(colorScheme) {
+        if (colorScheme) {
+            colorScheme = Object.keys(colorScheme).reduce((scheme, key) => {
+                const value = colorScheme[key];
+                scheme[key] = transformColorSchemeToStandardStruct(value);
+                return scheme;
+            }, {});
+        }
+        return colorScheme;
+    }
+    function transformSeriesThemeToMerge(seriesTheme, seriesType, markByType, markByName) {
+        if (!seriesMarkInfoMap[seriesType]) {
+            return seriesTheme;
+        }
+        const newTheme = {};
+        Object.values(seriesMarkInfoMap[seriesType]).forEach(({ type, name }) => {
+            newTheme[name] = mergeSpec({}, markByType === null || markByType === void 0 ? void 0 : markByType[array(type)[0]], markByName === null || markByName === void 0 ? void 0 : markByName[name], seriesTheme === null || seriesTheme === void 0 ? void 0 : seriesTheme[name]);
+        });
+        return Object.assign(Object.assign({}, seriesTheme), newTheme);
+    }
+
+    const IGNORE_KEYS = ['animationThreshold', 'colorScheme', 'name', 'padding'];
+    function preprocessTheme(obj, colorScheme, tokenMap, seriesSpec) {
+        if (!obj) {
+            return obj;
+        }
+        if (!colorScheme) {
+            colorScheme = obj.colorScheme;
+        }
+        if (!tokenMap) {
+            tokenMap = obj.token;
+        }
+        const newObj = {};
+        Object.keys(obj).forEach(key => {
+            const value = obj[key];
+            if (IGNORE_KEYS.includes(key)) {
+                newObj[key] = value;
+            }
+            else if (isPlainObject$1(value)) {
+                if (isColorKey(value)) {
+                    newObj[key] = getActualColor(value, colorScheme, seriesSpec);
+                }
+                else if (isTokenKey(value)) {
+                    newObj[key] = queryToken(tokenMap, value);
+                }
+                else {
+                    newObj[key] = preprocessTheme(value, colorScheme, tokenMap, seriesSpec);
+                }
+            }
+            else {
+                newObj[key] = value;
+            }
+        });
+        return newObj;
+    }
+
     const builtinThemes = {
         [lightTheme.name]: lightTheme
     };
@@ -53602,6 +53215,379 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         return {};
     }
 
+    function convertBackgroundSpec(bg) {
+        if (!bg) {
+            return null;
+        }
+        if (typeof bg === 'string') {
+            return {
+                fill: bg,
+                fillOpacity: 1
+            };
+        }
+        if (typeof bg !== 'object') {
+            return null;
+        }
+        const result = pickWithout(bg, ['x', 'y', 'width', 'height', 'x1', 'y1', 'image']);
+        result.background = bg.image;
+        return result;
+    }
+
+    function specTransform(spec, special = {
+        data: v => v
+    }) {
+        if (!spec) {
+            return spec;
+        }
+        if (spec.constructor === Object) {
+            const result = {};
+            for (const key in spec) {
+                if (Object.prototype.hasOwnProperty.call(spec, key)) {
+                    if (special[key]) {
+                        result[key] = special[key](spec[key]);
+                        continue;
+                    }
+                    result[key] = specTransform(spec[key], special);
+                }
+            }
+            return result;
+        }
+        if (isArray$3(spec)) {
+            return spec.map(s => specTransform(s, special));
+        }
+        return spec;
+    }
+    function functionTransform(spec, VChart) {
+        if (!spec) {
+            return spec;
+        }
+        if (isPlainObject$1(spec)) {
+            const result = {};
+            for (const key in spec) {
+                if (Object.prototype.hasOwnProperty.call(spec, key)) {
+                    if (isString$1(spec[key]) && VChart.getFunction(spec[key])) {
+                        result[key] = VChart.getFunction(spec[key]);
+                        continue;
+                    }
+                    result[key] = functionTransform(spec[key], VChart);
+                }
+            }
+            return result;
+        }
+        if (isArray$3(spec)) {
+            return spec.map((s) => functionTransform(s, VChart));
+        }
+        return spec;
+    }
+
+    const initTextMeasure = (textSpec, option, useNaiveCanvas) => {
+        return initTextMeasure$2(textSpec, option, useNaiveCanvas, {
+            fontFamily: token.fontFamily,
+            fontSize: token.fontSize
+        });
+    };
+    const measureText = (text, textSpec, option, useNaiveCanvas) => {
+        return initTextMeasure(textSpec, option, useNaiveCanvas).measure(text);
+    };
+
+    function mergeFields(targetFields, mergeFields) {
+        for (let i = 0; i < mergeFields.length; i++) {
+            const element = mergeFields[i];
+            const _target = findFields(targetFields, element.key);
+            if (!_target) {
+                targetFields.push(element);
+            }
+            else {
+                _target.operations = [...new Set(_target.operations.concat(element.operations))];
+            }
+        }
+        return targetFields;
+    }
+    function findFields(list, fieldKey) {
+        return list.find(i => i.key === fieldKey);
+    }
+    function getFieldAlias(dataView, field) {
+        var _a;
+        if (!dataView) {
+            return field !== null && field !== void 0 ? field : null;
+        }
+        const fields = dataView.getFields();
+        if (!fields) {
+            return field !== null && field !== void 0 ? field : null;
+        }
+        if (!fields[field]) {
+            return field !== null && field !== void 0 ? field : null;
+        }
+        return (_a = fields[field].alias) !== null && _a !== void 0 ? _a : field;
+    }
+    function getRegionStackGroup(region, setInitialValue, filter) {
+        const stackSort = region.getStackSort();
+        const stackValueGroup = {};
+        let stackSortCache = null;
+        if (stackSort) {
+            stackSortCache = {};
+            region.getSeries().forEach(s => {
+                const seriesField = s.getSeriesField();
+                if (seriesField) {
+                    const fieldInfo = s.getRawDataStatisticsByField(seriesField);
+                    if (fieldInfo.values) {
+                        if (!stackSortCache[seriesField]) {
+                            stackSortCache[seriesField] = { lastIndex: 0, sort: {} };
+                        }
+                        fieldInfo.values.forEach((v, i) => {
+                            if (!(v in stackSortCache[seriesField].sort)) {
+                                stackSortCache[seriesField].sort[v] = stackSortCache[seriesField].lastIndex;
+                                stackSortCache[seriesField].lastIndex++;
+                            }
+                        });
+                    }
+                }
+            });
+        }
+        region.getSeries().forEach(s => {
+            var _a;
+            const stackData = s.getStackData();
+            const stackValue = s.getStackValue();
+            const stackValueField = s.getStackValueField();
+            const filterEnable = filter ? filter(s) : true;
+            if (stackData && stackValueField && filterEnable) {
+                stackValueGroup[stackValue] = (_a = stackValueGroup[stackValue]) !== null && _a !== void 0 ? _a : {
+                    nodes: {}
+                };
+                stackGroup(s, stackData, stackValueGroup[stackValue], stackValueField, setInitialValue, stackSortCache);
+            }
+        });
+        return stackSort
+            ? sortStackValueGroup(stackValueGroup)
+            : stackValueGroup;
+    }
+    function sortStackValueGroup(stackValueGroup, stackSortCache) {
+        var _a;
+        for (const key in stackValueGroup) {
+            if ((_a = stackValueGroup[key].sortDatums) === null || _a === void 0 ? void 0 : _a.length) {
+                stackValueGroup[key].sortDatums.sort((a, b) => a.index - b.index);
+                stackValueGroup[key].values = stackValueGroup[key].sortDatums.map(sd => sd.datum);
+            }
+            else {
+                sortStackValueGroup(stackValueGroup[key].nodes);
+            }
+        }
+        return stackValueGroup;
+    }
+    function stackTotal(stackData, valueField) {
+        if ('values' in stackData && stackData.values.length) {
+            const total = sum$1(stackData.values, valueField);
+            const percent = max(stackData.values, STACK_FIELD_END_PERCENT);
+            stackData.values.forEach(v => {
+                v[STACK_FIELD_TOTAL] = total;
+                v[STACK_FIELD_TOTAL_PERCENT] = percent;
+                delete v[STACK_FIELD_TOTAL_TOP];
+            });
+            const maxNode = stackData.values.reduce((max, current) => {
+                return current[STACK_FIELD_END] > max[STACK_FIELD_END] ? current : max;
+            });
+            maxNode[STACK_FIELD_TOTAL_TOP] = true;
+            return;
+        }
+        for (const key in stackData.nodes) {
+            stackTotal(stackData.nodes[key], valueField);
+        }
+    }
+    function stackOffsetSilhouette(stackCache) {
+        if (!stackCache.values.length) {
+            return;
+        }
+        const centerValue = stackCache.values[stackCache.values.length - 1][STACK_FIELD_END] / 2;
+        for (let j = 0; j < stackCache.values.length; j++) {
+            stackCache.values[j][STACK_FIELD_START_OffsetSilhouette] = stackCache.values[j][STACK_FIELD_START] - centerValue;
+            stackCache.values[j][STACK_FIELD_END_OffsetSilhouette] = stackCache.values[j][STACK_FIELD_END] - centerValue;
+        }
+    }
+    function stack(stackCache, stackInverse, hasPercent) {
+        if (stackCache.values.length > 0) {
+            let positiveStart = 0;
+            let negativeStart = 0;
+            let sign = 1;
+            let value = 0;
+            const maxLength = stackCache.values.length;
+            for (let index = 0; index < maxLength; index++) {
+                const v = stackCache.values[stackInverse ? maxLength - 1 - index : index];
+                value = v[STACK_FIELD_END];
+                if (value >= 0) {
+                    v[STACK_FIELD_START] = positiveStart;
+                    positiveStart += v[STACK_FIELD_END];
+                    v[STACK_FIELD_END] = positiveStart;
+                }
+                else {
+                    v[STACK_FIELD_START] = negativeStart;
+                    negativeStart += v[STACK_FIELD_END];
+                    v[STACK_FIELD_END] = negativeStart;
+                }
+                v[STACK_FIELD_KEY] = stackCache.key;
+            }
+            if (hasPercent) {
+                for (let index = 0; index < maxLength; index++) {
+                    const v = stackCache.values[stackInverse ? maxLength - 1 - index : index];
+                    value = v[STACK_FIELD_END];
+                    const denominator = value >= 0 ? positiveStart : negativeStart;
+                    sign = value >= 0 ? 1 : -1;
+                    v[STACK_FIELD_START_PERCENT] = denominator === 0 ? 0 : Math.min(1, v[STACK_FIELD_START] / denominator) * sign;
+                    v[STACK_FIELD_END_PERCENT] = denominator === 0 ? 0 : Math.min(1, v[STACK_FIELD_END] / denominator) * sign;
+                }
+            }
+        }
+        for (const key in stackCache.nodes) {
+            stack(stackCache.nodes[key], stackInverse, hasPercent);
+        }
+    }
+    function stackGroup(s, stackData, stackCache, valueField, setInitialValue, stackSortCache, stackKey) {
+        if ('values' in stackData) {
+            setInitialValue && stackData.values.forEach(v => (v[STACK_FIELD_END] = toValidNumber(v[valueField])));
+            stackCache.series.push({ s: s, values: stackData.values });
+            if (stackSortCache) {
+                const seriesField = s.getSeriesField();
+                stackData.values.forEach(d => {
+                    stackCache.sortDatums.push({
+                        series: s,
+                        datum: d,
+                        index: seriesField ? stackSortCache[seriesField].sort[d[seriesField]] : 0
+                    });
+                });
+            }
+            else {
+                stackCache.values.push(...stackData.values);
+            }
+            return;
+        }
+        for (const key in stackData.nodes) {
+            const newStackKey = stackKey ? `${stackKey}_${key}` : key;
+            !stackCache.nodes[key] &&
+                (stackCache.nodes[key] = {
+                    values: [],
+                    series: [],
+                    nodes: {},
+                    sortDatums: [],
+                    key: newStackKey
+                });
+            stackGroup(s, stackData.nodes[key], stackCache.nodes[key], valueField, setInitialValue, stackSortCache, newStackKey);
+        }
+    }
+
+    const findHierarchyNode = (hierarchyData, key, keyField = 'key', childrenField = 'children') => {
+        for (let i = 0; i < hierarchyData.length; i++) {
+            const node = hierarchyData[i];
+            if (node[keyField] === key) {
+                return node;
+            }
+            if (node[childrenField]) {
+                const result = findHierarchyNode(node[childrenField], key, keyField, childrenField);
+                if (result) {
+                    return result;
+                }
+            }
+        }
+        return null;
+    };
+    const findHierarchyNodeParent = (hierarchyData, key, keyField = 'key', childrenField = 'children') => {
+        for (let i = 0; i < hierarchyData.length; i++) {
+            const node = hierarchyData[i];
+            if (node[childrenField]) {
+                for (let j = 0; j < node[childrenField].length; j++) {
+                    const childNode = node[childrenField][j];
+                    if (childNode[keyField] === key) {
+                        return node;
+                    }
+                    const result = findHierarchyNodeParent([childNode], key, keyField, childrenField);
+                    if (result) {
+                        return result;
+                    }
+                }
+            }
+        }
+        return null;
+    };
+    const findHierarchyPath = (hierarchyData, key, keyField = 'key', childrenField = 'children') => {
+        const result = [];
+        const dfs = (data, path) => {
+            for (const item of data) {
+                if (item[keyField] === key) {
+                    result.push(...path, item[keyField].toString());
+                    return true;
+                }
+                if (item[childrenField]) {
+                    const res = dfs(item[childrenField], [...path, item[keyField]]);
+                    if (res === true) {
+                        return res;
+                    }
+                }
+            }
+            return false;
+        };
+        dfs(hierarchyData, []);
+        return result;
+    };
+
+    function transformComponentStyle(cfg = {}) {
+        const newConfig = Object.assign({}, cfg);
+        if (isFunction$1(cfg.style)) {
+            newConfig.style = (item, isSelected, index, allItems) => transformToGraphic(cfg.style(item, isSelected, index, allItems));
+        }
+        else if (!isEmpty(cfg.style)) {
+            newConfig.style = transformToGraphic(cfg.style);
+        }
+        if (!isEmpty(cfg.state)) {
+            const newStateStyle = {};
+            Object.keys(cfg.state).forEach(key => {
+                if (isFunction$1(cfg.state[key])) {
+                    newStateStyle[key] = (item, isSelected, index, allItems) => transformToGraphic(cfg.state[key](item, isSelected, index, allItems));
+                }
+                else if (!isEmpty(cfg.state[key])) {
+                    newStateStyle[key] = transformToGraphic(cfg.state[key]);
+                }
+            });
+            newConfig.state = newStateStyle;
+        }
+        return newConfig;
+    }
+    function transformStateStyle(stateStyle) {
+        if (isEmpty(stateStyle)) {
+            return null;
+        }
+        const newStateStyle = {};
+        Object.keys(stateStyle).forEach(key => {
+            if (isFunction$1(stateStyle[key])) {
+                newStateStyle[key] = (value, index, datum, data) => transformToGraphic(stateStyle[key](value, index, datum, data));
+            }
+            else if (!isEmpty(stateStyle[key])) {
+                newStateStyle[key] = transformToGraphic(stateStyle[key]);
+            }
+        });
+        return newStateStyle;
+    }
+    function transformAxisLabelStateStyle(stateStyle) {
+        if (isEmpty(stateStyle)) {
+            return null;
+        }
+        const newStateStyle = {};
+        Object.keys(stateStyle).forEach(key => {
+            if (isFunction$1(stateStyle[key])) {
+                newStateStyle[key] = (datum, index, data, layer) => {
+                    return transformToGraphic(stateStyle[key](datum.rawValue, index, datum, data, layer));
+                };
+            }
+            else if (!isEmpty(stateStyle[key])) {
+                newStateStyle[key] = transformToGraphic(stateStyle[key]);
+            }
+        });
+        return newStateStyle;
+    }
+    function transformToGraphic(style) {
+        if (style === null || style === void 0 ? void 0 : style.angle) {
+            style.angle = degreeToRadian(style.angle);
+        }
+        return style;
+    }
+
     class Factory {
         static registerChart(key, chart) {
             Factory._charts[key] = chart;
@@ -56842,6 +56828,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         getStackInverse() {
             return this._spec.stackInverse === true;
         }
+        getStackSort() {
+            return this._spec.stackSort === true;
+        }
         constructor(spec, ctx) {
             var _a;
             super(spec, ctx);
@@ -56854,7 +56843,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.layoutZIndex = exports.LayoutZIndex.Region;
             this.interaction = new Interaction();
             this.seriesDataFilterOver = () => {
-                this.event.emit(exports.ChartEvent.regionSeriesDataFilterOver, { model: this });
+                this.event.emit(exports.ChartEvent.regionSeriesDataFilterOver, { model: this, chart: this.getChart() });
                 this._series.forEach(s => {
                     if (s.getViewDataFilter()) {
                         s.reTransformViewData();
@@ -59388,7 +59377,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._chart.setCanvasRect(this._currentSize.width, this._currentSize.height);
             this._chart.created();
             this._chart.init();
-            this._event.emit(exports.ChartEvent.initialized, {});
+            this._event.emit(exports.ChartEvent.initialized, {
+                chart,
+                vchart: this
+            });
         }
         _releaseData() {
             if (this._dataSet) {
@@ -59401,10 +59393,16 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 return;
             }
             this._compiler.getVGrammarView().addEventListener(exports.VGRAMMAR_HOOK_EVENT.ALL_ANIMATION_END, () => {
-                this._event.emit(exports.ChartEvent.animationFinished, {});
+                this._event.emit(exports.ChartEvent.animationFinished, {
+                    chart: this._chart,
+                    vchart: this
+                });
             });
             this._compiler.getVGrammarView().addEventListener(exports.VGRAMMAR_HOOK_EVENT.AFTER_VRENDER_NEXT_RENDER, () => {
-                this._event.emit(exports.ChartEvent.renderFinished, {});
+                this._event.emit(exports.ChartEvent.renderFinished, {
+                    chart: this._chart,
+                    vchart: this
+                });
             });
         }
         _bindResizeEvent() {
@@ -59541,7 +59539,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 return false;
             }
             this._updateAnimateState();
-            this._event.emit(exports.ChartEvent.rendered, {});
+            this._event.emit(exports.ChartEvent.rendered, {
+                chart: this._chart,
+                vchart: this
+            });
             return true;
         }
         renderSync(morphConfig) {
@@ -60165,6 +60166,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         getComponents() {
             return this._chart.getAllComponents();
         }
+        getScale(scaleId) {
+            var _a;
+            const globalScale = (_a = this._chart) === null || _a === void 0 ? void 0 : _a.getGlobalScale();
+            return globalScale === null || globalScale === void 0 ? void 0 : globalScale.getScale(scaleId);
+        }
         setDimensionIndex(value, opt = {}) {
             var _a;
             return (_a = this._chart) === null || _a === void 0 ? void 0 : _a.setDimensionIndex(value, opt);
@@ -61467,7 +61473,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
 
     const layoutByValue$1 = (tag = 3, series, layoutStartPoint, currValueX, currValueY, xHair, yHair, enableRemain = false, cacheXCrossHairInfo, cacheYCrossHairInfo) => {
-        var _a;
         const layoutX = tag & 1;
         const layoutY = tag & 2;
         if (!layoutStartPoint) {
@@ -61531,6 +61536,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             currValueX.forEach(({ axis, value }) => {
                 var _a;
                 value = value !== null && value !== void 0 ? value : '';
+                let niceLabelFormatter = null;
                 const xScale = axis.getScale();
                 if (isDiscrete(xScale.type)) {
                     bandWidth = xScale.bandwidth();
@@ -61553,17 +61559,20 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         }
                         x = startX;
                     }
+                    niceLabelFormatter = axis.niceLabelFormatter;
                 }
                 if (xCrossHairInfo && ((_a = xHair.label) === null || _a === void 0 ? void 0 : _a.visible) && !xUseCache) {
                     const labelOffset = getAxisLabelOffset(axis.getSpec());
                     if (axis.getOrient() === 'bottom') {
                         xCrossHairInfo.bottom.visible = true;
+                        xCrossHairInfo.bottom.defaultFormatter = niceLabelFormatter;
                         xCrossHairInfo.bottom.text = value;
                         xCrossHairInfo.bottom.dx = 0;
                         xCrossHairInfo.bottom.dy = labelOffset;
                     }
                     else if (axis.getOrient() === 'top') {
                         xCrossHairInfo.top.visible = true;
+                        xCrossHairInfo.top.defaultFormatter = niceLabelFormatter;
                         xCrossHairInfo.top.text = value;
                         xCrossHairInfo.top.dx = 0;
                         xCrossHairInfo.top.dy = -labelOffset;
@@ -61575,6 +61584,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             currValueY.forEach(({ axis, value }) => {
                 var _a;
                 value = value !== null && value !== void 0 ? value : '';
+                let niceLabelFormatter = null;
                 const yScale = axis.getScale();
                 if (isDiscrete(yScale.type)) {
                     bandHeight = yScale.bandwidth();
@@ -61597,17 +61607,20 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         }
                         y = startY;
                     }
+                    niceLabelFormatter = axis.niceLabelFormatter;
                 }
                 if (yCrossHairInfo && ((_a = yHair.label) === null || _a === void 0 ? void 0 : _a.visible) && !yUseCache) {
                     const labelOffset = getAxisLabelOffset(axis.getSpec());
                     if (axis.getOrient() === 'left') {
                         yCrossHairInfo.left.visible = true;
+                        yCrossHairInfo.left.defaultFormatter = niceLabelFormatter;
                         yCrossHairInfo.left.text = value;
                         yCrossHairInfo.left.dx = -labelOffset;
                         yCrossHairInfo.left.dy = 0;
                     }
                     else if (axis.getOrient() === 'right') {
                         yCrossHairInfo.right.visible = true;
+                        yCrossHairInfo.right.defaultFormatter = niceLabelFormatter;
                         yCrossHairInfo.right.text = value;
                         yCrossHairInfo.right.dx = labelOffset;
                         yCrossHairInfo.right.dy = 0;
@@ -61623,11 +61636,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             xCrossHairInfo.topPos = xRegion.y1;
             xCrossHairInfo.height = xRegion.y2 - xRegion.y1;
             xCrossHairInfo.x = x + layoutStartPoint.x;
-            if ((_a = xHair === null || xHair === void 0 ? void 0 : xHair.label) === null || _a === void 0 ? void 0 : _a.formatMethod) {
-                const { top, bottom } = xCrossHairInfo;
-                bottom.visible && (bottom.text = xHair.label.formatMethod(bottom.text, 'bottom'));
-                top.visible && (top.text = xHair.label.formatMethod(top.text, 'top'));
-            }
             if (xHair && xHair.label) {
                 const { top, bottom } = xCrossHairInfo;
                 if (top.visible) {
@@ -61674,6 +61682,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         if (formatFunc) {
             labelInfo.text = formatFunc(...args);
         }
+        else if (labelInfo.defaultFormatter) {
+            labelInfo.text = labelInfo.defaultFormatter(labelInfo.text);
+        }
     };
     const setRegionArea = (outRegion, currentValue) => {
         currentValue.forEach(({ axis }) => {
@@ -64578,7 +64589,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         registerComponentPlugin(CanvasTooltipHandler);
     };
 
-    const version = "1.10.3";
+    const version = "1.10.5-alpha.1";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -67531,15 +67542,18 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         getLayoutTag() {
             return this._layoutTag;
         }
-        setLayoutTag(tag, morphConfig, reLayout = true) {
+        setLayoutTag(tag, morphConfig, renderNextTick = true) {
             var _a;
             this._layoutTag = tag;
             if ((_a = this.getCompiler()) === null || _a === void 0 ? void 0 : _a.getVGrammarView()) {
                 this.getCompiler().getVGrammarView().updateLayoutTag();
-                tag && reLayout && this.getCompiler().renderNextTick(morphConfig);
+                tag && renderNextTick && this.getCompiler().renderNextTick(morphConfig);
             }
             return this._layoutTag;
         }
+        getGlobalScale() {
+            return this._globalScale;
+        }
         getEvent() {
             return this._event;
         }
@@ -67832,14 +67846,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             var _a, _b, _c, _d;
             (_b = (_a = this._option.performanceHook) === null || _a === void 0 ? void 0 : _a.beforeLayoutWithSceneGraph) === null || _b === void 0 ? void 0 : _b.call(_a);
             if (this.getLayoutTag()) {
-                this._event.emit(exports.ChartEvent.layoutStart, { chart: this });
+                this._event.emit(exports.ChartEvent.layoutStart, { chart: this, vchart: this._option.globalInstance });
                 this.onLayoutStart(params);
                 const elements = this.getLayoutElements();
                 this._layoutFunc(this, elements, this._layoutRect, this._viewBox);
-                this._event.emit(exports.ChartEvent.afterLayout, { elements });
+                this._event.emit(exports.ChartEvent.afterLayout, { elements, chart: this });
                 this.setLayoutTag(false);
                 this.onLayoutEnd(params);
-                this._event.emit(exports.ChartEvent.layoutEnd, { chart: this });
+                this._event.emit(exports.ChartEvent.layoutEnd, { chart: this, vchart: this._option.globalInstance });
             }
             (_d = (_c = this._option.performanceHook) === null || _c === void 0 ? void 0 : _c.afterLayoutWithSceneGraph) === null || _d === void 0 ? void 0 : _d.call(_c);
         }
@@ -68138,7 +68152,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._layoutRect.height = viewRect.height - this.padding.top - this.padding.bottom;
             this._layoutRect.x = this.padding.left;
             this._layoutRect.y = this.padding.top;
-            this._event.emit(exports.ChartEvent.layoutRectUpdate, {});
+            this._event.emit(exports.ChartEvent.layoutRectUpdate, { chart: this });
         }
         setCurrentTheme() {
             this.updateChartConfig({ change: true, reMake: false }, this._spec);
@@ -68467,7 +68481,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 chartSpec.tooltip = {};
             }
             if (isValid$3(chartSpec.stackInverse)) {
-                chartSpec.region.forEach((r) => !isValid$3(r.stackInverse) && (r.stackInverse = chartSpec.stackInverse));
+                chartSpec.region.forEach((r) => {
+                    !isValid$3(r.stackInverse) && (r.stackInverse = chartSpec.stackInverse);
+                });
+            }
+            if (isValid$3(chartSpec.stackSort)) {
+                chartSpec.region.forEach((r) => {
+                    !isValid$3(r.stackSort) && (r.stackSort = chartSpec.stackSort);
+                });
             }
         }
         transformModelSpec(chartSpec) {
@@ -69193,46 +69214,61 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
 
     function stackWithMinHeight(stackCache, stackInverse, context) {
+        var _a, _b;
         if (stackCache.values.length > 0) {
-            let seriesInfo = stackCache.series;
-            if (stackInverse) {
-                seriesInfo = seriesInfo.slice().reverse();
-            }
             let lastY;
-            seriesInfo.forEach(({ s, values }, sIndex) => {
-                var _a, _b;
-                const barMinHeight = s.getSpec().barMinHeight;
-                const seriesScale = (_b = (_a = s[context.axisHelper]).getScale) === null || _b === void 0 ? void 0 : _b.call(_a, 0);
-                const inverse = s[context.axisHelper].isInverse();
-                for (let index = 0; index < values.length; index++) {
-                    const obj = values[stackInverse ? values.length - 1 - index : index];
-                    const y1 = valueInScaleRange(s[context.startMethod](obj), seriesScale);
-                    let y = valueInScaleRange(s[context.endMethod](obj), seriesScale);
-                    if (index === 0 && sIndex === 0) {
-                        lastY = y1;
-                    }
-                    let height = Math.abs(y1 - y);
-                    if (height < barMinHeight) {
-                        height = barMinHeight;
-                    }
-                    let flag = 1;
-                    if (y < y1) {
-                        flag = -1;
-                    }
-                    else if (y === y1) {
-                        flag = context.isVertical ? (inverse ? 1 : -1) : inverse ? -1 : 1;
-                    }
-                    y = lastY + flag * height;
-                    obj[context.start] = lastY;
-                    obj[context.end] = y;
-                    lastY = y;
+            if (stackCache.sortDatums.length) {
+                let sortDatums = stackCache.sortDatums;
+                if (stackInverse) {
+                    sortDatums = stackCache.sortDatums.slice().reverse();
                 }
-            });
+                for (let index = 0; index < sortDatums.length; index++) {
+                    lastY = computeOneDatumY(sortDatums[index].datum, lastY, sortDatums[index].series, context, (_b = (_a = sortDatums[index].series[context.axisHelper]).getScale) === null || _b === void 0 ? void 0 : _b.call(_a, 0), index === 0);
+                }
+            }
+            else {
+                let seriesInfo = stackCache.series;
+                if (stackInverse) {
+                    seriesInfo = seriesInfo.slice().reverse();
+                }
+                seriesInfo.forEach(({ s, values }, sIndex) => {
+                    var _a, _b;
+                    const seriesScale = (_b = (_a = s[context.axisHelper]).getScale) === null || _b === void 0 ? void 0 : _b.call(_a, 0);
+                    for (let index = 0; index < values.length; index++) {
+                        const obj = values[stackInverse ? values.length - 1 - index : index];
+                        lastY = computeOneDatumY(obj, lastY, s, context, seriesScale, index === 0 && sIndex === 0);
+                    }
+                });
+            }
         }
         for (const key in stackCache.nodes) {
             stackWithMinHeight(stackCache.nodes[key], stackInverse, context);
         }
     }
+    function computeOneDatumY(obj, lastY, s, context, seriesScale, isFirst) {
+        const barMinHeight = s.getSpec().barMinHeight;
+        const inverse = s[context.axisHelper].isInverse();
+        const y1 = valueInScaleRange(s[context.startMethod](obj), seriesScale);
+        let y = valueInScaleRange(s[context.endMethod](obj), seriesScale);
+        if (isFirst) {
+            lastY = y1;
+        }
+        let height = Math.abs(y1 - y);
+        if (height < barMinHeight) {
+            height = barMinHeight;
+        }
+        let flag = 1;
+        if (y < y1) {
+            flag = -1;
+        }
+        else if (y === y1) {
+            flag = context.isVertical ? (inverse ? 1 : -1) : inverse ? -1 : 1;
+        }
+        y = lastY + flag * height;
+        obj[context.start] = lastY;
+        obj[context.end] = y;
+        return y;
+    }
 
     class BarSeriesSpecTransformer extends BaseSeriesSpecTransformer {
         constructor() {
@@ -86844,15 +86880,15 @@ 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 { x, y } = this.getLayoutStartPoint();
                             const pos = isXAxis(this._orient)
                                 ? {
-                                    x: bounds.x2,
-                                    y: this.getLayoutStartPoint().y
+                                    x: maxInArray(this._scale.range()) + x,
+                                    y
                                 }
                                 : {
-                                    x: this.getLayoutStartPoint().x,
-                                    y: bounds.y1
+                                    x,
+                                    y: minInArray(this._scale.range()) + y
                                 };
                             this._unitText.setAttributes(pos);
                         }
@@ -87181,10 +87217,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 const { text, style } = this._spec.unit;
                 let pos;
                 let unitTextStyle;
+                const { x, y } = this.getLayoutStartPoint();
                 if (isX) {
                     pos = {
-                        x: bounds.x2,
-                        y: this.getLayoutStartPoint().y
+                        x: maxInArray(this._scale.range()) + x,
+                        y
                     };
                     unitTextStyle = {
                         textAlign: 'left',
@@ -87193,8 +87230,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
                 else {
                     pos = {
-                        x: this.getLayoutStartPoint().x,
-                        y: bounds.y1
+                        x,
+                        y: minInArray(this._scale.range()) + y
                     };
                     unitTextStyle = {
                         textAlign: this._orient === 'left' ? 'left' : 'right',
@@ -87236,6 +87273,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     class LinearAxisMixin {
         constructor() {
             this._extend = {};
+            this.niceLabelFormatter = null;
         }
         setExtraAttrFromSpec() {
             isValid$3(this._spec.nice) && (this._nice = this._spec.nice);
@@ -87449,9 +87487,21 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.niceDomain(domain);
             this._scale.domain(domain, this._nice);
             this.setScaleNice();
+            this._updateNiceLabelFormatter(domain);
             this.event.emit(exports.ChartEvent.scaleDomainUpdate, { model: this });
             this.event.emit(exports.ChartEvent.scaleUpdate, { model: this, value: 'domain' });
         }
+        _updateNiceLabelFormatter(domain) {
+            const domainSpan = Math.abs(domain[1] - domain[0]);
+            const n = Math.max(-Math.floor(Math.log10(domainSpan)), 0) + 2;
+            const unit = Math.pow(10, n);
+            this.niceLabelFormatter = (value) => {
+                if (isValidNumber$1(+value)) {
+                    return Math.round(+value * unit) / unit;
+                }
+                return value;
+            };
+        }
     }
 
     class CartesianLinearAxis extends CartesianAxis {
@@ -88730,7 +88780,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return result;
         }
         onDataUpdate() {
-            var _a, _b;
+            var _a, _b, _c;
             if (JSON.stringify(this._preSelectedData) === JSON.stringify(this._selectedData)) {
                 return;
             }
@@ -88743,6 +88793,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
             }
             (_b = (_a = this.effect).onSelectedDataChange) === null || _b === void 0 ? void 0 : _b.call(_a);
+            (_c = this.getChart()) === null || _c === void 0 ? void 0 : _c.setLayoutTag(true, null, false);
             this.event.emit(exports.ChartEvent.legendSelectedDataChange, { model: this });
         }
         _getNeedClearVRenderComponents() {
@@ -89654,10 +89705,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         beforeRelease() {
             this.event.emit(exports.ChartEvent.tooltipHide, {
-                tooltip: this
+                tooltip: this,
+                chart: this.getChart()
             });
             this.event.emit(exports.ChartEvent.tooltipRelease, {
-                tooltip: this
+                tooltip: this,
+                chart: this.getChart()
             });
         }
         _initHandler() {
@@ -90282,10 +90335,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             };
         }
         _getValueAt(axis, p) {
-            let value = axis.getScale().invert(p);
-            if (isContinuous(axis.getScale().type) && isValidNumber$1(+value)) {
-                value = (+value).toFixed(2);
-            }
+            const value = axis.getScale().invert(p);
             return value;
         }
         clearAxisValue() {
@@ -90539,8 +90589,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 mergeSpec(angleCrossHairInfo, rest);
                 const angle = series.angleAxisHelper.dataToPosition([value]);
                 angleCrossHairInfo.angle = angle;
+                const niceLabelFormatter = axis.niceLabelFormatter;
                 if ((_b = angleHair.label) === null || _b === void 0 ? void 0 : _b.visible) {
                     angleCrossHairInfo.label.visible = true;
+                    angleCrossHairInfo.label.defaultFormatter = niceLabelFormatter;
                     angleCrossHairInfo.label.text = value;
                     angleCrossHairInfo.label.offset = getAxisLabelOffset(axis.getSpec());
                 }
@@ -90554,8 +90606,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 var _b;
                 var { axis, value, coord } = _a, rest = __rest$7(_a, ["axis", "value", "coord"]);
                 value = value !== null && value !== void 0 ? value : '';
+                const niceLabelFormatter = axis.niceLabelFormatter;
                 if ((_b = radiusHair.label) === null || _b === void 0 ? void 0 : _b.visible) {
                     radiusCrossHairInfo.label.visible = true;
+                    radiusCrossHairInfo.label.defaultFormatter = niceLabelFormatter;
                     radiusCrossHairInfo.label.text = value;
                     radiusCrossHairInfo.label.offset = getAxisLabelOffset(axis.getSpec());
                 }
@@ -90579,6 +90633,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     if (formatFunc) {
                         label.text = formatFunc(...args);
                     }
+                    else if (label.defaultFormatter) {
+                        label.text = label.defaultFormatter(label.text);
+                    }
                 }
             }
         }
@@ -90597,6 +90654,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     if (formatFunc) {
                         label.text = formatFunc(...args);
                     }
+                    else if (label.defaultFormatter) {
+                        label.text = label.defaultFormatter(label.text);
+                    }
                 }
             }
         }
@@ -90767,13 +90827,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _getValueByAxis(axis, point) {
             const { x: axisStartX, y: axisStartY } = axis.getLayoutStartPoint();
             const { x, y } = this.getLayoutStartPoint();
-            let value = axis.positionToData({
+            const value = axis.positionToData({
                 x: point.x - (axisStartX - x),
                 y: point.y - (axisStartY - y)
             });
-            if (isContinuous(axis.getScale().type) && isValidNumber$1(+value)) {
-                value = (+value).toFixed(2);
-            }
             const center = {
                 x: axis.getCenter().x + this.getLayoutStartPoint().x,
                 y: axis.getCenter().y + this.getLayoutStartPoint().y
@@ -91101,6 +91158,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.layoutType = 'none';
             this._orient = 'left';
             this._cacheVisibility = undefined;
+            this._dataUpdating = false;
             this._shouldChange = true;
             this._stateField = 'x';
             this._activeRoam = true;
@@ -91311,9 +91369,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return;
         }
         onDataUpdate() {
+            var _a;
             const domain = this._computeDomainOfStateScale(isContinuous(this._stateScale.type));
             this._stateScale.domain(domain, true);
             this._handleChange(this._start, this._end, true);
+            if (this._spec.auto) {
+                this._dataUpdating = true;
+                (_a = this.getChart()) === null || _a === void 0 ? void 0 : _a.setLayoutTag(true, null, false);
+            }
         }
         _computeDomainOfStateScale(isContinuous) {
             if (this._spec.customDomain) {
@@ -91379,7 +91442,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._originalStateFields = originalStateFields;
             }
             else {
-                isNil$3(this._spec.valueField);
                 eachSeries(this._regions, s => {
                     dataCollection.push(s.getRawData());
                     stateFields.push(this._field);
@@ -91630,6 +91692,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }, {
                 [sizeKey]: exports.AttributeLevel.Built_In
             });
+            this._dataUpdating = false;
         }
         getBoundsInRect(rect) {
             const result = { x1: this.getLayoutStartPoint().x, y1: this.getLayoutStartPoint().y, x2: 0, y2: 0 };
@@ -91670,7 +91733,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const axisSpec = axis === null || axis === void 0 ? void 0 : axis.getSpec();
             const axisScale = axis === null || axis === void 0 ? void 0 : axis.getScale();
             const bandSizeResult = this._getAxisBandSize(axisSpec);
-            if (isDiscrete(axisScale.type) &&
+            if (!this._dataUpdating &&
+                isDiscrete(axisScale.type) &&
                 (rect === null || rect === void 0 ? void 0 : rect.height) === ((_a = this._cacheRect) === null || _a === void 0 ? void 0 : _a.height) &&
                 (rect === null || rect === void 0 ? void 0 : rect.width) === ((_b = this._cacheRect) === null || _b === void 0 ? void 0 : _b.width) &&
                 this._fixedBandSize === (bandSizeResult === null || bandSizeResult === void 0 ? void 0 : bandSizeResult.bandSize)) {
@@ -94391,7 +94455,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     const { markLabelSpec = {} } = seriesInfo;
                     return Object.values(markLabelSpec).some(labelSpecList => Array.isArray(labelSpecList) && isLabelVisible(labelSpecList));
                 });
-                if (chartSpec.labelLayout !== 'region' || hasVisibleLabel) {
+                if (hasVisibleLabel) {
                     specInfo.push({
                         spec: chartSpec,
                         type: ComponentTypeEnum.label,
@@ -96321,7 +96385,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._elementMap.set(item, result);
             return result;
         }
-        getSizeFromGird(spec, type) {
+        getSizeFromGrid(spec, type) {
             var _a;
             const sizeList = type === 'col' ? this._colSize : this._rowSize;
             let result = 0;
@@ -96401,10 +96465,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             var _a, _b;
             const gridSpec = this.getItemGridInfo(item);
             const rect = {
-                width: ((_a = this.getSizeFromGird(gridSpec, 'col')) !== null && _a !== void 0 ? _a : this._chartLayoutRect.width) -
+                width: ((_a = this.getSizeFromGrid(gridSpec, 'col')) !== null && _a !== void 0 ? _a : this._chartLayoutRect.width) -
                     item.layoutPaddingLeft -
                     item.layoutPaddingRight,
-                height: ((_b = this.getSizeFromGird(gridSpec, 'row')) !== null && _b !== void 0 ? _b : this._chartLayoutRect.height) -
+                height: ((_b = this.getSizeFromGrid(gridSpec, 'row')) !== null && _b !== void 0 ? _b : this._chartLayoutRect.height) -
                     item.layoutPaddingTop -
                     item.layoutPaddingBottom
             };
@@ -96454,8 +96518,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         layoutOneItem(item, sizeType, ignoreTag) {
             var _a, _b;
-            const sizeCallRow = sizeType === 'rowGrid' || sizeType === 'grid' ? this.getSizeFromGird.bind(this) : this.getSizeFromUser.bind(this);
-            const sizeCallCol = sizeType === 'colGrid' || sizeType === 'grid' ? this.getSizeFromGird.bind(this) : this.getSizeFromUser.bind(this);
+            const sizeCallRow = sizeType === 'rowGrid' || sizeType === 'grid' ? this.getSizeFromGrid.bind(this) : this.getSizeFromUser.bind(this);
+            const sizeCallCol = sizeType === 'colGrid' || sizeType === 'grid' ? this.getSizeFromGrid.bind(this) : this.getSizeFromUser.bind(this);
             const gridSpec = this.getItemGridInfo(item);
             const computeRect = {
                 width: ((_a = sizeCallCol(gridSpec, 'col')) !== null && _a !== void 0 ? _a : this._chartLayoutRect.width) -