@visactor/vchart 1.4.0-beta.2 → 1.5.0

package/build/index.js

@@ -1510,7 +1510,7 @@
 	function LinearToSRGB(c) {
 	  return c < .0031308 ? 12.92 * c : 1.055 * Math.pow(c, .41666) - .055;
 	}
-	let Color$1 = class Color {
+	let Color$2 = class Color {
 	  static Brighter(source) {
 	    let b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
 	    return 1 === b ? source : new Color(source).brighter(b).toRGBA();
@@ -1729,7 +1729,7 @@
 
 	var ColorUtil = /*#__PURE__*/Object.freeze({
 		__proto__: null,
-		Color: Color$1,
+		Color: Color$2,
 		DEFAULT_COLORS: DEFAULT_COLORS,
 		RGB: RGB,
 		hexToRgb: hexToRgb,
@@ -6760,7 +6760,7 @@
 	    }
 	}
 
-	const { Color } = ColorUtil;
+	const { Color: Color$1 } = ColorUtil;
 
 	const warn = (msg, detail) => {
 	    if (isFunction$1(config.warnHandler)) {
@@ -7111,15 +7111,15 @@
 	  let d0Fuc, r0Fuc;
 	  return d1 < d0 ? (d0Fuc = normalize$2(d1, d0), r0Fuc = interpolate(r1, r0)) : (d0Fuc = normalize$2(d0, d1), r0Fuc = interpolate(r0, r1)), x => r0Fuc(d0Fuc(x));
 	}
-	function bandSpace(count, paddingInner, paddingOuter) {
+	function bandSpace$1(count, paddingInner, paddingOuter) {
 	  let space;
 	  return space = 1 === count ? count + 2 * paddingOuter : count - paddingInner + 2 * paddingOuter, count ? space > 0 ? space : 1 : 0;
 	}
-	function scaleWholeRangeSize(count, bandwidth, paddingInner, paddingOuter) {
-	  return bandSpace(count, paddingInner, paddingOuter) * (bandwidth / (1 - paddingInner));
+	function scaleWholeRangeSize$1(count, bandwidth, paddingInner, paddingOuter) {
+	  return bandSpace$1(count, paddingInner, paddingOuter) * (bandwidth / (1 - paddingInner));
 	}
 	function calculateBandwidthFromWholeRangeSize(count, wholeSize, paddingInner, paddingOuter, round) {
-	  const space = bandSpace(count, paddingInner, paddingOuter);
+	  const space = bandSpace$1(count, paddingInner, paddingOuter);
 	  let step = wholeSize / Math.max(1, space || 1);
 	  round && (step = Math.floor(step));
 	  let bandwidth = step * (1 - paddingInner);
@@ -7196,7 +7196,7 @@
 	      reverse = wholeRange[1] < wholeRange[0];
 	    let start = wholeRange[Number(reverse) - 0];
 	    const stop = wholeRange[1 - Number(reverse)],
-	      space = bandSpace(n, this._paddingInner, this._paddingOuter);
+	      space = bandSpace$1(n, this._paddingInner, this._paddingOuter);
 	    this._step = (stop - start) / Math.max(1, space || 1), this._round && (this._step = Math.floor(this._step)), start += (stop - start - this._step * (n - this._paddingInner)) * this._align, this.isBandwidthFixed() || (this._bandwidth = this._step * (1 - this._paddingInner)), this._round && (start = Math.round(start), this.isBandwidthFixed() || (this._bandwidth = Math.round(this._bandwidth)));
 	    const values = range(n).map(i => start + this._step * i);
 	    return super.range(reverse ? values.reverse() : values), this;
@@ -7209,7 +7209,7 @@
 	      autoBandwidth < this._minBandwidth ? (this._bandwidth = this._minBandwidth, this._isFixed = !0) : autoBandwidth > this._maxBandwidth ? (this._bandwidth = this._maxBandwidth, this._isFixed = !0) : (this._bandwidth = void 0, this._isFixed = !1);
 	    }
 	    if (this.isBandwidthFixed()) {
-	      const wholeLength = scaleWholeRangeSize(super.domain().length, this._bandwidth, this._paddingInner, this._paddingOuter),
+	      const wholeLength = scaleWholeRangeSize$1(super.domain().length, this._bandwidth, this._paddingInner, this._paddingOuter),
 	        rangeFactorSize = Math.min((range[1] - range[0]) / wholeLength, 1);
 	      if (null === (_a = this._rangeFactor) || void 0 === _a ? void 0 : _a.length) {
 	        const [rangeFactorStart, rangeFactorEnd] = this._rangeFactor,
@@ -7335,13 +7335,13 @@
 	  if (isNil$1(b) || "boolean" === t) return () => b;
 	  if ("number" === t) return interpolateNumber(a, b);
 	  if ("string" === t) {
-	    if (c = Color$1.parseColorString(b)) {
-	      const rgb = interpolateRgb(Color$1.parseColorString(a), c);
+	    if (c = Color$2.parseColorString(b)) {
+	      const rgb = interpolateRgb(Color$2.parseColorString(a), c);
 	      return t => rgb(t).formatRgb();
 	    }
 	    return interpolateNumber(Number(a), Number(b));
 	  }
-	  return b instanceof RGB ? interpolateRgb(a, b) : b instanceof Color$1 ? interpolateRgb(a.color, b.color) : b instanceof Date ? interpolateDate(a, b) : interpolateNumber(Number(a), Number(b));
+	  return b instanceof RGB ? interpolateRgb(a, b) : b instanceof Color$2 ? interpolateRgb(a.color, b.color) : b instanceof Date ? interpolateDate(a, b) : interpolateNumber(Number(a), Number(b));
 	}
 
 	class ContinuousScale extends BaseScale {
@@ -19912,7 +19912,8 @@
 	}
 	ResourceLoader.cache = new Map();
 
-	const tempMatrix = new Matrix();
+	const tempMatrix = new Matrix(),
+	  tempBounds$1 = new AABBBounds();
 	const GRAPHIC_UPDATE_TAG_KEY = ["lineWidth", "lineCap", "lineJoin", "miterLimit", "scaleX", "scaleY", "angle", "anchor"];
 	const tempConstantXYKey = ["x", "y"],
 	  tempConstantScaleXYKey = ["scaleX", "scaleY"],
@@ -20234,9 +20235,18 @@
 	    var _a, _b, _c, _d;
 	    if (hasAnimation) {
 	      const keys = Object.keys(attrs),
-	        animateAttrs = isClear ? keys.reduce((res, key) => (res[key] = void 0 === attrs[key] ? this.getDefaultAttribute(key) : attrs[key], res), {}) : attrs,
-	        animate = this.animate();
-	      animate.stateNames = stateNames, animate.to(animateAttrs, null !== (_b = null === (_a = this.stateAnimateConfig) || void 0 === _a ? void 0 : _a.duration) && void 0 !== _b ? _b : DefaultStateAnimateConfig.duration, null !== (_d = null === (_c = this.stateAnimateConfig) || void 0 === _c ? void 0 : _c.easing) && void 0 !== _d ? _d : DefaultStateAnimateConfig.easing);
+	        noWorkAAttr = this.getNoWorkAnimateAttr(),
+	        animateAttrs = {};
+	      let noAnimateAttrs;
+	      isClear ? keys.forEach(key => {
+	        noWorkAAttr[key] ? (noAnimateAttrs || (noAnimateAttrs = {}), noAnimateAttrs[key] = attrs[key]) : animateAttrs[key] = void 0 === attrs[key] ? this.getDefaultAttribute(key) : attrs[key];
+	      }) : keys.forEach(key => {
+	        noWorkAAttr[key] ? (noAnimateAttrs || (noAnimateAttrs = {}), noAnimateAttrs[key] = attrs[key]) : animateAttrs[key] = attrs[key];
+	      });
+	      const animate = this.animate();
+	      animate.stateNames = stateNames, animate.to(animateAttrs, null !== (_b = null === (_a = this.stateAnimateConfig) || void 0 === _a ? void 0 : _a.duration) && void 0 !== _b ? _b : DefaultStateAnimateConfig.duration, null !== (_d = null === (_c = this.stateAnimateConfig) || void 0 === _c ? void 0 : _c.easing) && void 0 !== _d ? _d : DefaultStateAnimateConfig.easing), noAnimateAttrs && this.setAttributes(noAnimateAttrs, !1, {
+	        type: AttributeUpdateType.STATE
+	      });
 	    } else this.setAttributes(attrs, !1, {
 	      type: AttributeUpdateType.STATE
 	    });
@@ -20330,35 +20340,55 @@
 	  needUpdateLayout() {
 	    return !!(this._updateTag & UpdateTag.UPDATE_LAYOUT);
 	  }
+	  getAnchor(anchor, params) {
+	    const _anchor = [0, 0],
+	      getBounds = () => {
+	        if (params.b) return params.b;
+	        const {
+	          scaleX: scaleX,
+	          scaleY: scaleY,
+	          angle: angle
+	        } = this.attribute;
+	        return tempBounds$1.copy(this._AABBBounds), this.setAttributes({
+	          scaleX: 1,
+	          scaleY: 1,
+	          angle: 0
+	        }), params.b = this.AABBBounds.clone(), this._AABBBounds.copy(tempBounds$1), this.setAttributes({
+	          scaleX: scaleX,
+	          scaleY: scaleY,
+	          angle: angle
+	        }), params.b;
+	      };
+	    if ("string" == typeof anchor[0]) {
+	      const ratio = parseFloat(anchor[0]) / 100,
+	        bounds = getBounds();
+	      _anchor[0] = bounds.x1 + (bounds.x2 - bounds.x1) * ratio;
+	    } else _anchor[0] = anchor[0];
+	    if ("string" == typeof anchor[1]) {
+	      const ratio = parseFloat(anchor[1]) / 100,
+	        bounds = getBounds();
+	      _anchor[1] = bounds.y1 + (bounds.y2 - bounds.y1) * ratio;
+	    } else _anchor[1] = anchor[1];
+	    return _anchor;
+	  }
 	  doUpdateLocalMatrix() {
 	    const {
-	        x = DefaultTransform.x,
-	        y = DefaultTransform.y,
-	        scaleX = DefaultTransform.scaleX,
-	        scaleY = DefaultTransform.scaleY,
-	        angle = DefaultTransform.angle,
-	        scaleCenter: scaleCenter,
-	        anchor: anchor,
-	        postMatrix: postMatrix
-	      } = this.attribute,
-	      _anchor = [0, 0];
-	    if (anchor) {
-	      if ("string" == typeof anchor[0]) {
-	        const ratio = parseFloat(anchor[0]) / 100,
-	          bounds = this.AABBBounds;
-	        _anchor[0] = bounds.x1 + (bounds.x2 - bounds.x1) * ratio;
-	      } else _anchor[0] = anchor[0];
-	      if ("string" == typeof anchor[1]) {
-	        const ratio = parseFloat(anchor[1]) / 100,
-	          bounds = this.AABBBounds;
-	        _anchor[1] = bounds.x1 + (bounds.x2 - bounds.x1) * ratio;
-	      } else _anchor[1] = anchor[1];
-	    }
-	    if (!scaleCenter || 1 === scaleX && 1 === scaleY) normalTransform(this._transMatrix, this._transMatrix.reset(), x, y, scaleX, scaleY, angle, anchor && _anchor);else {
+	      x = DefaultTransform.x,
+	      y = DefaultTransform.y,
+	      scaleX = DefaultTransform.scaleX,
+	      scaleY = DefaultTransform.scaleY,
+	      angle = DefaultTransform.angle,
+	      scaleCenter: scaleCenter,
+	      anchor: anchor,
+	      postMatrix: postMatrix
+	    } = this.attribute;
+	    let _anchor = [0, 0];
+	    const params = {};
+	    if (anchor && (_anchor = this.getAnchor(anchor, params)), !scaleCenter || 1 === scaleX && 1 === scaleY) normalTransform(this._transMatrix, this._transMatrix.reset(), x, y, scaleX, scaleY, angle, anchor && _anchor);else {
 	      const m = this._transMatrix;
-	      m.reset(), m.translate(_anchor[0], _anchor[1]), m.rotate(angle), m.translate(-_anchor[0], -_anchor[1]), m.translate(x, y), application.transformUtil.fromMatrix(m, m).scale(scaleX, scaleY, {
-	        x: scaleCenter[0],
-	        y: scaleCenter[1]
+	      m.reset(), m.translate(_anchor[0], _anchor[1]), m.rotate(angle), m.translate(-_anchor[0], -_anchor[1]), m.translate(x, y), _anchor = this.getAnchor(scaleCenter, params), application.transformUtil.fromMatrix(m, m).scale(scaleX, scaleY, {
+	        x: _anchor[0],
+	        y: _anchor[1]
 	      });
 	    }
 	    const p = this.getOffsetXY(DefaultTransform);
@@ -26342,7 +26372,7 @@
 	          distance = defaultOuterBorder.distance,
 	          lineWidth = defaultOuterBorder.lineWidth
 	        } = outerBorder;
-	      aabbBounds.expand(distance + shadowBlur + lineWidth / 2);
+	      aabbBounds.expand(distance + (shadowBlur + lineWidth) / 2);
 	    }
 	    return aabbBounds;
 	  }
@@ -26381,7 +26411,7 @@
 	          distance = defaultOuterBorder.distance,
 	          lineWidth = defaultOuterBorder.lineWidth
 	        } = outerBorder;
-	      boundStroke(aabbBounds, distance + shadowBlur + lineWidth / 2, !0, strokeBoundsBuffer);
+	      boundStroke(aabbBounds, distance + (shadowBlur + lineWidth) / 2, !0, strokeBoundsBuffer);
 	    }
 	    return aabbBounds;
 	  }
@@ -33718,7 +33748,7 @@
 	    const {
 	      context: context
 	    } = drawContext;
-	    context.highPerformanceSave();
+	    context.highPerformanceSave(), context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0);
 	    const b = graphic.AABBBounds;
 	    return !0 !== graphic.attribute._debug_bounds && graphic.attribute._debug_bounds(context, graphic), context.strokeRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore(), !0;
 	  }
@@ -37656,12 +37686,12 @@
 	    if ((!isValid$1(colorKey.a) && !isValid$1(colorKey.l)) || !isString$1(color)) {
 	        return color;
 	    }
-	    let c = new Color(color);
+	    let c = new Color$1(color);
 	    if (isValid$1(colorKey.l)) {
 	        const { r, g, b } = c.color;
 	        const { h, s } = rgbToHsl(r, g, b);
 	        const rgb = hslToRgb(h, s, colorKey.l);
-	        const newColor = new Color(`rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`);
+	        const newColor = new Color$1(`rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`);
 	        newColor.setOpacity(c.color.opacity);
 	        c = newColor;
 	    }
@@ -40285,9 +40315,9 @@
 	      });
 	    (null === (_b = viewOptions.options3d) || void 0 === _b ? void 0 : _b.enable) && stage.set3dOptions(viewOptions.options3d), stage.enableIncrementalAutoRender(), this._viewBox = viewOptions.viewBox, this._view.emit(HOOK_EVENT.AFTER_CREATE_VRENDER_STAGE), this._view.emit(HOOK_EVENT.BEFORE_CREATE_VRENDER_LAYER);
 	    const layer = null !== (_c = viewOptions.layer) && void 0 !== _c ? _c : stage.defaultLayer;
-	    if (this._view.emit(HOOK_EVENT.AFTER_CREATE_VRENDER_LAYER), (null === (_d = this._eventConfig) || void 0 === _d ? void 0 : _d.drag) && (this._dragController = new DragNDrop(layer)), null === (_e = this._eventConfig) || void 0 === _e ? void 0 : _e.gesture) {
+	    if (this._view.emit(HOOK_EVENT.AFTER_CREATE_VRENDER_LAYER), (null === (_d = this._eventConfig) || void 0 === _d ? void 0 : _d.drag) && (this._dragController = new DragNDrop(stage)), null === (_e = this._eventConfig) || void 0 === _e ? void 0 : _e.gesture) {
 	      const gestureConfig = isObject$g(this._eventConfig.gesture) ? this._eventConfig.gesture : {};
-	      this._gestureController = new Gesture(layer, gestureConfig);
+	      this._gestureController = new Gesture(stage, gestureConfig);
 	    }
 	    return {
 	      stage: stage,
@@ -40599,17 +40629,17 @@
 	}
 	function parseFieldData(spec, parameters) {
 	  const field = spec.field,
-	    refData = getGrammarOutput(spec.data, parameters);
-	  let fieldData = [];
+	    refData = getGrammarOutput(spec.data, parameters),
+	    fieldData = [];
 	  if (isArray$4(field)) field.forEach(entry => {
 	    const getter = field$3(entry);
 	    refData && refData.forEach(datum => {
-	      fieldData = fieldData.concat(getter(datum));
+	      fieldData.push(getter(datum));
 	    });
 	  });else {
 	    const getter = field$3(field);
 	    refData && refData.forEach(datum => {
-	      fieldData = fieldData.concat(getter(datum));
+	      fieldData.push(getter(datum));
 	    });
 	  }
 	  return fieldData;
@@ -45628,10 +45658,14 @@
 	  return group ? group.findAll(node => "group" !== node.type, !0) : [];
 	}
 
-	const defaultAlternativeColors = ["#ffffff", "#000000"];
+	const defaultAlternativeColors = ["#ffffff", "#000000"],
+	  {
+	    Color: Color
+	  } = ColorUtil;
 	function labelSmartInvert(foregroundColorOrigin, backgroundColorOrogin, textType, contrastRatiosThreshold, alternativeColors) {
-	  const foregroundColor = formatColorToHex(foregroundColorOrigin),
-	    backgroundColor = formatColorToHex(backgroundColorOrogin);
+	  if ("string" != typeof foregroundColorOrigin || "string" != typeof backgroundColorOrogin) return foregroundColorOrigin;
+	  const foregroundColor = new Color(foregroundColorOrigin).toHex(),
+	    backgroundColor = new Color(backgroundColorOrogin).toHex();
 	  return contrastAccessibilityChecker(foregroundColor, backgroundColor, textType, contrastRatiosThreshold) ? foregroundColor : improveContrastReverse(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors);
 	}
 	function improveContrastReverse(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors) {
@@ -45656,16 +45690,6 @@
 	  R = RsRGB <= .03928 ? RsRGB / 12.92 : Math.pow((RsRGB + .055) / 1.055, 2.4), G = GsRGB <= .03928 ? GsRGB / 12.92 : Math.pow((GsRGB + .055) / 1.055, 2.4), B = BsRGB <= .03928 ? BsRGB / 12.92 : Math.pow((BsRGB + .055) / 1.055, 2.4);
 	  return .2126 * R + .7152 * G + .0722 * B;
 	}
-	function formatColorToHex(originColor) {
-	  if (null == originColor ? void 0 : originColor.includes("#")) return originColor;
-	  const c = new Color$1(originColor),
-	    {
-	      r: r,
-	      g: g,
-	      b: b
-	    } = c.color;
-	  return "#" + rgbToHex(r, g, b);
-	}
 	function smartInvertStrategy(fillStrategy, baseColor, invertColor, similarColor) {
 	  let result;
 	  switch (fillStrategy) {
@@ -47039,7 +47063,7 @@
 	    return listener;
 	  }
 	  _smartInvert(labels) {
-	    var _a, _b, _c, _d;
+	    var _a, _b, _c, _d, _e;
 	    const option = this.attribute.smartInvert || {},
 	      {
 	        textType: textType,
@@ -47049,18 +47073,18 @@
 	      fillStrategy = null !== (_a = option.fillStrategy) && void 0 !== _a ? _a : "invertBase",
 	      strokeStrategy = null !== (_b = option.strokeStrategy) && void 0 !== _b ? _b : "base",
 	      brightColor = null !== (_c = option.brightColor) && void 0 !== _c ? _c : "#ffffff",
-	      darkColor = null !== (_d = option.darkColor) && void 0 !== _d ? _d : "#000000";
+	      darkColor = null !== (_d = option.darkColor) && void 0 !== _d ? _d : "#000000",
+	      outsideEnable = null !== (_e = option.outsideEnable) && void 0 !== _e && _e;
 	    if ("null" !== fillStrategy || "null" !== strokeStrategy) for (let i = 0; i < labels.length; i++) {
 	      const label = labels[i];
 	      if (!label) continue;
 	      const baseMark = this._idToGraphic.get(label.attribute.id),
-	        isInside = this._canPlaceInside(label.AABBBounds, null == baseMark ? void 0 : baseMark.AABBBounds),
 	        backgroundColor = baseMark.attribute.fill,
 	        foregroundColor = label.attribute.fill,
 	        baseColor = backgroundColor,
 	        invertColor = labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors),
 	        similarColor = contrastAccessibilityChecker(invertColor, brightColor) ? brightColor : darkColor;
-	      if (isInside) {
+	      if (outsideEnable) {
 	        const fill = smartInvertStrategy(fillStrategy, baseColor, invertColor, similarColor);
 	        if (fill && label.setAttributes({
 	          fill: fill
@@ -47070,21 +47094,32 @@
 	          stroke: stroke
 	        });
 	      } else {
-	        if (0 === label.attribute.lineWidth) continue;
-	        if (label.attribute.stroke) {
-	          label.setAttributes({
-	            fill: labelSmartInvert(label.attribute.fill, label.attribute.stroke, textType, contrastRatiosThreshold, alternativeColors)
+	        if (this._canPlaceInside(label.AABBBounds, null == baseMark ? void 0 : baseMark.AABBBounds)) {
+	          const fill = smartInvertStrategy(fillStrategy, baseColor, invertColor, similarColor);
+	          if (fill && label.setAttributes({
+	            fill: fill
+	          }), 0 === label.attribute.lineWidth) continue;
+	          const stroke = smartInvertStrategy(strokeStrategy, baseColor, invertColor, similarColor);
+	          stroke && label.setAttributes({
+	            stroke: stroke
+	          });
+	        } else {
+	          if (0 === label.attribute.lineWidth) continue;
+	          if (label.attribute.stroke) {
+	            label.setAttributes({
+	              fill: labelSmartInvert(label.attribute.fill, label.attribute.stroke, textType, contrastRatiosThreshold, alternativeColors)
+	            });
+	            continue;
+	          }
+	          const fill = smartInvertStrategy(fillStrategy, baseColor, invertColor, similarColor);
+	          fill && label.setAttributes({
+	            fill: fill
+	          });
+	          const stroke = smartInvertStrategy(strokeStrategy, baseColor, invertColor, similarColor);
+	          stroke && label.setAttributes({
+	            stroke: stroke
 	          });
-	          continue;
 	        }
-	        const fill = smartInvertStrategy(fillStrategy, baseColor, invertColor, similarColor);
-	        fill && label.setAttributes({
-	          fill: fill
-	        });
-	        const stroke = smartInvertStrategy(strokeStrategy, baseColor, invertColor, similarColor);
-	        stroke && label.setAttributes({
-	          stroke: stroke
-	        });
 	      }
 	    }
 	  }
@@ -51635,7 +51670,7 @@
 	          opacity: .85
 	        },
 	        unSelected: {
-	          fill: "#D8D8D8"
+	          opacity: .5
 	        }
 	      }
 	    },
@@ -53960,8 +53995,11 @@
 	const generateLabelAttributes = (marks, groupSize, encoder, labelStyle, parameters, theme) => {
 	  var _a;
 	  const labelTheme = null === (_a = null == theme ? void 0 : theme.components) || void 0 === _a ? void 0 : _a.dataLabel,
-	    dataLabels = marks.map(mark => {
+	    dataLabels = marks.map((mark, index) => {
 	      var _a, _b, _c, _d, _e, _f;
+	      const labelParameters = Object.assign(Object.assign({}, parameters), {
+	        labelIndex: index
+	      });
 	      let currentTheme = {};
 	      switch (mark.markType) {
 	        case GrammarMarkType.line:
@@ -53989,12 +54027,12 @@
 	      mark.elements.forEach(element => {
 	        var _a, _b;
 	        if ("willRelease" !== element.getGraphicItem().releaseStatus) {
-	          const attributes = invokeEncoder(encoder, element.getDatum(), element, parameters),
+	          const attributes = invokeEncoder(encoder, element.getDatum(), element, labelParameters),
 	            datum = merge$1({}, null !== (_b = null === (_a = null == currentTheme ? void 0 : currentTheme.data) || void 0 === _a ? void 0 : _a[0]) && void 0 !== _b ? _b : {}, attributes);
 	          data.push(datum);
 	        }
 	      });
-	      const addition = invokeFunctionType(labelStyle, parameters, mark),
+	      const addition = invokeFunctionType(labelStyle, labelParameters, mark),
 	        graphicItemName = null === (_f = mark.graphicItem) || void 0 === _f ? void 0 : _f.name;
 	      return merge$1({}, currentTheme, {
 	        data: data,
@@ -56069,11 +56107,13 @@
 	            space: 6,
 	            style: {
 	                lineWidth: 0,
-	                fillOpacity: 1
+	                fillOpacity: 1,
+	                opacity: 1
 	            },
 	            state: {
 	                unSelected: {
-	                    fillOpacity: 0.5
+	                    fillOpacity: 0.2,
+	                    opacity: 1
 	                }
 	            }
 	        },
@@ -56083,11 +56123,13 @@
 	                fill: { type: 'palette', key: 'secondaryFontColor', default: '#89909d' },
 	                fontSize: THEME_CONSTANTS.l5FontSize,
 	                lineHeight: THEME_CONSTANTS.l5LineHeight,
-	                fontFamily: THEME_CONSTANTS.defaultFontFamily
+	                fontFamily: THEME_CONSTANTS.defaultFontFamily,
+	                opacity: 1
 	            },
 	            state: {
 	                unSelected: {
-	                    fill: { type: 'palette', key: 'disableFontColor' }
+	                    fill: { type: 'palette', key: 'disableFontColor' },
+	                    opacity: 1
 	                }
 	            }
 	        }
@@ -56221,21 +56263,21 @@
 	    startSymbol: {
 	        visible: false,
 	        symbolType: 'triangle',
+	        size: 10,
 	        style: {
 	            stroke: null,
 	            lineWidth: 0,
-	            fill: 'rgba(46, 47, 50)',
-	            size: 10
+	            fill: 'rgba(46, 47, 50)'
 	        }
 	    },
 	    endSymbol: {
 	        visible: true,
 	        symbolType: 'triangle',
+	        size: 10,
 	        style: {
 	            stroke: null,
 	            lineWidth: 0,
-	            fill: 'rgba(46, 47, 50)',
-	            size: 10
+	            fill: 'rgba(46, 47, 50)'
 	        }
 	    },
 	    label: {
@@ -57278,6 +57320,103 @@
 	    }
 	    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(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) {
+	    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;
+	            }
+	        }
+	        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);
+	    }
+	}
+	function stackGroup(s, stackData, stackCache, valueField, setInitialValue) {
+	    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) {
+	        !stackCache.nodes[key] &&
+	            (stackCache.nodes[key] = {
+	                values: [],
+	                series: [],
+	                nodes: {}
+	            });
+	        stackGroup(s, stackData.nodes[key], stackCache.nodes[key], valueField, setInitialValue);
+	    }
+	}
 
 	const findHierarchyNode = (hierarchyData, key, keyField = 'key', childrenField = 'children') => {
 	    for (let i = 0; i < hierarchyData.length; i++) {
@@ -57667,6 +57806,25 @@
 	    }
 	    return inverse;
 	}
+	function scaleWholeRangeSize(count, bandwidth, paddingInner, paddingOuter) {
+	    if (paddingInner === 1) {
+	        paddingInner = 0;
+	    }
+	    const space = bandSpace(count, paddingInner, paddingOuter);
+	    const step = bandwidth / (1 - paddingInner);
+	    const wholeSize = space * step;
+	    return wholeSize;
+	}
+	function bandSpace(count, paddingInner, paddingOuter) {
+	    let space;
+	    if (count === 1) {
+	        space = count + paddingOuter * 2;
+	    }
+	    else {
+	        space = count - paddingInner + paddingOuter * 2;
+	    }
+	    return count ? (space > 0 ? space : 1) : 0;
+	}
 
 	const getAxis$1 = (chart, type, pos) => {
 	    const axesComponents = chart
@@ -61378,9 +61536,24 @@
 	})(IFilterMode || (IFilterMode = {}));
 
 	class Region extends BaseModel {
+	    getMaxWidth() {
+	        return this._maxRegionWidth;
+	    }
+	    setMaxWidth(value) {
+	        this._maxRegionWidth = value;
+	    }
+	    getMaxHeight() {
+	        return this._maxRegionHeight;
+	    }
+	    setMaxHeight(value) {
+	        this._maxRegionHeight = value;
+	    }
 	    getGroupMark() {
 	        return this._groupMark;
 	    }
+	    getStackInverse() {
+	        return this._spec.stackInverse === true;
+	    }
 	    constructor(spec, ctx) {
 	        var _a;
 	        super(spec, ctx);
@@ -61486,8 +61659,9 @@
 	        }
 	    }
 	    _compareSpec() {
+	        var _a, _b;
 	        const result = super._compareSpec();
-	        if (!isEqual$1(this._originalSpec.style, this._spec.style)) {
+	        if (!isEqual$1((_a = this._originalSpec) === null || _a === void 0 ? void 0 : _a.style, (_b = this._spec) === null || _b === void 0 ? void 0 : _b.style)) {
 	            result.reMake = true;
 	        }
 	        return result;
@@ -61604,92 +61778,105 @@
 	}
 	Region.type = 'region';
 
-	class Layout {
-	    constructor(_spec, ctx) {
-	        this._leftCurrent = 0;
-	        this._topCurrent = 0;
-	        this._rightCurrent = 0;
-	        this._bottomCurrent = 0;
-	        this._onError = ctx === null || ctx === void 0 ? void 0 : ctx.onError;
-	    }
-	    layoutItems(_chart, items, chartLayoutRect, chartViewBox) {
-	        this._chartLayoutRect = chartLayoutRect;
-	        this._chartViewBox = chartViewBox;
-	        this._leftCurrent = chartLayoutRect.x;
-	        this._topCurrent = chartLayoutRect.y;
-	        this._rightCurrent = chartLayoutRect.x + chartLayoutRect.width;
-	        this._bottomCurrent = chartLayoutRect.height + chartLayoutRect.y;
-	        items.sort((a, b) => b.layoutLevel - a.layoutLevel);
-	        this.layoutNormalInlineItems(items.filter(x => x.layoutType === 'normal-inline'));
-	        this.layoutNormalItems(items.filter(x => x.layoutType === 'normal'));
-	        const layoutTemp = {
-	            _leftCurrent: this._leftCurrent,
-	            _topCurrent: this._topCurrent,
-	            _rightCurrent: this._rightCurrent,
-	            _bottomCurrent: this._bottomCurrent
-	        };
-	        const regionItems = items.filter(x => x.layoutType === 'region');
-	        const relativeItems = items.filter(x => x.layoutType === 'region-relative');
-	        this.layoutRegionItems(regionItems, relativeItems);
-	        if (relativeItems.some(i => i.getAutoIndent())) {
-	            const { top, bottom, left, right } = this._checkAutoIndent(relativeItems);
-	            if (top || bottom || left || right) {
-	                this._topCurrent = layoutTemp._topCurrent + top;
-	                this._bottomCurrent = layoutTemp._bottomCurrent - bottom;
-	                this._leftCurrent = layoutTemp._leftCurrent + left;
-	                this._rightCurrent = layoutTemp._rightCurrent - right;
-	                this.layoutRegionItems(regionItems, relativeItems);
-	            }
+	function getPositionItems(items) {
+	    const startItems = [];
+	    const middleItems = [];
+	    const endItems = [];
+	    items.forEach(item => {
+	        if (isNil$1(item.getSpec().position) || item.getSpec().position === 'start') {
+	            startItems.push(item);
 	        }
-	        this.layoutAbsoluteItems(items.filter(x => x.layoutType === 'absolute'));
-	    }
-	    layoutNormalItems(normalItems) {
-	        normalItems.forEach(item => {
-	            const layoutRect = this.getItemComputeLayoutRect(item);
-	            const rect = item.computeBoundsInRect(layoutRect);
-	            item.setLayoutRect(rect);
-	            if (item.layoutOrient === 'left') {
+	        else if (item.getSpec().position === 'middle') {
+	            middleItems.push(item);
+	        }
+	        else if (item.getSpec().position === 'end') {
+	            endItems.push(item);
+	        }
+	    });
+	    return {
+	        startItems,
+	        endItems,
+	        middleItems
+	    };
+	}
+	function adjustItemsToCenter(allItems, isVertical, containerLength) {
+	    if (isVertical) {
+	        allItems.forEach(items => {
+	            const lastItem = last(items);
+	            const length = lastItem.getLayoutStartPoint().y + lastItem.getLayoutRect().height - items[0].getLayoutStartPoint().y;
+	            const centerY = (containerLength - length) / 2;
+	            items.forEach(item => {
 	                item.setLayoutStartPosition({
-	                    x: this._leftCurrent + item.layoutOffsetX + item.layoutPaddingLeft,
-	                    y: this._topCurrent + item.layoutOffsetY + item.layoutPaddingTop
+	                    x: item.getLayoutStartPoint().x,
+	                    y: item.getLayoutStartPoint().y + centerY
 	                });
-	                this._leftCurrent += rect.width + item.layoutPaddingLeft + item.layoutPaddingRight;
-	            }
-	            else if (item.layoutOrient === 'top') {
+	            });
+	        });
+	    }
+	    else {
+	        allItems.forEach(items => {
+	            const lastItem = last(items);
+	            const length = lastItem.getLayoutStartPoint().x + lastItem.getLayoutRect().width - items[0].getLayoutStartPoint().x;
+	            const centerX = (containerLength - length) / 2;
+	            items.forEach(item => {
 	                item.setLayoutStartPosition({
-	                    x: this._leftCurrent + item.layoutOffsetX + item.layoutPaddingLeft,
-	                    y: this._topCurrent + item.layoutOffsetY + item.layoutPaddingTop
+	                    x: item.getLayoutStartPoint().x + centerX,
+	                    y: item.getLayoutStartPoint().y
 	                });
-	                this._topCurrent += rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
-	            }
-	            else if (item.layoutOrient === 'right') {
+	            });
+	        });
+	    }
+	}
+	function layoutRightStartOrMiddleItems(items, layout, limitHeight, isMiddle) {
+	    if (items.length) {
+	        let maxWidth = 0;
+	        let preRight = layout.rightCurrent;
+	        let preTop = layout.topCurrent;
+	        const allItems = [];
+	        let singleLineItems = [];
+	        items.forEach(item => {
+	            const layoutRect = layout.getItemComputeLayoutRect(item);
+	            const rect = item.computeBoundsInRect(layoutRect);
+	            item.setLayoutRect(rect);
+	            const itemTotalHeight = rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
+	            const itemTotalWidth = rect.width + item.layoutPaddingLeft + item.layoutPaddingRight;
+	            item.setLayoutStartPosition({
+	                x: preRight + item.layoutOffsetX - rect.width - item.layoutPaddingRight,
+	                y: preTop + item.layoutOffsetY + item.layoutPaddingTop
+	            });
+	            maxWidth = Math.max(maxWidth, itemTotalWidth);
+	            preTop += itemTotalHeight;
+	            if (preTop > limitHeight) {
+	                preRight -= maxWidth;
+	                maxWidth = itemTotalWidth;
+	                preTop = layout.topCurrent + itemTotalHeight;
 	                item.setLayoutStartPosition({
-	                    x: this._rightCurrent + item.layoutOffsetX - rect.width - item.layoutPaddingRight,
-	                    y: this._topCurrent + item.layoutOffsetY + item.layoutPaddingTop
+	                    x: preRight + item.layoutOffsetX - rect.width - item.layoutPaddingRight,
+	                    y: layout.topCurrent + item.layoutOffsetY + item.layoutPaddingTop
 	                });
-	                this._rightCurrent -= rect.width + item.layoutPaddingLeft + item.layoutPaddingRight;
+	                allItems.push(singleLineItems);
+	                singleLineItems = [item];
 	            }
-	            else if (item.layoutOrient === 'bottom') {
-	                item.setLayoutStartPosition({
-	                    x: this._leftCurrent + item.layoutOffsetX + item.layoutPaddingRight,
-	                    y: this._bottomCurrent + item.layoutOffsetY - rect.height - item.layoutPaddingBottom
-	                });
-	                this._bottomCurrent -= rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
+	            else {
+	                singleLineItems.push(item);
 	            }
 	        });
+	        allItems.push(singleLineItems);
+	        if (isMiddle) {
+	            adjustItemsToCenter(allItems, true, limitHeight);
+	        }
+	        layout.rightCurrent = preRight - maxWidth;
 	    }
-	    layoutNormalInlineItems(normalItems) {
-	        const leftItems = normalItems.filter(item => item.layoutOrient === 'left');
-	        const rightItems = normalItems.filter(item => item.layoutOrient === 'right');
-	        const topItems = normalItems.filter(item => item.layoutOrient === 'top');
-	        const bottomItems = normalItems.filter(item => item.layoutOrient === 'bottom');
-	        const limitWidth = this._chartLayoutRect.width + this._chartLayoutRect.x;
-	        const limitHeight = this._chartLayoutRect.height + this._chartLayoutRect.y;
+	}
+	function layoutLeftStartOrMiddleItems(items, layout, limitHeight, isMiddle) {
+	    if (items.length) {
 	        let maxWidth = 0;
-	        let preLeft = this._leftCurrent;
-	        let preTop = this._topCurrent;
-	        leftItems.forEach((item, index) => {
-	            const layoutRect = this.getItemComputeLayoutRect(item);
+	        let preLeft = layout.leftCurrent;
+	        let preTop = layout.topCurrent;
+	        const allItems = [];
+	        let singleLineItems = [];
+	        items.forEach(item => {
+	            const layoutRect = layout.getItemComputeLayoutRect(item);
 	            const rect = item.computeBoundsInRect(layoutRect);
 	            item.setLayoutRect(rect);
 	            const itemTotalHeight = rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
@@ -61703,19 +61890,34 @@
 	            if (preTop > limitHeight) {
 	                preLeft += maxWidth;
 	                maxWidth = itemTotalWidth;
-	                preTop = this._topCurrent + itemTotalHeight;
+	                preTop = layout.topCurrent + itemTotalHeight;
 	                item.setLayoutStartPosition({
 	                    x: preLeft + item.layoutOffsetX + item.layoutPaddingLeft,
-	                    y: this._topCurrent + item.layoutOffsetY + item.layoutPaddingTop
+	                    y: layout.topCurrent + item.layoutOffsetY + item.layoutPaddingTop
 	                });
+	                allItems.push(singleLineItems);
+	                singleLineItems = [item];
+	            }
+	            else {
+	                singleLineItems.push(item);
 	            }
 	        });
-	        this._leftCurrent = preLeft + maxWidth;
+	        allItems.push(singleLineItems);
+	        if (isMiddle) {
+	            adjustItemsToCenter(allItems, true, limitHeight);
+	        }
+	        layout.leftCurrent = preLeft + maxWidth;
+	    }
+	}
+	function layoutTopStartOrMiddleItems(items, layout, limitWidth, isMiddle) {
+	    if (items.length) {
 	        let maxHeight = 0;
-	        preLeft = this._leftCurrent;
-	        preTop = this._topCurrent;
-	        topItems.forEach((item, index) => {
-	            const layoutRect = this.getItemComputeLayoutRect(item);
+	        let preLeft = layout.leftCurrent;
+	        let preTop = layout.topCurrent;
+	        const allItems = [];
+	        let singleLineItems = [];
+	        items.forEach(item => {
+	            const layoutRect = layout.getItemComputeLayoutRect(item);
 	            const rect = item.computeBoundsInRect(layoutRect);
 	            item.setLayoutRect(rect);
 	            const itemTotalHeight = rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
@@ -61727,72 +61929,314 @@
 	            maxHeight = Math.max(maxHeight, itemTotalHeight);
 	            preLeft += itemTotalWidth;
 	            if (preLeft > limitWidth) {
-	                preLeft = this._leftCurrent + itemTotalWidth;
+	                preLeft = layout.leftCurrent + itemTotalWidth;
 	                preTop += maxHeight;
 	                maxHeight = itemTotalHeight;
 	                item.setLayoutStartPosition({
-	                    x: this._leftCurrent + item.layoutOffsetX + item.layoutPaddingLeft,
+	                    x: layout.leftCurrent + item.layoutOffsetX + item.layoutPaddingLeft,
 	                    y: preTop + item.layoutOffsetY + item.layoutPaddingTop
 	                });
+	                allItems.push(singleLineItems);
+	                singleLineItems = [item];
+	            }
+	            else {
+	                singleLineItems.push(item);
 	            }
 	        });
-	        this._topCurrent = preTop + maxHeight;
-	        maxWidth = 0;
-	        let preRight = this._rightCurrent;
-	        preTop = this._topCurrent;
-	        rightItems.forEach((item, index) => {
-	            const layoutRect = this.getItemComputeLayoutRect(item);
+	        allItems.push(singleLineItems);
+	        if (isMiddle) {
+	            adjustItemsToCenter(allItems, false, limitWidth);
+	        }
+	        layout.topCurrent = preTop + maxHeight;
+	    }
+	}
+	function layoutBottomStartOrMiddleItems(items, layout, limitWidth, isMiddle) {
+	    if (items.length) {
+	        let maxHeight = 0;
+	        let preLeft = layout.leftCurrent;
+	        let preBottom = layout.bottomCurrent;
+	        const allItems = [];
+	        let singleLineItems = [];
+	        items.forEach(item => {
+	            const layoutRect = layout.getItemComputeLayoutRect(item);
 	            const rect = item.computeBoundsInRect(layoutRect);
 	            item.setLayoutRect(rect);
 	            const itemTotalHeight = rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
 	            const itemTotalWidth = rect.width + item.layoutPaddingLeft + item.layoutPaddingRight;
 	            item.setLayoutStartPosition({
-	                x: preRight + item.layoutOffsetX - rect.width - item.layoutPaddingRight,
-	                y: preTop + item.layoutOffsetY + item.layoutPaddingTop
+	                x: preLeft + item.layoutOffsetX + item.layoutPaddingLeft,
+	                y: preBottom + item.layoutOffsetY - rect.height - item.layoutPaddingBottom
 	            });
-	            maxWidth = Math.max(maxWidth, itemTotalWidth);
-	            preTop += itemTotalHeight;
-	            if (preTop > limitHeight) {
+	            maxHeight = Math.max(maxHeight, itemTotalHeight);
+	            preLeft += itemTotalWidth;
+	            if (preLeft > limitWidth) {
+	                allItems.push(singleLineItems);
+	                preLeft = layout.leftCurrent + itemTotalWidth;
+	                preBottom -= maxHeight;
+	                maxHeight = itemTotalHeight;
+	                item.setLayoutStartPosition({
+	                    x: layout.leftCurrent + item.layoutOffsetX + item.layoutPaddingLeft,
+	                    y: preBottom + item.layoutOffsetY - rect.height - item.layoutPaddingBottom
+	                });
+	                singleLineItems = [item];
+	            }
+	            else {
+	                singleLineItems.push(item);
+	            }
+	        });
+	        allItems.push(singleLineItems);
+	        if (isMiddle) {
+	            adjustItemsToCenter(allItems, false, limitWidth);
+	        }
+	        layout.bottomCurrent = preBottom - maxHeight;
+	    }
+	}
+	function layoutLeftInlineItems(items, layout, limitHeight) {
+	    const { startItems, middleItems, endItems } = getPositionItems(items);
+	    if (startItems.length) {
+	        layoutLeftStartOrMiddleItems(startItems, layout, limitHeight, false);
+	    }
+	    if (middleItems.length) {
+	        layoutLeftStartOrMiddleItems(middleItems, layout, limitHeight, true);
+	    }
+	    if (endItems.length) {
+	        let maxWidth = 0;
+	        let preLeft = layout.leftCurrent;
+	        let preBottom = layout.bottomCurrent;
+	        endItems.forEach(item => {
+	            const layoutRect = layout.getItemComputeLayoutRect(item);
+	            const rect = item.computeBoundsInRect(layoutRect);
+	            item.setLayoutRect(rect);
+	            const itemTotalHeight = rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
+	            const itemTotalWidth = rect.width + item.layoutPaddingLeft + item.layoutPaddingRight;
+	            if (preBottom < itemTotalHeight) {
+	                preLeft += maxWidth;
+	                maxWidth = itemTotalWidth;
+	                preBottom = layout.bottomCurrent;
+	                item.setLayoutStartPosition({
+	                    x: preLeft + item.layoutOffsetX + item.layoutPaddingLeft,
+	                    y: preBottom + item.layoutOffsetY - rect.height - item.layoutPaddingBottom
+	                });
+	            }
+	            else {
+	                item.setLayoutStartPosition({
+	                    x: preLeft + item.layoutOffsetX + item.layoutPaddingLeft,
+	                    y: preBottom + item.layoutOffsetY - rect.height - item.layoutPaddingBottom
+	                });
+	                maxWidth = Math.max(maxWidth, itemTotalWidth);
+	                preBottom -= itemTotalHeight;
+	            }
+	        });
+	        layout.leftCurrent = preLeft + maxWidth;
+	    }
+	}
+	function layoutRightInlineItems(items, layout, limitHeight) {
+	    const { startItems, middleItems, endItems } = getPositionItems(items);
+	    if (startItems.length) {
+	        layoutRightStartOrMiddleItems(startItems, layout, limitHeight, false);
+	    }
+	    if (middleItems.length) {
+	        layoutRightStartOrMiddleItems(middleItems, layout, limitHeight, true);
+	    }
+	    if (endItems.length) {
+	        let maxWidth = 0;
+	        let preRight = layout.rightCurrent;
+	        let preBottom = layout.bottomCurrent;
+	        endItems.forEach(item => {
+	            const layoutRect = layout.getItemComputeLayoutRect(item);
+	            const rect = item.computeBoundsInRect(layoutRect);
+	            item.setLayoutRect(rect);
+	            const itemTotalHeight = rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
+	            const itemTotalWidth = rect.width + item.layoutPaddingLeft + item.layoutPaddingRight;
+	            if (preBottom < itemTotalHeight) {
 	                preRight -= maxWidth;
 	                maxWidth = itemTotalWidth;
-	                preTop = this._topCurrent + itemTotalHeight;
+	                preBottom = layout.bottomCurrent;
 	                item.setLayoutStartPosition({
 	                    x: preRight + item.layoutOffsetX - rect.width - item.layoutPaddingRight,
-	                    y: this._topCurrent + item.layoutOffsetY + item.layoutPaddingTop
+	                    y: preBottom + item.layoutOffsetY - rect.height - item.layoutPaddingBottom
 	                });
 	            }
+	            else {
+	                item.setLayoutStartPosition({
+	                    x: preRight + item.layoutOffsetX - rect.width - item.layoutPaddingRight,
+	                    y: preBottom + item.layoutOffsetY - rect.height - item.layoutPaddingBottom
+	                });
+	                maxWidth = Math.max(maxWidth, itemTotalWidth);
+	                preBottom -= itemTotalHeight;
+	            }
 	        });
-	        this._rightCurrent = preRight - maxWidth;
-	        maxHeight = 0;
-	        preLeft = this._leftCurrent;
-	        let preBottom = this._bottomCurrent;
-	        bottomItems.forEach((item, index) => {
-	            const layoutRect = this.getItemComputeLayoutRect(item);
+	        layout.rightCurrent = preRight - maxWidth;
+	    }
+	}
+	function layoutTopInlineItems(items, layout, limitWidth) {
+	    const { startItems, middleItems, endItems } = getPositionItems(items);
+	    if (startItems.length) {
+	        layoutTopStartOrMiddleItems(startItems, layout, limitWidth, false);
+	    }
+	    if (middleItems.length) {
+	        layoutTopStartOrMiddleItems(middleItems, layout, limitWidth, true);
+	    }
+	    if (endItems.length) {
+	        let maxHeight = 0;
+	        let preTop = layout.topCurrent;
+	        let preRight = layout.rightCurrent;
+	        endItems.forEach(item => {
+	            const layoutRect = layout.getItemComputeLayoutRect(item);
 	            const rect = item.computeBoundsInRect(layoutRect);
 	            item.setLayoutRect(rect);
 	            const itemTotalHeight = rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
 	            const itemTotalWidth = rect.width + item.layoutPaddingLeft + item.layoutPaddingRight;
-	            item.setLayoutStartPosition({
-	                x: preLeft + item.layoutOffsetX + item.layoutPaddingLeft,
-	                y: preBottom + item.layoutOffsetY - rect.height - item.layoutPaddingBottom
-	            });
-	            maxHeight = Math.max(maxHeight, itemTotalHeight);
-	            preLeft += itemTotalWidth;
-	            if (preLeft > limitWidth) {
-	                preLeft = this._leftCurrent + itemTotalWidth;
+	            if (preRight < itemTotalWidth) {
+	                preRight = layout.rightCurrent;
+	                preTop += maxHeight;
+	                maxHeight = itemTotalHeight;
+	                item.setLayoutStartPosition({
+	                    x: layout.rightCurrent + item.layoutOffsetX - rect.width - item.layoutPaddingRight,
+	                    y: preTop + item.layoutOffsetY + item.layoutPaddingTop
+	                });
+	            }
+	            else {
+	                item.setLayoutStartPosition({
+	                    x: preRight + item.layoutOffsetX - rect.width - item.layoutPaddingRight,
+	                    y: preTop + item.layoutOffsetY + item.layoutPaddingTop
+	                });
+	                maxHeight = Math.max(maxHeight, itemTotalHeight);
+	                preRight -= itemTotalWidth;
+	            }
+	        });
+	        layout.topCurrent = preTop + maxHeight;
+	    }
+	}
+	function layoutBottomInlineItems(items, layout, limitWidth) {
+	    const { startItems, middleItems, endItems } = getPositionItems(items);
+	    if (startItems.length) {
+	        layoutBottomStartOrMiddleItems(startItems, layout, limitWidth, false);
+	    }
+	    if (middleItems.length) {
+	        layoutBottomStartOrMiddleItems(middleItems, layout, limitWidth, true);
+	    }
+	    if (endItems.length) {
+	        let maxHeight = 0;
+	        let preBottom = layout.bottomCurrent;
+	        let preRight = layout.rightCurrent;
+	        endItems.forEach(item => {
+	            const layoutRect = layout.getItemComputeLayoutRect(item);
+	            const rect = item.computeBoundsInRect(layoutRect);
+	            item.setLayoutRect(rect);
+	            const itemTotalHeight = rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
+	            const itemTotalWidth = rect.width + item.layoutPaddingLeft + item.layoutPaddingRight;
+	            if (preRight < itemTotalWidth) {
+	                preRight = layout.rightCurrent;
 	                preBottom -= maxHeight;
 	                maxHeight = itemTotalHeight;
 	                item.setLayoutStartPosition({
-	                    x: this._leftCurrent + item.layoutOffsetX + item.layoutPaddingLeft,
+	                    x: layout.rightCurrent + item.layoutOffsetX - rect.width - item.layoutPaddingRight,
 	                    y: preBottom + item.layoutOffsetY - rect.height - item.layoutPaddingBottom
 	                });
 	            }
+	            else {
+	                item.setLayoutStartPosition({
+	                    x: preRight + item.layoutOffsetX - rect.width - item.layoutPaddingRight,
+	                    y: preBottom + item.layoutOffsetY - rect.height - item.layoutPaddingBottom
+	                });
+	                maxHeight = Math.max(maxHeight, itemTotalHeight);
+	                preRight -= itemTotalWidth;
+	            }
 	        });
-	        this._bottomCurrent = preBottom - maxHeight;
+	        layout.bottomCurrent = preBottom - maxHeight;
+	    }
+	}
+
+	class Layout {
+	    constructor(_spec, ctx) {
+	        this.leftCurrent = 0;
+	        this.topCurrent = 0;
+	        this.rightCurrent = 0;
+	        this.bottomCurrent = 0;
+	        this._onError = ctx === null || ctx === void 0 ? void 0 : ctx.onError;
+	    }
+	    layoutItems(_chart, items, chartLayoutRect, chartViewBox) {
+	        this._chartLayoutRect = chartLayoutRect;
+	        this._chartViewBox = chartViewBox;
+	        this.leftCurrent = chartLayoutRect.x;
+	        this.topCurrent = chartLayoutRect.y;
+	        this.rightCurrent = chartLayoutRect.x + chartLayoutRect.width;
+	        this.bottomCurrent = chartLayoutRect.height + chartLayoutRect.y;
+	        items.sort((a, b) => b.layoutLevel - a.layoutLevel);
+	        this.layoutNormalInlineItems(items.filter(x => x.layoutType === 'normal-inline'));
+	        this.layoutNormalItems(items.filter(x => x.layoutType === 'normal'));
+	        const layoutTemp = {
+	            leftCurrent: this.leftCurrent,
+	            topCurrent: this.topCurrent,
+	            rightCurrent: this.rightCurrent,
+	            bottomCurrent: this.bottomCurrent
+	        };
+	        const regionItems = items.filter(x => x.layoutType === 'region');
+	        const relativeItems = items.filter(x => x.layoutType === 'region-relative');
+	        this.layoutRegionItems(regionItems, relativeItems);
+	        if (relativeItems.some(i => i.getAutoIndent())) {
+	            const { top, bottom, left, right } = this._checkAutoIndent(relativeItems);
+	            if (top || bottom || left || right) {
+	                this.topCurrent = layoutTemp.topCurrent + top;
+	                this.bottomCurrent = layoutTemp.bottomCurrent - bottom;
+	                this.leftCurrent = layoutTemp.leftCurrent + left;
+	                this.rightCurrent = layoutTemp.rightCurrent - right;
+	                this.layoutRegionItems(regionItems, relativeItems);
+	            }
+	        }
+	        this.layoutAbsoluteItems(items.filter(x => x.layoutType === 'absolute'));
+	    }
+	    layoutNormalItems(normalItems) {
+	        normalItems.forEach(item => {
+	            const layoutRect = this.getItemComputeLayoutRect(item);
+	            const rect = item.computeBoundsInRect(layoutRect);
+	            item.setLayoutRect(rect);
+	            if (item.layoutOrient === 'left') {
+	                item.setLayoutStartPosition({
+	                    x: this.leftCurrent + item.layoutOffsetX + item.layoutPaddingLeft,
+	                    y: this.topCurrent + item.layoutOffsetY + item.layoutPaddingTop
+	                });
+	                this.leftCurrent += rect.width + item.layoutPaddingLeft + item.layoutPaddingRight;
+	            }
+	            else if (item.layoutOrient === 'top') {
+	                item.setLayoutStartPosition({
+	                    x: this.leftCurrent + item.layoutOffsetX + item.layoutPaddingLeft,
+	                    y: this.topCurrent + item.layoutOffsetY + item.layoutPaddingTop
+	                });
+	                this.topCurrent += rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
+	            }
+	            else if (item.layoutOrient === 'right') {
+	                item.setLayoutStartPosition({
+	                    x: this.rightCurrent + item.layoutOffsetX - rect.width - item.layoutPaddingRight,
+	                    y: this.topCurrent + item.layoutOffsetY + item.layoutPaddingTop
+	                });
+	                this.rightCurrent -= rect.width + item.layoutPaddingLeft + item.layoutPaddingRight;
+	            }
+	            else if (item.layoutOrient === 'bottom') {
+	                item.setLayoutStartPosition({
+	                    x: this.leftCurrent + item.layoutOffsetX + item.layoutPaddingRight,
+	                    y: this.bottomCurrent + item.layoutOffsetY - rect.height - item.layoutPaddingBottom
+	                });
+	                this.bottomCurrent -= rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
+	            }
+	        });
+	    }
+	    layoutNormalInlineItems(normalItems) {
+	        const leftItems = normalItems.filter(item => item.layoutOrient === 'left');
+	        const rightItems = normalItems.filter(item => item.layoutOrient === 'right');
+	        const topItems = normalItems.filter(item => item.layoutOrient === 'top');
+	        const bottomItems = normalItems.filter(item => item.layoutOrient === 'bottom');
+	        const limitWidth = this._chartLayoutRect.width + this._chartLayoutRect.x;
+	        const limitHeight = this._chartLayoutRect.height + this._chartLayoutRect.y;
+	        layoutLeftInlineItems(leftItems, this, limitHeight);
+	        layoutTopInlineItems(topItems, this, limitWidth);
+	        layoutRightInlineItems(rightItems, this, limitHeight);
+	        layoutBottomInlineItems(bottomItems, this, limitWidth);
 	    }
 	    layoutRegionItems(regionItems, regionRelativeItems) {
-	        let regionRelativeTotalWidth = this._rightCurrent - this._leftCurrent;
-	        let regionRelativeTotalHeight = this._bottomCurrent - this._topCurrent;
+	        let regionRelativeTotalWidth = this.rightCurrent - this.leftCurrent;
+	        let regionRelativeTotalHeight = this.bottomCurrent - this.topCurrent;
 	        regionRelativeItems
 	            .filter(x => x.layoutOrient === 'left' || x.layoutOrient === 'right')
 	            .forEach(item => {
@@ -61801,18 +62245,18 @@
 	            item.setLayoutRect({ width: rect.width });
 	            if (item.layoutOrient === 'left') {
 	                item.setLayoutStartPosition({
-	                    x: this._leftCurrent + item.layoutOffsetX + item.layoutPaddingLeft
+	                    x: this.leftCurrent + item.layoutOffsetX + item.layoutPaddingLeft
 	                });
-	                this._leftCurrent += rect.width + item.layoutPaddingLeft + item.layoutPaddingRight;
+	                this.leftCurrent += rect.width + item.layoutPaddingLeft + item.layoutPaddingRight;
 	            }
 	            else if (item.layoutOrient === 'right') {
-	                this._rightCurrent -= rect.width + item.layoutPaddingLeft + item.layoutPaddingRight;
+	                this.rightCurrent -= rect.width + item.layoutPaddingLeft + item.layoutPaddingRight;
 	                item.setLayoutStartPosition({
-	                    x: this._rightCurrent + item.layoutOffsetX + item.layoutPaddingLeft
+	                    x: this.rightCurrent + item.layoutOffsetX + item.layoutPaddingLeft
 	                });
 	            }
 	        });
-	        regionRelativeTotalWidth = this._rightCurrent - this._leftCurrent;
+	        regionRelativeTotalWidth = this.rightCurrent - this.leftCurrent;
 	        regionRelativeItems
 	            .filter(x => x.layoutOrient === 'top' || x.layoutOrient === 'bottom')
 	            .forEach(item => {
@@ -61821,26 +62265,28 @@
 	            item.setLayoutRect({ height: rect.height });
 	            if (item.layoutOrient === 'top') {
 	                item.setLayoutStartPosition({
-	                    y: this._topCurrent + item.layoutOffsetY + item.layoutPaddingTop
+	                    y: this.topCurrent + item.layoutOffsetY + item.layoutPaddingTop
 	                });
-	                this._topCurrent += rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
+	                this.topCurrent += rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
 	            }
 	            else if (item.layoutOrient === 'bottom') {
-	                this._bottomCurrent -= rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
+	                this.bottomCurrent -= rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
 	                item.setLayoutStartPosition({
-	                    y: this._bottomCurrent + item.layoutOffsetY + item.layoutPaddingTop
+	                    y: this.bottomCurrent + item.layoutOffsetY + item.layoutPaddingTop
 	                });
 	            }
 	        });
-	        regionRelativeTotalHeight = this._bottomCurrent - this._topCurrent;
+	        regionRelativeTotalHeight = this.bottomCurrent - this.topCurrent;
+	        const regionWidth = Math.min(regionRelativeTotalWidth, ...regionItems.map(region => { var _a, _b; return (_b = (_a = region.getMaxWidth) === null || _a === void 0 ? void 0 : _a.call(region)) !== null && _b !== void 0 ? _b : Number.MAX_VALUE; }));
+	        const regionHeight = Math.min(regionRelativeTotalHeight, ...regionItems.map(region => { var _a, _b; return (_b = (_a = region.getMaxHeight) === null || _a === void 0 ? void 0 : _a.call(region)) !== null && _b !== void 0 ? _b : Number.MAX_VALUE; }));
 	        regionItems.forEach(region => {
 	            region.setLayoutRect({
-	                width: regionRelativeTotalWidth,
-	                height: regionRelativeTotalHeight
+	                width: regionWidth,
+	                height: regionHeight
 	            });
 	            region.setLayoutStartPosition({
-	                x: this._leftCurrent + region.layoutOffsetX + region.layoutPaddingLeft,
-	                y: this._topCurrent + region.layoutOffsetY + region.layoutPaddingTop
+	                x: this.leftCurrent + region.layoutOffsetX + region.layoutPaddingLeft,
+	                y: this.topCurrent + region.layoutOffsetY + region.layoutPaddingTop
 	            });
 	        });
 	        regionRelativeItems.forEach(item => {
@@ -61852,6 +62298,11 @@
 	                item.setLayoutStartPosition({
 	                    y: relativeRegion.getLayoutStartPoint().y + item.layoutOffsetY + item.layoutPaddingTop
 	                });
+	                if (item.layoutOrient === 'right') {
+	                    item.setLayoutStartPosition({
+	                        x: item.getLayoutStartPoint().x + regionWidth - regionRelativeTotalWidth
+	                    });
+	                }
 	            }
 	            else if (['top', 'bottom'].includes(item.layoutOrient)) {
 	                const relativeRegion = this.filterRegionsWithID(regionItems, item.layoutBindRegionID[0]);
@@ -61861,6 +62312,11 @@
 	                item.setLayoutStartPosition({
 	                    x: relativeRegion.getLayoutStartPoint().x + item.layoutOffsetX + item.layoutPaddingLeft
 	                });
+	                if (item.layoutOrient === 'bottom') {
+	                    item.setLayoutStartPosition({
+	                        y: item.getLayoutStartPoint().y + regionHeight - regionRelativeTotalHeight
+	                    });
+	                }
 	            }
 	        });
 	    }
@@ -61879,8 +62335,8 @@
 	    }
 	    getItemComputeLayoutRect(item) {
 	        const result = {
-	            width: this._rightCurrent - this._leftCurrent - item.layoutPaddingLeft - item.layoutPaddingRight,
-	            height: this._bottomCurrent - this._topCurrent - item.layoutPaddingTop - item.layoutPaddingBottom
+	            width: this.rightCurrent - this.leftCurrent - item.layoutPaddingLeft - item.layoutPaddingRight,
+	            height: this.bottomCurrent - this.topCurrent - item.layoutPaddingTop - item.layoutPaddingBottom
 	        };
 	        return result;
 	    }
@@ -61891,8 +62347,8 @@
 	            bottom: 0,
 	            right: 0
 	        };
-	        const rightCurrent = this._chartViewBox.x2 - this._chartViewBox.x1 - this._rightCurrent;
-	        const bottomCurrent = this._chartViewBox.y2 - this._chartViewBox.y1 - this._bottomCurrent;
+	        const rightCurrent = this._chartViewBox.x2 - this._chartViewBox.x1 - this.rightCurrent;
+	        const bottomCurrent = this._chartViewBox.y2 - this._chartViewBox.y1 - this.bottomCurrent;
 	        items.forEach(i => {
 	            if (!i.getVisible() || !i.getAutoIndent()) {
 	                return;
@@ -61900,11 +62356,11 @@
 	            const vOrH = i.layoutOrient === 'left' || i.layoutOrient === 'right';
 	            const outer = i.getLastComputeOutBounds();
 	            if (vOrH) {
-	                result.top = Math.max(result.top, outer.y1 - this._topCurrent);
+	                result.top = Math.max(result.top, outer.y1 - this.topCurrent);
 	                result.bottom = Math.max(result.bottom, outer.y2 - bottomCurrent);
 	            }
 	            else {
-	                result.left = Math.max(result.left, outer.x1 - this._leftCurrent);
+	                result.left = Math.max(result.left, outer.x1 - this.leftCurrent);
 	                result.right = Math.max(result.right, outer.x2 - rightCurrent);
 	            }
 	        });
@@ -62224,6 +62680,9 @@
 	    }
 	}
 
+	const keptInUpdateAttribute = {
+	    defined: true
+	};
 	class CompilableMark extends GrammarItem {
 	    getSupport3d() {
 	        return this._support3d;
@@ -62440,6 +62899,9 @@
 	                    dependency: [this.stateKeyToSignalName('markUpdateRank')]
 	                };
 	            }
+	            else if (keptInUpdateAttribute[key]) {
+	                updateStyles[key] = normalStyle[key].style;
+	            }
 	            else {
 	                enterStyles[key] = this.compileCommonAttributeCallback(key, 'normal');
 	            }
@@ -62858,7 +63320,7 @@
 	                        computeColor = color(data, this._attributeContext, opt, markData);
 	                    }
 	                    if (isValid$1(opacity)) {
-	                        computeColor = Color.SetOpacity(computeColor, opacity);
+	                        computeColor = Color$1.SetOpacity(computeColor, opacity);
 	                    }
 	                    return {
 	                        offset: isFunction$1(offset) ? offset(data, this._attributeContext, opt, markData) : offset,
@@ -63003,7 +63465,7 @@
 	VChart.useMark([ComponentMark, GroupMark, ImageMark]);
 	Factory.registerRegion('region', Region);
 	Factory.registerLayout('base', Layout);
-	const version = "1.4.0-beta.2";
+	const version = "1.5.0";
 	Logger.getInstance(LoggerLevel.Error);
 
 	const WordCloud3dAnimation = (params) => {
@@ -64240,17 +64702,26 @@
 	        });
 	    }
 	    encodeDefined(mark, attr) {
-	        var _a, _b;
+	        var _a, _b, _c, _d, _e, _f;
 	        if (!mark) {
 	            return;
 	        }
 	        const statistics = (_b = (_a = this.getViewDataStatistics()) === null || _a === void 0 ? void 0 : _a.latestData) === null || _b === void 0 ? void 0 : _b[this.getStackValueField()];
 	        if (this._invalidType === 'zero' || (statistics && (statistics === null || statistics === void 0 ? void 0 : statistics.allValid))) {
+	            if (((_d = (_c = mark.stateStyle.normal) === null || _c === void 0 ? void 0 : _c[attr]) === null || _d === void 0 ? void 0 : _d.style) === true) {
+	                return;
+	            }
 	            this.setMarkStyle(mark, { [attr]: true }, 'normal', AttributeLevel.Series);
 	        }
 	        else {
+	            if (((_f = (_e = mark.stateStyle.normal) === null || _e === void 0 ? void 0 : _e[attr]) === null || _f === void 0 ? void 0 : _f.style) !== true) {
+	                return;
+	            }
 	            this.setMarkStyle(mark, { [attr]: this._getInvalidDefined }, 'normal', AttributeLevel.Series);
 	        }
+	        if (mark.getProduct()) {
+	            mark.compileEncode();
+	        }
 	    }
 	}
 
@@ -65250,6 +65721,10 @@
 	    getStack() {
 	        return this._stack;
 	    }
+	    getStackValue() {
+	        var _a;
+	        return (_a = this._spec.stackValue) !== null && _a !== void 0 ? _a : `${PREFIX}_series_${this.type}`;
+	    }
 	    getPercent() {
 	        return this._percent;
 	    }
@@ -65343,6 +65818,9 @@
 	            this._stackOffsetSilhouette = this._spec.stackOffsetSilhouette;
 	            this._stack = this._spec.stackOffsetSilhouette || this._stack;
 	        }
+	        if (isValid$1(this._spec.stackValue)) {
+	            this._stack = true;
+	        }
 	        if (isValid$1(this._spec.invalidType)) {
 	            this._invalidType = this._spec.invalidType;
 	        }
@@ -65777,8 +66255,8 @@
 	    _compareSpec(ignoreCheckKeys) {
 	        var _a, _b;
 	        const result = super._compareSpec();
-	        const currentKeys = Object.keys(this._originalSpec).sort();
-	        const nextKeys = Object.keys(this._spec).sort();
+	        const currentKeys = Object.keys(this._originalSpec || {}).sort();
+	        const nextKeys = Object.keys(this._spec || {}).sort();
 	        if (!isEqual$1(currentKeys, nextKeys)) {
 	            result.reMake = true;
 	            return result;
@@ -67114,27 +67592,23 @@
 	class Stack {
 	    constructor(chart) {
 	        this.stackRegion = ({ model }) => {
-	            const stackCache = {
-	                nodes: {}
-	            };
-	            model.getSeries().forEach(s => {
-	                const stackData = s.getStackData();
-	                const stackValueField = s.getStackValueField();
-	                if (stackData && stackValueField) {
-	                    this.stackGroup(stackData, stackCache, stackValueField);
+	            const stackValueGroup = getRegionStackGroup(model, true);
+	            for (const stackValue in stackValueGroup) {
+	                for (const key in stackValueGroup[stackValue].nodes) {
+	                    stack(stackValueGroup[stackValue].nodes[key], model.getStackInverse());
 	                }
-	            });
-	            for (const key in stackCache.nodes) {
-	                this.stack(stackCache.nodes[key]);
 	            }
-	            for (const key in stackCache.nodes) {
-	                this.stackOffsetSilhouette(stackCache.nodes[key]);
+	            for (const stackValue in stackValueGroup) {
+	                for (const key in stackValueGroup[stackValue].nodes) {
+	                    stackOffsetSilhouette(stackValueGroup[stackValue].nodes[key]);
+	                }
 	            }
 	            model.getSeries().forEach(s => {
 	                const stackData = s.getStackData();
+	                const stackValue = s.getStackValue();
 	                const stackValueField = s.getStackValueField();
 	                if (stackData && stackValueField) {
-	                    this.stackTotal(stackCache, stackValueField);
+	                    stackTotal(stackValueGroup[stackValue], stackValueField);
 	                }
 	            });
 	        };
@@ -67150,81 +67624,6 @@
 	            this.stackRegion({ model: r });
 	        });
 	    }
-	    stackTotal(stackData, valueField) {
-	        if ('values' in stackData && stackData.values.length) {
-	            const total = sum(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) {
-	            this.stackTotal(stackData.nodes[key], valueField);
-	        }
-	    }
-	    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;
-	        }
-	    }
-	    stack(stackCache) {
-	        if (stackCache.values.length > 0) {
-	            let positiveStart = 0;
-	            let negativeStart = 0;
-	            let sign = 1;
-	            let value = 0;
-	            stackCache.values.forEach(v => {
-	                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;
-	                }
-	            });
-	            stackCache.values.forEach(v => {
-	                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) {
-	            this.stack(stackCache.nodes[key]);
-	        }
-	    }
-	    stackGroup(stackData, stackCache, valueField) {
-	        if ('values' in stackData) {
-	            stackData.values.forEach(v => (v[STACK_FIELD_END] = toValidNumber(v[valueField])));
-	            stackCache.values.push(...stackData.values);
-	            return;
-	        }
-	        for (const key in stackData.nodes) {
-	            !stackCache.nodes[key] &&
-	                (stackCache.nodes[key] = {
-	                    values: [],
-	                    nodes: {}
-	                });
-	            this.stackGroup(stackData.nodes[key], stackCache.nodes[key], valueField);
-	        }
-	    }
 	}
 
 	class BaseChart extends CompilableBase {
@@ -67413,6 +67812,9 @@
 	        if (!has$2(spec, 'tooltip')) {
 	            spec.tooltip = {};
 	        }
+	        if (isValid$1(spec.stackInverse)) {
+	            spec.region.forEach((r) => !isValid$1(r.stackInverse) && (r.stackInverse = spec.stackInverse));
+	        }
 	    }
 	    init(options = {}) {
 	        this.initRegion();
@@ -68363,6 +68765,48 @@
 	}
 	RectMark.type = MarkTypeEnum.rect;
 
+	function stackWithMinHeight(stackCache, stackInverse, context) {
+	    if (stackCache.values.length > 0) {
+	        let seriesInfo = stackCache.series;
+	        if (stackInverse) {
+	            seriesInfo = [...seriesInfo].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;
+	            }
+	        });
+	    }
+	    for (const key in stackCache.nodes) {
+	        stackWithMinHeight(stackCache.nodes[key], stackInverse, context);
+	    }
+	}
+
 	VChart.useMark([RectMark, TextMark]);
 	const DefaultBandWidth$2 = 6;
 	const RECT_X = `${PREFIX}_rect_x`;
@@ -68456,61 +68900,19 @@
 	            endMethod = 'dataToPositionX';
 	            axisHelper = '_xAxisHelper';
 	        }
-	        const barSeriesArr = region.getSeries().filter(s => s.type === SeriesTypeEnum.bar && s.getStackData());
-	        const groupedStackData = {};
-	        const iterateStackData = (data, preKey, seriesId) => {
-	            Object.keys(data.nodes).forEach(key => {
-	                const currentKey = preKey ? `${preKey}_${key}` : key;
-	                if (data.nodes[key].nodes) {
-	                    iterateStackData(data.nodes[key], currentKey, seriesId);
-	                }
-	                else {
-	                    if (!groupedStackData[currentKey]) {
-	                        groupedStackData[currentKey] = [];
-	                    }
-	                    data.nodes[key].values.forEach((obj) => {
-	                        obj.seriesId = seriesId;
-	                        groupedStackData[currentKey].push(obj);
-	                    });
-	                }
-	            });
-	        };
-	        barSeriesArr.forEach(s => {
-	            const stackData = s.getStackData();
-	            iterateStackData(stackData, '', s.id);
-	        });
-	        Object.keys(groupedStackData).forEach(key => {
-	            const values = groupedStackData[key];
-	            values.sort((a, b) => Math.abs(a[STACK_FIELD_START]) - Math.abs(b[STACK_FIELD_START]));
-	            let lastY;
-	            values.forEach((obj, index) => {
-	                var _a, _b;
-	                const series = barSeriesArr.find(s => s.id === obj.seriesId);
-	                const barMinHeight = series.getSpec().barMinHeight;
-	                const seriesScale = (_b = (_a = series[axisHelper]).getScale) === null || _b === void 0 ? void 0 : _b.call(_a, 0);
-	                const inverse = series[axisHelper].isInverse();
-	                const y1 = valueInScaleRange(series[startMethod](obj), seriesScale);
-	                let y = valueInScaleRange(series[endMethod](obj), seriesScale);
-	                if (index === 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 = isVertical ? (inverse ? 1 : -1) : inverse ? -1 : 1;
-	                }
-	                y = lastY + flag * height;
-	                obj[start] = lastY;
-	                obj[end] = y;
-	                lastY = y;
-	            });
-	        });
+	        const stackValueGroup = getRegionStackGroup(region, false, s => s.type === SeriesTypeEnum.bar);
+	        for (const stackValue in stackValueGroup) {
+	            for (const key in stackValueGroup[stackValue].nodes) {
+	                stackWithMinHeight(stackValueGroup[stackValue].nodes[key], region.getStackInverse(), {
+	                    isVertical,
+	                    start,
+	                    end,
+	                    startMethod,
+	                    endMethod,
+	                    axisHelper
+	                });
+	            }
+	        }
 	    }
 	    _calculateRectPosition(datum, isVertical) {
 	        var _a, _b;
@@ -82999,13 +83401,15 @@
 	        return this._container;
 	    }
 	    _compareSpec() {
+	        var _a;
 	        const result = super._compareSpec();
 	        if (!result.reMake) {
 	            result.reMake = ['seriesId', 'seriesIndex', 'regionId', 'regionIndex'].some(k => {
-	                return isEqual$1(this._originalSpec[k], this.getSpec()[k]);
+	                var _a;
+	                return isEqual$1((_a = this._originalSpec) === null || _a === void 0 ? void 0 : _a[k], this.getSpec()[k]);
 	            });
 	        }
-	        if (this._originalSpec.visible !== this.getSpec().visible) {
+	        if (((_a = this._originalSpec) === null || _a === void 0 ? void 0 : _a.visible) !== this.getSpec().visible) {
 	            result.reCompile = true;
 	        }
 	        return result;
@@ -83016,6 +83420,16 @@
 	    }
 	    clear() {
 	        var _a;
+	        const components = this.getVRenderComponents();
+	        if (components && components.length) {
+	            components.forEach(c => {
+	                var _a;
+	                if (c) {
+	                    (_a = this.getContainer()) === null || _a === void 0 ? void 0 : _a.removeChild(c);
+	                    c = null;
+	                }
+	            });
+	        }
 	        this._container = null;
 	        (_a = this.pluginService) === null || _a === void 0 ? void 0 : _a.disposeAll();
 	        this.pluginService = null;
@@ -83124,7 +83538,7 @@
 	                if (this._relatedAxisComponent && this._filterMode === IFilterMode.axis) {
 	                    const axisScale = this._relatedAxisComponent.getScale();
 	                    const axisSpec = this._relatedAxisComponent.getSpec();
-	                    if (this._auto) {
+	                    if (this._auto && this._getAxisBandSize(axisSpec)) {
 	                        axisScale.range((_a = this._stateScale) === null || _a === void 0 ? void 0 : _a.range(), true);
 	                    }
 	                    const newRangeFactor = axisScale.range()[0] < axisScale.range()[1] || axisSpec.inverse
@@ -83547,15 +83961,23 @@
 	        var _a;
 	        (_a = this._component) === null || _a === void 0 ? void 0 : _a.showAll();
 	    }
+	    _getAxisBandSize(axisSpec) {
+	        const bandSize = axisSpec === null || axisSpec === void 0 ? void 0 : axisSpec.bandSize;
+	        const maxBandSize = axisSpec === null || axisSpec === void 0 ? void 0 : axisSpec.maxBandSize;
+	        const minBandSize = axisSpec === null || axisSpec === void 0 ? void 0 : axisSpec.minBandSize;
+	        if (bandSize || minBandSize || maxBandSize) {
+	            return { bandSize, maxBandSize, minBandSize };
+	        }
+	        return undefined;
+	    }
 	    _autoUpdate(rect) {
-	        var _a, _b, _c;
+	        var _a, _b, _c, _d;
 	        if (!this._auto) {
 	            return true;
 	        }
 	        const axisSpec = (_a = this._relatedAxisComponent) === null || _a === void 0 ? void 0 : _a.getSpec();
-	        const bandSize = axisSpec === null || axisSpec === void 0 ? void 0 : axisSpec.bandSize;
-	        const maxBandSize = axisSpec === null || axisSpec === void 0 ? void 0 : axisSpec.maxBandSize;
-	        const minBandSize = axisSpec === null || axisSpec === void 0 ? void 0 : axisSpec.minBandSize;
+	        const bandSizeResult = this._getAxisBandSize(axisSpec);
+	        const { bandSize, maxBandSize, minBandSize } = bandSizeResult !== null && bandSizeResult !== void 0 ? bandSizeResult : {};
 	        if ((rect === null || rect === void 0 ? void 0 : rect.height) === ((_b = this._cacheRect) === null || _b === void 0 ? void 0 : _b.height) &&
 	            (rect === null || rect === void 0 ? void 0 : rect.width) === ((_c = this._cacheRect) === null || _c === void 0 ? void 0 : _c.width) &&
 	            this._fixedBandSize === bandSize) {
@@ -83566,7 +83988,7 @@
 	        const scale = this._stateScale;
 	        scale.range(this._isHorizontal ? [0, rect.width] : axisSpec.inverse ? [0, rect.height] : [rect.height, 0]);
 	        if (isDiscrete(scale.type)) {
-	            if (bandSize || minBandSize || maxBandSize) {
+	            if (bandSizeResult) {
 	                if (this._start || this._end) {
 	                    scale.rangeFactor([this._start, this._end], true);
 	                }
@@ -83579,26 +84001,26 @@
 	                if (minBandSize) {
 	                    scale.minBandwidth(minBandSize, true);
 	                }
-	                scale.rescale(false);
-	                let [start, end] = scale.rangeFactor();
-	                if ((!start && !end) || !scale.isBandwidthFixed()) {
-	                    start = 0;
-	                    end = 1;
+	                scale.rescale();
+	            }
+	            let [start, end] = (_d = scale.rangeFactor()) !== null && _d !== void 0 ? _d : [];
+	            if ((!start && !end) || !scale.isBandwidthFixed()) {
+	                start = 0;
+	                end = 1;
+	                this.hide();
+	                isShown = false;
+	            }
+	            else {
+	                if (start === 0 && end === 1) {
 	                    this.hide();
 	                    isShown = false;
 	                }
 	                else {
-	                    if (start === 0 && end === 1) {
-	                        this.hide();
-	                        isShown = false;
-	                    }
-	                    else {
-	                        this.show();
-	                    }
+	                    this.show();
 	                }
-	                this._start = start;
-	                this._end = end;
 	            }
+	            this._start = start;
+	            this._end = end;
 	        }
 	        this.setStartAndEnd(this._start, this._end);
 	        this._cacheVisibility = isShown;
@@ -83723,13 +84145,8 @@
 	        }
 	        return attrs;
 	    }
-	    clear() {
-	        var _a;
-	        if (this._component) {
-	            (_a = this.getContainer()) === null || _a === void 0 ? void 0 : _a.removeChild(this._component);
-	            this._component = null;
-	        }
-	        super.clear();
+	    getVRenderComponents() {
+	        return [this._component];
 	    }
 	}
 	ScrollBar.type = ComponentTypeEnum.scrollBar;
@@ -84012,13 +84429,8 @@
 	            }
 	        };
 	    }
-	    clear() {
-	        var _a;
-	        if (this._component) {
-	            (_a = this.getContainer()) === null || _a === void 0 ? void 0 : _a.removeChild(this._component);
-	            this._component = null;
-	        }
-	        super.clear();
+	    getVRenderComponents() {
+	        return [this._component];
 	    }
 	}
 	DataZoom.type = ComponentTypeEnum.dataZoom;
@@ -84093,6 +84505,9 @@
 	    }
 	    changeRegions(regions) {
 	    }
+	    getVRenderComponents() {
+	        return [];
+	    }
 	    onRender(ctx) {
 	    }
 	}
@@ -84115,6 +84530,7 @@
 	        this._needInitOutState = true;
 	        this._isFirstState = true;
 	        this._cacheInteractiveRangeAttrs = [];
+	        this._needEnablePickable = true;
 	    }
 	    static createComponent(spec, options) {
 	        const brushSpec = spec.brush || options.defaultSpec;
@@ -84187,9 +84603,11 @@
 	            }
 	            if (operateType === IOperateType.drawing) {
 	                this._needInitOutState = false;
+	                this._needEnablePickable = true;
 	            }
 	            if (operateType === IOperateType.drawEnd) {
 	                this._needInitOutState = true;
+	                this._needEnablePickable = false;
 	            }
 	            if (operateType === IOperateType.brushClear) {
 	                this._initMarkBrushState(componentIndex, '');
@@ -84266,6 +84684,7 @@
 	                    this._outOfBrushElementsMap[elementKey] = el;
 	                    delete this._inBrushElementsMap[operateMask.name][elementKey];
 	                }
+	                graphicItem.setAttribute('pickable', !this._needEnablePickable);
 	            });
 	        });
 	    }
@@ -84300,6 +84719,7 @@
 	                            graphicItem.addState('outOfBrush');
 	                            this._linkedOutOfBrushElementsMap[elementKey] = el;
 	                        }
+	                        graphicItem.setAttribute('pickable', !this._needEnablePickable);
 	                    });
 	                });
 	            }
@@ -84320,17 +84740,38 @@
 	                y: b * p.x + d * p.y + f + dy
 	            };
 	        });
-	        const globalAABBBoundsOffset = brushMask.globalAABBBounds
+	        brushMask.globalAABBBounds
 	            .clone()
 	            .set(brushMask.globalAABBBounds.x1 + dx, brushMask.globalAABBBounds.y1 + dy, brushMask.globalAABBBounds.x2 + dx, brushMask.globalAABBBounds.y2 + dy);
 	        const x = item.globalTransMatrix.e;
 	        const y = item.globalTransMatrix.f;
+	        let itemBounds = [];
 	        if (item.type === 'symbol') {
-	            return globalAABBBoundsOffset.contains(x, y) && polygonContainPoint(pointsCoord, x, y);
+	            const { size: itemSize = 0 } = item === null || item === void 0 ? void 0 : item.attribute;
+	            const size = array(itemSize)[0];
+	            itemBounds = [
+	                {
+	                    x: x - size,
+	                    y: y - size
+	                },
+	                {
+	                    x: x + size,
+	                    y: y - size
+	                },
+	                {
+	                    x: x + size,
+	                    y: y + size
+	                },
+	                {
+	                    x: x - size,
+	                    y: y + size
+	                }
+	            ];
+	            return polygonIntersectPolygon(pointsCoord, itemBounds);
 	        }
 	        else if (item.type === 'rect') {
 	            const { width = 0, height = 0 } = item === null || item === void 0 ? void 0 : item.attribute;
-	            const pointsRect = [
+	            itemBounds = [
 	                {
 	                    x: x,
 	                    y: y
@@ -84348,7 +84789,7 @@
 	                    y: y + height
 	                }
 	            ];
-	            return polygonIntersectPolygon(pointsCoord, pointsRect);
+	            return polygonIntersectPolygon(pointsCoord, itemBounds);
 	        }
 	        return brushMask.globalAABBBounds.intersects(item.globalAABBBounds);
 	    }
@@ -84428,6 +84869,9 @@
 	    }
 	    changeRegions(regions) {
 	    }
+	    getVRenderComponents() {
+	        return this._brushComponents;
+	    }
 	    _compareSpec() {
 	        if (this._brushComponents) {
 	            this._relativeRegions.forEach((region, index) => {
@@ -84980,6 +85424,9 @@
 	    }
 	    changeRegions() {
 	    }
+	    getVRenderComponents() {
+	        return [];
+	    }
 	}
 	MapLabelComponent.type = ComponentTypeEnum.mapLabel;
 	MapLabelComponent.speckey = 'mapLabel';
@@ -85372,6 +85819,9 @@
 	        };
 	        this._visible = (_a = spec.visible) !== null && _a !== void 0 ? _a : true;
 	    }
+	    getVRenderComponents() {
+	        return [];
+	    }
 	    created() {
 	        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
 	        super.created();
@@ -85485,9 +85935,10 @@
 	        }
 	    }
 	    _compareSpec() {
+	        var _a, _b;
 	        const result = super._compareSpec();
 	        result.reRender = true;
-	        if (this._originalSpec.type !== this._spec.type) {
+	        if (((_a = this._originalSpec) === null || _a === void 0 ? void 0 : _a.type) !== ((_b = this._spec) === null || _b === void 0 ? void 0 : _b.type)) {
 	            result.reMake = true;
 	            return result;
 	        }
@@ -86646,6 +87097,7 @@
 	        this.updateFixedWholeLength();
 	    }
 	    updateFixedWholeLength() {
+	        var _a;
 	        if (this._scale) {
 	            if (this._spec.bandSize) {
 	                this._scale.bandwidth(this._spec.bandSize);
@@ -86656,6 +87108,17 @@
 	            if (this._spec.minBandSize) {
 	                this._scale.minBandwidth(this._spec.minBandSize);
 	            }
+	            if (this._scale.isBandwidthFixed() &&
+	                this._spec.autoRegionSize &&
+	                (this._spec.bandSize || this._spec.maxBandSize)) {
+	                const rangeSize = scaleWholeRangeSize(this._scale.domain().length, (_a = this._spec.bandSize) !== null && _a !== void 0 ? _a : this._spec.maxBandSize, this._scale.paddingInner(), this._scale.paddingOuter());
+	                if (['bottom', 'top'].includes(this._orient)) {
+	                    this._regions.forEach(region => region.setMaxWidth(rangeSize));
+	                }
+	                else if (['left', 'right'].includes(this._orient)) {
+	                    this._regions.forEach(region => region.setMaxHeight(rangeSize));
+	                }
+	            }
 	        }
 	    }
 	}
@@ -87476,9 +87939,10 @@
 	    onRender(ctx) {
 	    }
 	    _compareSpec() {
+	        var _a, _b;
 	        const result = super._compareSpec();
 	        result.reRender = true;
-	        if (this._spec.orient !== this._originalSpec.orient) {
+	        if (((_a = this._spec) === null || _a === void 0 ? void 0 : _a.orient) !== ((_b = this._originalSpec) === null || _b === void 0 ? void 0 : _b.orient)) {
 	            result.reMake = true;
 	            return result;
 	        }
@@ -87555,31 +88019,33 @@
 	        this._cacheAttrs = attrs;
 	        const width = isFinite(this._legendComponent.AABBBounds.width()) ? this._legendComponent.AABBBounds.width() : 0;
 	        const height = isFinite(this._legendComponent.AABBBounds.height()) ? this._legendComponent.AABBBounds.height() : 0;
-	        const layout = this.layoutOrient === 'bottom' || this.layoutOrient === 'top' ? 'horizontal' : 'vertical';
-	        const position = this._position;
-	        const { width: rectWidth, height: rectHeight } = fullSpace;
-	        let offsetX = 0;
-	        let offsetY = 0;
-	        if (layout === 'horizontal') {
-	            if (position === 'middle') {
-	                offsetX = (rectWidth - width) / 2;
-	            }
-	            else if (position === 'end') {
-	                offsetX = rectWidth - width;
-	            }
-	        }
-	        else {
-	            if (position === 'middle') {
-	                offsetY = (rectHeight - height) / 2;
+	        if (this.layoutType !== 'normal-inline') {
+	            const layout = this.layoutOrient === 'bottom' || this.layoutOrient === 'top' ? 'horizontal' : 'vertical';
+	            const position = this._position;
+	            const { width: rectWidth, height: rectHeight } = fullSpace;
+	            let offsetX = 0;
+	            let offsetY = 0;
+	            if (layout === 'horizontal') {
+	                if (position === 'middle') {
+	                    offsetX = (rectWidth - width) / 2;
+	                }
+	                else if (position === 'end') {
+	                    offsetX = rectWidth - width;
+	                }
 	            }
-	            else if (position === 'end') {
-	                offsetY = rectHeight - height;
+	            else {
+	                if (position === 'middle') {
+	                    offsetY = (rectHeight - height) / 2;
+	                }
+	                else if (position === 'end') {
+	                    offsetY = rectHeight - height;
+	                }
 	            }
+	            this._legendComponent.setAttributes({
+	                dx: offsetX,
+	                dy: offsetY
+	            });
 	        }
-	        this._legendComponent.setAttributes({
-	            dx: offsetX,
-	            dy: offsetY
-	        });
 	        result.x2 = result.x1 + width;
 	        result.y2 = result.y1 + height;
 	        return result;
@@ -87600,15 +88066,13 @@
 	        (_b = (_a = this.effect).onSelectedDataChange) === null || _b === void 0 ? void 0 : _b.call(_a);
 	        this.event.emit(ChartEvent.legendSelectedDataChange, { model: this });
 	    }
+	    getVRenderComponents() {
+	        return [this._legendComponent];
+	    }
 	    clear() {
-	        var _a;
-	        if (this._legendComponent) {
-	            (_a = this.getContainer()) === null || _a === void 0 ? void 0 : _a.removeChild(this._legendComponent);
-	            this._legendComponent = null;
-	        }
+	        super.clear();
 	        this._cacheAttrs = null;
 	        this._preSelectedData = null;
-	        super.clear();
 	    }
 	}
 
@@ -88222,12 +88686,10 @@
 	    isRelativeModel(model) {
 	        return eachSeries(this._regions, s => model === s) || this._regions.includes(model);
 	    }
+	    getVRenderComponents() {
+	        return [this._indicatorComponent];
+	    }
 	    clear() {
-	        var _a;
-	        if (this._indicatorComponent) {
-	            (_a = this.getContainer()) === null || _a === void 0 ? void 0 : _a.removeChild(this._indicatorComponent);
-	            this._indicatorComponent = null;
-	        }
 	        this._cacheAttrs = null;
 	        super.clear();
 	    }
@@ -88275,8 +88737,9 @@
 	    onRender(ctx) {
 	    }
 	    _compareSpec() {
+	        var _a, _b;
 	        const result = super._compareSpec();
-	        if (this._originalSpec.orient !== this._spec.orient) {
+	        if (((_a = this._originalSpec) === null || _a === void 0 ? void 0 : _a.orient) !== ((_b = this._spec) === null || _b === void 0 ? void 0 : _b.orient)) {
 	            result.reMake = true;
 	        }
 	        result.change = true;
@@ -88364,14 +88827,12 @@
 	        this._cacheAttrs = attrs;
 	        return this._titleComponent;
 	    }
+	    getVRenderComponents() {
+	        return [this._titleComponent];
+	    }
 	    clear() {
-	        var _a;
-	        if (this._titleComponent) {
-	            (_a = this.getContainer()) === null || _a === void 0 ? void 0 : _a.removeChild(this._titleComponent);
-	            this._titleComponent = null;
-	        }
-	        this._cacheAttrs = null;
 	        super.clear();
+	        this._cacheAttrs = null;
 	    }
 	}
 	Title.type = ComponentTypeEnum.title;
@@ -88654,6 +89115,9 @@
 	    }
 	    changeRegions(regions) {
 	    }
+	    getVRenderComponents() {
+	        return [];
+	    }
 	    collectFeatures() {
 	        const features = [];
 	        this._regions.forEach(r => {
@@ -89530,22 +89994,15 @@
 	        }
 	        limitTagInBounds(label, this._getLimitBounds());
 	    }
-	    clear() {
-	        [
+	    getVRenderComponents() {
+	        return [
 	            this._xCrosshair,
 	            this._xTopLabel,
 	            this._xBottomLabel,
 	            this._yCrosshair,
 	            this._yLeftLabel,
 	            this._yRightLabel
-	        ].forEach(c => {
-	            var _a;
-	            if (c) {
-	                (_a = this.getContainer()) === null || _a === void 0 ? void 0 : _a.removeChild(c);
-	                c = null;
-	            }
-	        });
-	        super.clear();
+	        ];
 	    }
 	}
 	CartesianCrossHair.type = ComponentTypeEnum.cartesianCrosshair;
@@ -89892,15 +90349,13 @@
 	        }
 	        limitTagInBounds(label, this._getLimitBounds());
 	    }
-	    clear() {
-	        [(this._radiusCrosshair, this._radiusLabelCrosshair, this._angleCrosshair, this._angleLabelCrosshair)].forEach(c => {
-	            var _a;
-	            if (c) {
-	                (_a = this.getContainer()) === null || _a === void 0 ? void 0 : _a.removeChild(c);
-	                c = null;
-	            }
-	        });
-	        super.clear();
+	    getVRenderComponents() {
+	        return [
+	            this._radiusCrosshair,
+	            this._radiusLabelCrosshair,
+	            this._angleCrosshair,
+	            this._angleLabelCrosshair
+	        ];
 	    }
 	}
 	PolarCrossHair.type = ComponentTypeEnum.polarCrosshair;
@@ -90124,13 +90579,8 @@
 	    }
 	    onRender(ctx) {
 	    }
-	    clear() {
-	        var _a;
-	        super.clear();
-	        if (this._playerComponent) {
-	            (_a = this.getContainer()) === null || _a === void 0 ? void 0 : _a.removeChild(this._playerComponent);
-	        }
-	        this._playerComponent = null;
+	    getVRenderComponents() {
+	        return [this._playerComponent];
 	    }
 	    _computeLayoutRect(rect, width, height) {
 	        switch (this._orient) {
@@ -90517,13 +90967,8 @@
 	        (_a = this._option) === null || _a === void 0 ? void 0 : _a.onError('need at least one series');
 	        return null;
 	    }
-	    clear() {
-	        var _a;
-	        if (this._markerComponent) {
-	            (_a = this.getContainer()) === null || _a === void 0 ? void 0 : _a.removeChild(this._markerComponent);
-	            this._markerComponent = null;
-	        }
-	        super.clear();
+	    getVRenderComponents() {
+	        return [this._markerComponent];
 	    }
 	}
 
@@ -93391,6 +93836,9 @@
 	    }
 	    changeRegions(regions) {
 	    }
+	    getVRenderComponents() {
+	        return [];
+	    }
 	    _registerEvent() {
 	    }
 	    _releaseEvent() {
@@ -93639,6 +94087,9 @@
 	    }
 	    changeRegions(regions) {
 	    }
+	    getVRenderComponents() {
+	        return [];
+	    }
 	}
 	BaseLabelComponent.type = ComponentTypeEnum.label;
 
@@ -94276,17 +94727,17 @@
 	    layoutItems(_chart, items, chartLayoutRect, chartViewBox) {
 	        this._chartLayoutRect = chartLayoutRect;
 	        this._chartViewBox = chartViewBox;
-	        this._leftCurrent = chartLayoutRect.x;
-	        this._topCurrent = chartLayoutRect.y;
-	        this._rightCurrent = chartLayoutRect.x + chartLayoutRect.width;
-	        this._bottomCurrent = chartLayoutRect.height + chartLayoutRect.y;
+	        this.leftCurrent = chartLayoutRect.x;
+	        this.topCurrent = chartLayoutRect.y;
+	        this.rightCurrent = chartLayoutRect.x + chartLayoutRect.width;
+	        this.bottomCurrent = chartLayoutRect.height + chartLayoutRect.y;
 	        items.sort((a, b) => b.layoutLevel - a.layoutLevel);
 	        this.layoutNormalItems(items.filter(x => x.layoutType === 'normal'));
 	        const layoutTemp = {
-	            _leftCurrent: this._leftCurrent,
-	            _topCurrent: this._topCurrent,
-	            _rightCurrent: this._rightCurrent,
-	            _bottomCurrent: this._bottomCurrent
+	            leftCurrent: this.leftCurrent,
+	            _topCurrent: this.topCurrent,
+	            _rightCurrent: this.rightCurrent,
+	            _bottomCurrent: this.bottomCurrent
 	        };
 	        const regionItems = items.filter(x => x.layoutType === 'region');
 	        const relativeItems = items.filter(x => x.layoutType === 'region-relative');
@@ -94299,10 +94750,10 @@
 	            const layoutRect = zItems[0].getLayoutRect();
 	            extraWH = layoutRect;
 	        }
-	        this._leftCurrent += extraWH.width / 8;
-	        this._rightCurrent -= extraWH.width / 8;
-	        this._topCurrent += extraWH.height / 8;
-	        this._bottomCurrent -= extraWH.height / 8;
+	        this.leftCurrent += extraWH.width / 8;
+	        this.rightCurrent -= extraWH.width / 8;
+	        this.topCurrent += extraWH.height / 8;
+	        this.bottomCurrent -= extraWH.height / 8;
 	        const offsetWH = {
 	            offsetBottom: 0,
 	            offsetTop: 0,
@@ -94313,10 +94764,10 @@
 	        if (relativeItems.some(i => i.getAutoIndent())) {
 	            const { top, bottom, left, right } = this._checkAutoIndent(relativeItems);
 	            if (top || bottom || left || right) {
-	                this._topCurrent = layoutTemp._topCurrent + top;
-	                this._bottomCurrent = layoutTemp._bottomCurrent - bottom;
-	                this._leftCurrent = layoutTemp._leftCurrent + left;
-	                this._rightCurrent = layoutTemp._rightCurrent - right;
+	                this.topCurrent = layoutTemp._topCurrent + top;
+	                this.bottomCurrent = layoutTemp._bottomCurrent - bottom;
+	                this.leftCurrent = layoutTemp.leftCurrent + left;
+	                this.rightCurrent = layoutTemp._rightCurrent - right;
 	                this.layoutRegionItems(regionItems, relativeItems);
 	            }
 	        }
@@ -94357,8 +94808,8 @@
 	        });
 	    }
 	    layoutRegionItems(regionItems, regionRelativeItems, extraOffset) {
-	        let regionRelativeTotalWidth = this._rightCurrent - this._leftCurrent;
-	        let regionRelativeTotalHeight = this._bottomCurrent - this._topCurrent;
+	        let regionRelativeTotalWidth = this.rightCurrent - this.leftCurrent;
+	        let regionRelativeTotalHeight = this.bottomCurrent - this.topCurrent;
 	        if (!extraOffset) {
 	            extraOffset = { offsetLeft: 0, offsetRight: 0, offsetTop: 0, offsetBottom: 0 };
 	        }
@@ -94370,18 +94821,18 @@
 	            item.setLayoutRect({ width: rect.width });
 	            if (item.layoutOrient === 'left') {
 	                item.setLayoutStartPosition({
-	                    x: this._leftCurrent + item.layoutOffsetX + item.layoutPaddingLeft + extraOffset.offsetLeft
+	                    x: this.leftCurrent + item.layoutOffsetX + item.layoutPaddingLeft + extraOffset.offsetLeft
 	                });
-	                this._leftCurrent += rect.width + item.layoutPaddingLeft + item.layoutPaddingRight + extraOffset.offsetLeft;
+	                this.leftCurrent += rect.width + item.layoutPaddingLeft + item.layoutPaddingRight + extraOffset.offsetLeft;
 	            }
 	            else if (item.layoutOrient === 'right') {
-	                this._rightCurrent -= rect.width + item.layoutPaddingLeft + item.layoutPaddingRight + extraOffset.offsetRight;
+	                this.rightCurrent -= rect.width + item.layoutPaddingLeft + item.layoutPaddingRight + extraOffset.offsetRight;
 	                item.setLayoutStartPosition({
-	                    x: this._rightCurrent + item.layoutOffsetX + item.layoutPaddingLeft
+	                    x: this.rightCurrent + item.layoutOffsetX + item.layoutPaddingLeft
 	                });
 	            }
 	        });
-	        regionRelativeTotalWidth = this._rightCurrent - this._leftCurrent;
+	        regionRelativeTotalWidth = this.rightCurrent - this.leftCurrent;
 	        regionRelativeItems
 	            .filter(x => x.layoutOrient === 'top' || x.layoutOrient === 'bottom')
 	            .forEach(item => {
@@ -94390,27 +94841,27 @@
 	            item.setLayoutRect({ height: rect.height });
 	            if (item.layoutOrient === 'top') {
 	                item.setLayoutStartPosition({
-	                    y: this._topCurrent + item.layoutOffsetY + item.layoutPaddingTop + extraOffset.offsetTop
+	                    y: this.topCurrent + item.layoutOffsetY + item.layoutPaddingTop + extraOffset.offsetTop
 	                });
-	                this._topCurrent += rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
+	                this.topCurrent += rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
 	            }
 	            else if (item.layoutOrient === 'bottom') {
-	                this._bottomCurrent -=
+	                this.bottomCurrent -=
 	                    rect.height + item.layoutPaddingTop + item.layoutPaddingBottom + extraOffset.offsetBottom;
 	                item.setLayoutStartPosition({
-	                    y: this._bottomCurrent + item.layoutOffsetY + item.layoutPaddingTop
+	                    y: this.bottomCurrent + item.layoutOffsetY + item.layoutPaddingTop
 	                });
 	            }
 	        });
-	        regionRelativeTotalHeight = this._bottomCurrent - this._topCurrent;
+	        regionRelativeTotalHeight = this.bottomCurrent - this.topCurrent;
 	        regionItems.forEach(region => {
 	            region.setLayoutRect({
 	                width: regionRelativeTotalWidth,
 	                height: regionRelativeTotalHeight
 	            });
 	            region.setLayoutStartPosition({
-	                x: this._leftCurrent + region.layoutOffsetX + region.layoutPaddingLeft,
-	                y: this._topCurrent + region.layoutOffsetY + region.layoutPaddingTop
+	                x: this.leftCurrent + region.layoutOffsetX + region.layoutPaddingLeft,
+	                y: this.topCurrent + region.layoutOffsetY + region.layoutPaddingTop
 	            });
 	        });
 	        regionRelativeItems.forEach(item => {
@@ -94439,13 +94890,13 @@
 	            extraOffset = { offsetLeft: 0, offsetRight: 0, offsetTop: 0, offsetBottom: 0 };
 	        }
 	        const result = {
-	            width: this._rightCurrent -
-	                this._leftCurrent -
+	            width: this.rightCurrent -
+	                this.leftCurrent -
 	                item.layoutPaddingLeft -
 	                item.layoutPaddingRight -
 	                (extraOffset.offsetLeft + extraOffset.offsetRight),
-	            height: this._bottomCurrent -
-	                this._topCurrent -
+	            height: this.bottomCurrent -
+	                this.topCurrent -
 	                item.layoutPaddingTop -
 	                item.layoutPaddingBottom -
 	                (extraOffset.offsetTop + extraOffset.offsetBottom)