@visactor/vchart 1.3.0-beta.6 → 1.3.0-beta.7

package/build/index.js

@@ -2612,7 +2612,7 @@
 	  }
 	  return t;
 	}
-	function __awaiter$i(thisArg, _arguments, P, generator) {
+	function __awaiter$h(thisArg, _arguments, P, generator) {
 	  function adopt(value) {
 	    return value instanceof P ? value : new P(function (resolve) {
 	      resolve(value);
@@ -2684,6 +2684,7 @@
 	    ComponentTypeEnum["player"] = "player";
 	    ComponentTypeEnum["scrollBar"] = "scrollBar";
 	    ComponentTypeEnum["label"] = "label";
+	    ComponentTypeEnum["totalLabel"] = "totalLabel";
 	    ComponentTypeEnum["brush"] = "brush";
 	    ComponentTypeEnum["poptip"] = "poptip";
 	    ComponentTypeEnum["customMark"] = "customMark";
@@ -8181,8 +8182,8 @@
 	  if (array && array.length) {
 	    const n = array.length;
 	    for (let i = 0; i < n; i += 1) {
-	      const value = valueGetter(array[i]);
-	      isNumber(value) && !Number.isNaN(value) && (isNil(min) ? (min = value, max = value) : (min = Math.min(min, value), max = Math.max(max, value)));
+	      let value = valueGetter(array[i]);
+	      isNil(value) || !isNumber(value = +value) || Number.isNaN(value) || (isNil(min) ? (min = value, max = value) : (min = Math.min(min, value), max = Math.max(max, value)));
 	    }
 	    return [min, max];
 	  }
@@ -9812,7 +9813,17 @@
 	    }
 	    return couldBeValidNumber(v.substring(0, v.length - 1));
 	}
+	function isPercentOffset(v) {
+	    if (!isObject$f(v)) {
+	        return false;
+	    }
+	    if ('percent' in v || 'offset' in v) {
+	        return true;
+	    }
+	    return false;
+	}
 	function calcLayoutNumber(v, size, callOp) {
+	    var _a, _b;
 	    if (isNumber(v)) {
 	        return v;
 	    }
@@ -9822,6 +9833,9 @@
 	    if (isFunction(v)) {
 	        return v(callOp);
 	    }
+	    if (isObject$f(v)) {
+	        return size * ((_a = v.percent) !== null && _a !== void 0 ? _a : 0) + ((_b = v.offset) !== null && _b !== void 0 ? _b : 0);
+	    }
 	    return 0;
 	}
 	function calcPadding(paddingSpec, rect, callOp) {
@@ -9882,12 +9896,13 @@
 	        }
 	        return result;
 	    }
-	    if (isNumber(spec) || isPercent(spec) || isFunction(spec)) {
+	    if (isNumber(spec) || isPercent(spec) || isFunction(spec) || isPercentOffset(spec)) {
 	        result.top = result.left = result.bottom = result.right = spec;
 	        return result;
 	    }
 	    if (isObject$f(spec)) {
 	        result = Object.assign({}, spec);
+	        return result;
 	    }
 	    return result;
 	}
@@ -13512,7 +13527,7 @@
 	  return Array.isArray(object) && object.some(isPromise);
 	}
 
-	var __awaiter$h = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+	var __awaiter$g = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
 	  function adopt(value) {
 	    return value instanceof P ? value : new P(function (resolve) {
 	      resolve(value);
@@ -13657,7 +13672,7 @@
 	  }
 	};
 	var _saveAsyncResultToSingletonScope = function (binding, asyncResult) {
-	  return __awaiter$h(void 0, void 0, void 0, function () {
+	  return __awaiter$g(void 0, void 0, void 0, function () {
 	    var result, ex_1;
 	    return __generator$3(this, function (_a) {
 	      switch (_a.label) {
@@ -13745,7 +13760,7 @@
 	  };
 	  return __assign$1.apply(this, arguments);
 	};
-	var __awaiter$g = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+	var __awaiter$f = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
 	  function adopt(value) {
 	    return value instanceof P ? value : new P(function (resolve) {
 	      resolve(value);
@@ -13918,7 +13933,7 @@
 	  return instance;
 	}
 	function createInstanceWithInjectionsAsync(args) {
-	  return __awaiter$g(this, void 0, void 0, function () {
+	  return __awaiter$f(this, void 0, void 0, function () {
 	    var constructorInjections, propertyInjections;
 	    return __generator$2(this, function (_a) {
 	      switch (_a.label) {
@@ -13938,7 +13953,7 @@
 	  });
 	}
 	function possiblyWaitInjections(possiblePromiseinjections) {
-	  return __awaiter$g(this, void 0, void 0, function () {
+	  return __awaiter$f(this, void 0, void 0, function () {
 	    var injections, _i, possiblePromiseinjections_1, injection;
 	    return __generator$2(this, function (_a) {
 	      injections = [];
@@ -14001,7 +14016,7 @@
 	  }
 	}
 
-	var __awaiter$f = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+	var __awaiter$e = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
 	  function adopt(value) {
 	    return value instanceof P ? value : new P(function (resolve) {
 	      resolve(value);
@@ -14227,7 +14242,7 @@
 	  return result;
 	};
 	var _activateContainerAsync = function (activationsIterator, context, resultPromise) {
-	  return __awaiter$f(void 0, void 0, void 0, function () {
+	  return __awaiter$e(void 0, void 0, void 0, function () {
 	    var result, activation;
 	    return __generator$1(this, function (_a) {
 	      switch (_a.label) {
@@ -14841,7 +14856,7 @@
 	  };
 	  return __assign.apply(this, arguments);
 	};
-	var __awaiter$e = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+	var __awaiter$d = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
 	  function adopt(value) {
 	    return value instanceof P ? value : new P(function (resolve) {
 	      resolve(value);
@@ -15040,7 +15055,7 @@
 	    for (var _i = 0; _i < arguments.length; _i++) {
 	      modules[_i] = arguments[_i];
 	    }
-	    return __awaiter$e(this, void 0, void 0, function () {
+	    return __awaiter$d(this, void 0, void 0, function () {
 	      var getHelpers, _a, modules_2, currentModule, containerModuleHelpers;
 	      return __generator(this, function (_b) {
 	        switch (_b.label) {
@@ -15082,7 +15097,7 @@
 	    for (var _i = 0; _i < arguments.length; _i++) {
 	      modules[_i] = arguments[_i];
 	    }
-	    return __awaiter$e(this, void 0, void 0, function () {
+	    return __awaiter$d(this, void 0, void 0, function () {
 	      var _a, modules_3, module_1, deactivations;
 	      return __generator(this, function (_b) {
 	        switch (_b.label) {
@@ -15118,7 +15133,7 @@
 	    return this.bind(serviceIdentifier);
 	  };
 	  Container.prototype.rebindAsync = function (serviceIdentifier) {
-	    return __awaiter$e(this, void 0, void 0, function () {
+	    return __awaiter$d(this, void 0, void 0, function () {
 	      return __generator(this, function (_a) {
 	        switch (_a.label) {
 	          case 0:
@@ -15138,7 +15153,7 @@
 	    this._removeServiceFromDictionary(serviceIdentifier);
 	  };
 	  Container.prototype.unbindAsync = function (serviceIdentifier) {
-	    return __awaiter$e(this, void 0, void 0, function () {
+	    return __awaiter$d(this, void 0, void 0, function () {
 	      var bindings;
 	      return __generator(this, function (_a) {
 	        switch (_a.label) {
@@ -15164,7 +15179,7 @@
 	    this._bindingDictionary = new Lookup();
 	  };
 	  Container.prototype.unbindAllAsync = function () {
-	    return __awaiter$e(this, void 0, void 0, function () {
+	    return __awaiter$d(this, void 0, void 0, function () {
 	      var promises;
 	      var _this = this;
 	      return __generator(this, function (_a) {
@@ -15253,7 +15268,7 @@
 	    return this._getButThrowIfAsync(getArgs);
 	  };
 	  Container.prototype.getAsync = function (serviceIdentifier) {
-	    return __awaiter$e(this, void 0, void 0, function () {
+	    return __awaiter$d(this, void 0, void 0, function () {
 	      var getArgs;
 	      return __generator(this, function (_a) {
 	        getArgs = this._getNotAllArgs(serviceIdentifier, false);
@@ -15266,7 +15281,7 @@
 	    return this._getButThrowIfAsync(getArgs);
 	  };
 	  Container.prototype.getTaggedAsync = function (serviceIdentifier, key, value) {
-	    return __awaiter$e(this, void 0, void 0, function () {
+	    return __awaiter$d(this, void 0, void 0, function () {
 	      var getArgs;
 	      return __generator(this, function (_a) {
 	        getArgs = this._getNotAllArgs(serviceIdentifier, false, key, value);
@@ -15350,7 +15365,7 @@
 	    }
 	  };
 	  Container.prototype._handleDeactivationError = function (asyncResult, constructor) {
-	    return __awaiter$e(this, void 0, void 0, function () {
+	    return __awaiter$d(this, void 0, void 0, function () {
 	      var ex_1;
 	      return __generator(this, function (_a) {
 	        switch (_a.label) {
@@ -15383,7 +15398,7 @@
 	    }
 	  };
 	  Container.prototype._deactivateContainerAsync = function (instance, deactivationsIterator) {
-	    return __awaiter$e(this, void 0, void 0, function () {
+	    return __awaiter$d(this, void 0, void 0, function () {
 	      var deactivation;
 	      return __generator(this, function (_a) {
 	        switch (_a.label) {
@@ -15536,7 +15551,7 @@
 	    }
 	  };
 	  Container.prototype._deactivateSingletonsAsync = function (bindings) {
-	    return __awaiter$e(this, void 0, void 0, function () {
+	    return __awaiter$d(this, void 0, void 0, function () {
 	      var _this = this;
 	      return __generator(this, function (_a) {
 	        switch (_a.label) {
@@ -15559,7 +15574,7 @@
 	    }
 	  };
 	  Container.prototype._propagateContainerDeactivationThenBindingAndPreDestroyAsync = function (binding, instance, constructor) {
-	    return __awaiter$e(this, void 0, void 0, function () {
+	    return __awaiter$d(this, void 0, void 0, function () {
 	      return __generator(this, function (_a) {
 	        switch (_a.label) {
 	          case 0:
@@ -15599,7 +15614,7 @@
 	    return this._preDestroy(constructor, instance);
 	  };
 	  Container.prototype._bindingDeactivationAndPreDestroyAsync = function (binding, instance, constructor) {
-	    return __awaiter$e(this, void 0, void 0, function () {
+	    return __awaiter$d(this, void 0, void 0, function () {
 	      return __generator(this, function (_a) {
 	        switch (_a.label) {
 	          case 0:
@@ -18164,7 +18179,7 @@
 	}
 	Generator.auto_increment_id = 0;
 
-	var __awaiter$d = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+	var __awaiter$c = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
 	  return new (P || (P = Promise))(function (resolve, reject) {
 	    function fulfilled(value) {
 	      try {
@@ -18234,7 +18249,7 @@
 	  }
 	  forEachChildrenAsync(cb) {
 	    let reverse = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
-	    return __awaiter$d(this, void 0, void 0, function* () {
+	    return __awaiter$c(this, void 0, void 0, function* () {
 	      if (reverse) {
 	        let child = this._lastChild,
 	          i = 0;
@@ -18764,13 +18779,14 @@
 	    e.propagationStopped = !1, e.propagationImmediatelyStopped = !1, this.propagate(e, type), this.dispatch.emit(type || e.type, e);
 	  }
 	  mapEvent(e) {
-	    var _a;
+	    var _a, _b, _c, _d, _e;
 	    if (!this.rootTarget) return;
 	    const mappers = this.mappingTable[e.type];
 	    let target;
 	    const cacheKey = `${e.canvasX}-${e.canvasY}`;
-	    if ((null === (_a = this._prePointTargetCache) || void 0 === _a ? void 0 : _a[cacheKey]) ? target = this._prePointTargetCache[cacheKey] : (target = this.pickTarget(e.canvasX, e.canvasY), this._prePointTargetCache = {
-	      [cacheKey]: target
+	    if ((null === (_a = this._prePointTargetCache) || void 0 === _a ? void 0 : _a[cacheKey]) && (null === (_c = null === (_b = this._prePointTargetCache) || void 0 === _b ? void 0 : _b[cacheKey]) || void 0 === _c ? void 0 : _c.stage.renderCount) === (null === (_d = this._prePointTargetCache) || void 0 === _d ? void 0 : _d.stageRenderCount) ? target = this._prePointTargetCache[cacheKey] : (target = this.pickTarget(e.canvasX, e.canvasY), this._prePointTargetCache = {
+	      [cacheKey]: target,
+	      stageRenderCount: null !== (_e = null == target ? void 0 : target.stage.renderCount) && void 0 !== _e ? _e : -1
 	    }), mappers) for (let i = 0, j = mappers.length; i < j; i++) mappers[i].fn(e, target);else console.warn(`[EventManager]: Event mapping not defined for ${e.type}`);
 	  }
 	  propagate(e, type) {
@@ -18847,13 +18863,12 @@
 	  }
 	  notifyListeners(e, type) {
 	    const listeners = e.currentTarget._events[type];
-	    if (listeners) {
-	      if ("fn" in listeners) listeners.once && e.currentTarget.removeEventListener(type, listeners.fn, {
-	        once: !0
-	      }), listeners.fn.call(listeners.context, e);else for (let i = 0, j = listeners.length; i < j && !e.propagationImmediatelyStopped; i++) listeners[i].once && e.currentTarget.removeEventListener(type, listeners[i].fn, {
-	        once: !0
-	      }), listeners[i].fn.call(listeners[i].context, e);
-	    } else this.emitDelegation(e, type);
+	    if (listeners) if ("fn" in listeners) listeners.once && e.currentTarget.removeEventListener(type, listeners.fn, {
+	      once: !0
+	    }), listeners.fn.call(listeners.context, e);else for (let i = 0, j = listeners.length; i < j && !e.propagationImmediatelyStopped; i++) listeners[i].once && e.currentTarget.removeEventListener(type, listeners[i].fn, {
+	      once: !0
+	    }), listeners[i].fn.call(listeners[i].context, e);
+	    this.emitDelegation(e, type);
 	  }
 	  emitDelegation(e, type) {
 	    const listeners = e.currentTarget._events[WILDCARD];
@@ -22270,7 +22285,7 @@
 	}
 	Graphic.mixin(EventTarget);
 
-	var __awaiter$c = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+	var __awaiter$b = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
 	  return new (P || (P = Promise))(function (resolve, reject) {
 	    function fulfilled(value) {
 	      try {
@@ -22296,7 +22311,7 @@
 	  });
 	};
 	function waitForAllSubLayers(stage) {
-	  return __awaiter$c(this, void 0, void 0, function* () {
+	  return __awaiter$b(this, void 0, void 0, function* () {
 	    const promiseList = [],
 	      layers = stage.getChildren();
 	    yield new Promise(resolve => {
@@ -23217,6 +23232,16 @@
 	      cap = arcAttribute.cap,
 	      forceShowCap = arcAttribute.forceShowCap
 	    } = arc.attribute;
+	    let conicalOffset = 0;
+	    const tempChangeConicalColor = (isBoolean(cap) && cap || cap[0]) && "conical" === fill.gradient;
+	    if (tempChangeConicalColor) {
+	      const {
+	        sc: sc,
+	        startAngle: startAngle,
+	        endAngle: endAngle
+	      } = arc.getParsedAngle();
+	      abs$1(endAngle - startAngle) < pi2 - epsilon$1 && (conicalOffset = sc || 0, fill.startAngle -= conicalOffset, fill.endAngle -= conicalOffset);
+	    }
 	    let beforeRenderContribitionsRuned = !1;
 	    const {
 	      isFullStroke: isFullStroke,
@@ -23251,7 +23276,7 @@
 	      }
 	      strokeCb ? strokeCb(context, arc.attribute, arcAttribute) : sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke());
 	    }
-	    if (cap && forceShowCap) {
+	    if ((isBoolean(cap) && cap || cap[1]) && forceShowCap) {
 	      const {
 	        startAngle: sa,
 	        endAngle: ea
@@ -23288,7 +23313,7 @@
 	    }
 	    this._arcAfterRenderContribitions.forEach(c => {
 	      c.drawShape(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb);
-	    });
+	    }), tempChangeConicalColor && (fill.startAngle += conicalOffset, fill.endAngle += conicalOffset);
 	  }
 	  draw(arc, renderService, drawContext, params) {
 	    const {
@@ -25458,7 +25483,9 @@
 	        capAngle = capWidth / outerRadius;
 	      if (capWidth > epsilon$1 && outerRadius > epsilon$1) return {
 	        startAngle: startAngle - sign * capAngle * startCap,
-	        endAngle: endAngle + sign * capAngle * endCap
+	        endAngle: endAngle + sign * capAngle * endCap,
+	        sc: sign * capAngle * startCap,
+	        ec: sign * capAngle * endCap
 	      };
 	    }
 	    return {
@@ -28396,15 +28423,26 @@
 	  }
 	  drawShape(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb) {
 	    const {
-	      innerRadius = arcAttribute.innerRadius,
-	      outerRadius = arcAttribute.outerRadius,
-	      startAngle = arcAttribute.startAngle,
-	      endAngle = arcAttribute.endAngle,
-	      opacity = arcAttribute.opacity,
-	      outerBorder: outerBorder,
-	      innerBorder: innerBorder
-	    } = arc.attribute;
-	    if (outerBorder) {
+	        outerBorder: outerBorder,
+	        innerBorder: innerBorder
+	      } = arc.attribute,
+	      doOuterBorder = outerBorder && !1 !== outerBorder.visible,
+	      doInnerBorder = innerBorder && !1 !== innerBorder.visible;
+	    if (!doOuterBorder && !doInnerBorder) return;
+	    const {
+	        innerRadius = arcAttribute.innerRadius,
+	        outerRadius = arcAttribute.outerRadius,
+	        startAngle = arcAttribute.startAngle,
+	        endAngle = arcAttribute.endAngle,
+	        opacity = arcAttribute.opacity,
+	        x: originX = arcAttribute.x,
+	        y: originY = arcAttribute.y,
+	        scaleX = arcAttribute.scaleX,
+	        scaleY = arcAttribute.scaleY
+	      } = arc.attribute,
+	      doStrokeOuter = !(!outerBorder || !outerBorder.stroke),
+	      doStrokeInner = !(!innerBorder || !innerBorder.stroke);
+	    if (doOuterBorder) {
 	      const {
 	          distance = arcAttribute.outerBorder.distance
 	        } = outerBorder,
@@ -28415,12 +28453,12 @@
 	        innerRadius: innerRadius - d,
 	        startAngle: startAngle - deltaAngle,
 	        endAngle: endAngle + deltaAngle
-	      }), context.beginPath(), drawArcPath$1(arc, context, x, y, outerRadius + d, innerRadius - d), context.setShadowStyle && context.setShadowStyle(arc, arc.attribute, arcAttribute), strokeCb) strokeCb(context, outerBorder, arcAttribute.outerBorder);else if (sVisible) {
+	      }), context.beginPath(), drawArcPath$1(arc, context, x, y, outerRadius + d, innerRadius - d), context.setShadowStyle && context.setShadowStyle(arc, arc.attribute, arcAttribute), strokeCb) strokeCb(context, outerBorder, arcAttribute.outerBorder);else if (doStrokeOuter) {
 	        const lastOpacity = arcAttribute.outerBorder.opacity;
-	        arcAttribute.outerBorder.opacity = opacity, context.setStrokeStyle(arc, outerBorder, x, y, arcAttribute.outerBorder), arcAttribute.outerBorder.opacity = lastOpacity, context.stroke();
+	        arcAttribute.outerBorder.opacity = opacity, context.setStrokeStyle(arc, outerBorder, (originX - x) / scaleX, (originY - y) / scaleY, arcAttribute.outerBorder), arcAttribute.outerBorder.opacity = lastOpacity, context.stroke();
 	      }
 	    }
-	    if (innerBorder) {
+	    if (doInnerBorder) {
 	      const {
 	          distance = arcAttribute.innerBorder.distance
 	        } = innerBorder,
@@ -28431,9 +28469,9 @@
 	        innerRadius: innerRadius + d,
 	        startAngle: startAngle + deltaAngle,
 	        endAngle: endAngle - deltaAngle
-	      }), context.beginPath(), drawArcPath$1(arc, context, x, y, outerRadius - d, innerRadius + d), context.setShadowStyle && context.setShadowStyle(arc, arc.attribute, arcAttribute), strokeCb) strokeCb(context, innerBorder, arcAttribute.innerBorder);else if (sVisible) {
+	      }), context.beginPath(), drawArcPath$1(arc, context, x, y, outerRadius - d, innerRadius + d), context.setShadowStyle && context.setShadowStyle(arc, arc.attribute, arcAttribute), strokeCb) strokeCb(context, innerBorder, arcAttribute.innerBorder);else if (doStrokeInner) {
 	        const lastOpacity = arcAttribute.innerBorder.opacity;
-	        arcAttribute.innerBorder.opacity = opacity, context.setStrokeStyle(arc, innerBorder, x, y, arcAttribute.innerBorder), arcAttribute.innerBorder.opacity = lastOpacity, context.stroke();
+	        arcAttribute.innerBorder.opacity = opacity, context.setStrokeStyle(arc, innerBorder, (originX - x) / scaleX, (originY - y) / scaleY, arcAttribute.innerBorder), arcAttribute.innerBorder.opacity = lastOpacity, context.stroke();
 	      }
 	    }
 	    arc.setAttributes({
@@ -28471,31 +28509,42 @@
 	  }
 	  drawShape(circle, context, x, y, doFill, doStroke, fVisible, sVisible, circleAttribute, drawContext, fillCb, strokeCb) {
 	    const {
-	      radius = circleAttribute.radius,
-	      startAngle = circleAttribute.startAngle,
-	      endAngle = circleAttribute.endAngle,
-	      opacity = circleAttribute.opacity,
-	      outerBorder: outerBorder,
-	      innerBorder: innerBorder
-	    } = circle.attribute;
-	    if (outerBorder) {
+	        outerBorder: outerBorder,
+	        innerBorder: innerBorder
+	      } = circle.attribute,
+	      doOuterBorder = outerBorder && !1 !== outerBorder.visible,
+	      doInnerBorder = innerBorder && !1 !== innerBorder.visible;
+	    if (!doOuterBorder && !doInnerBorder) return;
+	    const {
+	        radius = circleAttribute.radius,
+	        startAngle = circleAttribute.startAngle,
+	        endAngle = circleAttribute.endAngle,
+	        opacity = circleAttribute.opacity,
+	        x: originX = circleAttribute.x,
+	        y: originY = circleAttribute.y,
+	        scaleX = circleAttribute.scaleX,
+	        scaleY = circleAttribute.scaleY
+	      } = circle.attribute,
+	      doStrokeOuter = !(!outerBorder || !outerBorder.stroke),
+	      doStrokeInner = !(!innerBorder || !innerBorder.stroke);
+	    if (doOuterBorder) {
 	      const {
 	          distance = circleAttribute.outerBorder.distance
 	        } = outerBorder,
 	        dw = getScaledStroke(context, distance, context.dpr);
-	      if (context.beginPath(), context.arc(x, y, radius + dw, startAngle, endAngle), context.closePath(), context.setShadowStyle && context.setShadowStyle(circle, circle.attribute, circleAttribute), strokeCb) strokeCb(context, outerBorder, circleAttribute.outerBorder);else if (sVisible) {
+	      if (context.beginPath(), context.arc(x, y, radius + dw, startAngle, endAngle), context.closePath(), context.setShadowStyle && context.setShadowStyle(circle, circle.attribute, circleAttribute), strokeCb) strokeCb(context, outerBorder, circleAttribute.outerBorder);else if (doStrokeOuter) {
 	        const lastOpacity = circleAttribute.outerBorder.opacity;
-	        circleAttribute.outerBorder.opacity = opacity, context.setStrokeStyle(circle, outerBorder, x, y, circleAttribute.outerBorder), circleAttribute.outerBorder.opacity = lastOpacity, context.stroke();
+	        circleAttribute.outerBorder.opacity = opacity, context.setStrokeStyle(circle, outerBorder, (originX - x) / scaleX, (originY - y) / scaleY, circleAttribute.outerBorder), circleAttribute.outerBorder.opacity = lastOpacity, context.stroke();
 	      }
 	    }
-	    if (innerBorder) {
+	    if (doInnerBorder) {
 	      const {
 	          distance = circleAttribute.innerBorder.distance
 	        } = innerBorder,
 	        dw = getScaledStroke(context, distance, context.dpr);
-	      if (context.beginPath(), context.arc(x, y, radius - dw, startAngle, endAngle), context.closePath(), context.setShadowStyle && context.setShadowStyle(circle, circle.attribute, circleAttribute), strokeCb) strokeCb(context, innerBorder, circleAttribute.innerBorder);else if (sVisible) {
+	      if (context.beginPath(), context.arc(x, y, radius - dw, startAngle, endAngle), context.closePath(), context.setShadowStyle && context.setShadowStyle(circle, circle.attribute, circleAttribute), strokeCb) strokeCb(context, innerBorder, circleAttribute.innerBorder);else if (doStrokeInner) {
 	        const lastOpacity = circleAttribute.innerBorder.opacity;
-	        circleAttribute.innerBorder.opacity = opacity, context.setStrokeStyle(circle, innerBorder, x, y, circleAttribute.innerBorder), circleAttribute.innerBorder.opacity = lastOpacity, context.stroke();
+	        circleAttribute.innerBorder.opacity = opacity, context.setStrokeStyle(circle, innerBorder, (originX - x) / scaleX, (originY - y) / scaleY, circleAttribute.innerBorder), circleAttribute.innerBorder.opacity = lastOpacity, context.stroke();
 	      }
 	    }
 	  }
@@ -28592,14 +28641,25 @@
 	  }
 	  drawShape(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb) {
 	    const {
-	      width = rectAttribute.width,
-	      height = rectAttribute.height,
-	      cornerRadius = rectAttribute.cornerRadius,
-	      opacity = rectAttribute.opacity,
-	      outerBorder: outerBorder,
-	      innerBorder: innerBorder
-	    } = rect.attribute;
-	    if (outerBorder) {
+	        outerBorder: outerBorder,
+	        innerBorder: innerBorder
+	      } = rect.attribute,
+	      doOuterBorder = outerBorder && !1 !== outerBorder.visible,
+	      doInnerBorder = innerBorder && !1 !== innerBorder.visible;
+	    if (!doOuterBorder && !doInnerBorder) return;
+	    const {
+	        width = rectAttribute.width,
+	        height = rectAttribute.height,
+	        cornerRadius = rectAttribute.cornerRadius,
+	        opacity = rectAttribute.opacity,
+	        x: originX = rectAttribute.x,
+	        y: originY = rectAttribute.y,
+	        scaleX = rectAttribute.scaleX,
+	        scaleY = rectAttribute.scaleY
+	      } = rect.attribute,
+	      doStrokeOuter = !(!outerBorder || !outerBorder.stroke),
+	      doStrokeInner = !(!innerBorder || !innerBorder.stroke);
+	    if (doOuterBorder) {
 	      const {
 	          distance = rectAttribute.outerBorder.distance
 	        } = outerBorder,
@@ -28607,12 +28667,12 @@
 	        nextX = x - d,
 	        nextY = y - d,
 	        dw = 2 * d;
-	      if (0 === cornerRadius || isArray$3(cornerRadius) && cornerRadius.every(num => 0 === num) ? (context.beginPath(), context.rect(nextX, nextY, width + dw, height + dw)) : (context.beginPath(), createRectPath(context, nextX, nextY, width + dw, height + dw, cornerRadius)), context.setShadowStyle && context.setShadowStyle(rect, rect.attribute, rectAttribute), strokeCb) strokeCb(context, outerBorder, rectAttribute.outerBorder);else if (sVisible) {
+	      if (0 === cornerRadius || isArray$3(cornerRadius) && cornerRadius.every(num => 0 === num) ? (context.beginPath(), context.rect(nextX, nextY, width + dw, height + dw)) : (context.beginPath(), createRectPath(context, nextX, nextY, width + dw, height + dw, cornerRadius)), context.setShadowStyle && context.setShadowStyle(rect, rect.attribute, rectAttribute), strokeCb) strokeCb(context, outerBorder, rectAttribute.outerBorder);else if (doStrokeOuter) {
 	        const lastOpacity = rectAttribute.outerBorder.opacity;
-	        rectAttribute.outerBorder.opacity = opacity, context.setStrokeStyle(rect, outerBorder, x, y, rectAttribute.outerBorder), rectAttribute.outerBorder.opacity = lastOpacity, context.stroke();
+	        rectAttribute.outerBorder.opacity = opacity, context.setStrokeStyle(rect, outerBorder, (originX - x) / scaleX, (originY - y) / scaleY, rectAttribute.outerBorder), rectAttribute.outerBorder.opacity = lastOpacity, context.stroke();
 	      }
 	    }
-	    if (innerBorder) {
+	    if (doInnerBorder) {
 	      const {
 	          distance = rectAttribute.innerBorder.distance
 	        } = innerBorder,
@@ -28620,9 +28680,9 @@
 	        nextX = x + d,
 	        nextY = y + d,
 	        dw = 2 * d;
-	      if (0 === cornerRadius || isArray$3(cornerRadius) && cornerRadius.every(num => 0 === num) ? (context.beginPath(), context.rect(nextX, nextY, width - dw, height - dw)) : (context.beginPath(), createRectPath(context, nextX, nextY, width - dw, height - dw, cornerRadius)), context.setShadowStyle && context.setShadowStyle(rect, rect.attribute, rectAttribute), strokeCb) strokeCb(context, innerBorder, rectAttribute.innerBorder);else if (sVisible) {
+	      if (0 === cornerRadius || isArray$3(cornerRadius) && cornerRadius.every(num => 0 === num) ? (context.beginPath(), context.rect(nextX, nextY, width - dw, height - dw)) : (context.beginPath(), createRectPath(context, nextX, nextY, width - dw, height - dw, cornerRadius)), context.setShadowStyle && context.setShadowStyle(rect, rect.attribute, rectAttribute), strokeCb) strokeCb(context, innerBorder, rectAttribute.innerBorder);else if (doStrokeInner) {
 	        const lastOpacity = rectAttribute.innerBorder.opacity;
-	        rectAttribute.innerBorder.opacity = opacity, context.setStrokeStyle(rect, innerBorder, x, y, rectAttribute.innerBorder), rectAttribute.innerBorder.opacity = lastOpacity, context.stroke();
+	        rectAttribute.innerBorder.opacity = opacity, context.setStrokeStyle(rect, innerBorder, (originX - x) / scaleX, (originY - y) / scaleY, rectAttribute.innerBorder), rectAttribute.innerBorder.opacity = lastOpacity, context.stroke();
 	      }
 	    }
 	  }
@@ -28685,33 +28745,43 @@
 	    this.time = BaseRenderContributionTime.afterFillStroke, this.useStyle = !0, this.order = 0;
 	  }
 	  drawShape(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb) {
+	    const parsedPath = symbol.getParsedPath();
+	    if (!parsedPath) return;
 	    const {
-	        size = symbolAttribute.size,
-	        opacity = symbolAttribute.opacity,
 	        outerBorder: outerBorder,
 	        innerBorder: innerBorder
 	      } = symbol.attribute,
-	      parsedPath = symbol.getParsedPath();
-	    if (parsedPath) {
-	      if (outerBorder) {
-	        const {
-	            distance = symbolAttribute.outerBorder.distance
-	          } = outerBorder,
-	          d = getScaledStroke(context, distance, context.dpr);
-	        if (context.beginPath(), !1 === parsedPath.drawOffset(context, size, x, y, d) && context.closePath(), context.setShadowStyle && context.setShadowStyle(symbol, symbol.attribute, symbolAttribute), strokeCb) strokeCb(context, outerBorder, symbolAttribute.outerBorder);else if (sVisible) {
-	          const lastOpacity = symbolAttribute.outerBorder.opacity;
-	          symbolAttribute.outerBorder.opacity = opacity, context.setStrokeStyle(symbol, outerBorder, x, y, symbolAttribute.outerBorder), symbolAttribute.outerBorder.opacity = lastOpacity, context.stroke();
-	        }
+	      doOuterBorder = outerBorder && !1 !== outerBorder.visible,
+	      doInnerBorder = innerBorder && !1 !== innerBorder.visible;
+	    if (!doOuterBorder && !doInnerBorder) return;
+	    const {
+	        size = symbolAttribute.size,
+	        opacity = symbolAttribute.opacity,
+	        x: originX = symbolAttribute.x,
+	        y: originY = symbolAttribute.y,
+	        scaleX = symbolAttribute.scaleX,
+	        scaleY = symbolAttribute.scaleY
+	      } = symbol.attribute,
+	      doStrokeOuter = !(!outerBorder || !outerBorder.stroke),
+	      doStrokeInner = !(!innerBorder || !innerBorder.stroke);
+	    if (doOuterBorder) {
+	      const {
+	          distance = symbolAttribute.outerBorder.distance
+	        } = outerBorder,
+	        d = getScaledStroke(context, distance, context.dpr);
+	      if (context.beginPath(), !1 === parsedPath.drawOffset(context, size, x, y, d) && context.closePath(), context.setShadowStyle && context.setShadowStyle(symbol, symbol.attribute, symbolAttribute), strokeCb) strokeCb(context, outerBorder, symbolAttribute.outerBorder);else if (doStrokeOuter) {
+	        const lastOpacity = symbolAttribute.outerBorder.opacity;
+	        symbolAttribute.outerBorder.opacity = opacity, context.setStrokeStyle(symbol, outerBorder, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute.outerBorder), symbolAttribute.outerBorder.opacity = lastOpacity, context.stroke();
 	      }
-	      if (innerBorder) {
-	        const {
-	            distance = symbolAttribute.innerBorder.distance
-	          } = innerBorder,
-	          d = getScaledStroke(context, distance, context.dpr);
-	        if (context.beginPath(), !1 === parsedPath.drawOffset(context, size, x, y, -d) && context.closePath(), context.setShadowStyle && context.setShadowStyle(symbol, symbol.attribute, symbolAttribute), strokeCb) strokeCb(context, innerBorder, symbolAttribute.innerBorder);else if (sVisible) {
-	          const lastOpacity = symbolAttribute.innerBorder.opacity;
-	          symbolAttribute.innerBorder.opacity = opacity, context.setStrokeStyle(symbol, innerBorder, x, y, symbolAttribute.innerBorder), symbolAttribute.innerBorder.opacity = lastOpacity, context.stroke();
-	        }
+	    }
+	    if (doInnerBorder) {
+	      const {
+	          distance = symbolAttribute.innerBorder.distance
+	        } = innerBorder,
+	        d = getScaledStroke(context, distance, context.dpr);
+	      if (context.beginPath(), !1 === parsedPath.drawOffset(context, size, x, y, -d) && context.closePath(), context.setShadowStyle && context.setShadowStyle(symbol, symbol.attribute, symbolAttribute), strokeCb) strokeCb(context, innerBorder, symbolAttribute.innerBorder);else if (doStrokeInner) {
+	        const lastOpacity = symbolAttribute.innerBorder.opacity;
+	        symbolAttribute.innerBorder.opacity = opacity, context.setStrokeStyle(symbol, innerBorder, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute.innerBorder), symbolAttribute.innerBorder.opacity = lastOpacity, context.stroke();
 	      }
 	    }
 	  }
@@ -28779,7 +28849,7 @@
 	  bind(DefaultRenderService).toSelf(), bind(RenderService).toService(DefaultRenderService);
 	});
 
-	var __awaiter$b = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+	var __awaiter$a = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
 	  return new (P || (P = Promise))(function (resolve, reject) {
 	    function fulfilled(value) {
 	      try {
@@ -28844,7 +28914,7 @@
 	}
 	function foreachAsync(graphic, defaultZIndex, cb) {
 	  let reverse = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;
-	  return __awaiter$b(this, void 0, void 0, function* () {
+	  return __awaiter$a(this, void 0, void 0, function* () {
 	    yield graphic.forEachChildrenAsync(cb, reverse);
 	  });
 	}
@@ -30936,7 +31006,7 @@
 	  __metadata$F = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  },
-	  __awaiter$a = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+	  __awaiter$9 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
 	    return new (P || (P = Promise))(function (resolve, reject) {
 	      function fulfilled(value) {
 	        try {
@@ -30962,7 +31032,7 @@
 	    });
 	  };
 	function makeUpCanvas(domref, canvasIdLists, canvasMap, freeCanvasIdx, freeCanvasList) {
-	  return __awaiter$a(this, void 0, void 0, function* () {
+	  return __awaiter$9(this, void 0, void 0, function* () {
 	    const dpr = wx.getSystemInfoSync().pixelRatio;
 	    for (let i = 0; i < canvasIdLists.length; i++) {
 	      const id = canvasIdLists[i];
@@ -33315,7 +33385,7 @@
 	      decorator(target, key, paramIndex);
 	    };
 	  },
-	  __awaiter$9 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+	  __awaiter$8 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
 	    return new (P || (P = Promise))(function (resolve, reject) {
 	      function fulfilled(value) {
 	        try {
@@ -33353,7 +33423,7 @@
 	    super.init(), this.defaultRenderMap.set(this.lineRender.numberType, this.lineRender), this.defaultRenderMap.set(this.areaRender.numberType, this.areaRender);
 	  }
 	  draw(renderService, drawContext) {
-	    return __awaiter$9(this, void 0, void 0, function* () {
+	    return __awaiter$8(this, void 0, void 0, function* () {
 	      if (this.checkingForDrawPromise) return;
 	      this.lastRenderService = renderService, this.lastDrawContext = drawContext, this.checkingForDrawPromise = this.checkForDraw(drawContext);
 	      const skipDraw = yield this.checkingForDrawPromise;
@@ -33375,15 +33445,15 @@
 	    });
 	  }
 	  _increaseRender(group, drawContext) {
-	    return __awaiter$9(this, void 0, void 0, function* () {
+	    return __awaiter$8(this, void 0, void 0, function* () {
 	      this.rendering = !0, yield this._renderIncrementalGroup(group, drawContext);
 	    });
 	  }
 	  _renderIncrementalGroup(group, drawContext) {
-	    return __awaiter$9(this, void 0, void 0, function* () {
+	    return __awaiter$8(this, void 0, void 0, function* () {
 	      this.count = group.count, yield new Promise(resolve => {
 	        this.renderItem(group, drawContext, {
-	          drawingCb: () => __awaiter$9(this, void 0, void 0, function* () {
+	          drawingCb: () => __awaiter$8(this, void 0, void 0, function* () {
 	            if (2 !== group.count) yield foreachAsync(group, DefaultAttribute.zIndex, (item, i) => {
 	              if (this.status === STATUS.STOP) return !0;
 	              if (item.isContainer) return !1;
@@ -33404,7 +33474,7 @@
 	    });
 	  }
 	  waitToNextFrame() {
-	    return __awaiter$9(this, void 0, void 0, function* () {
+	    return __awaiter$8(this, void 0, void 0, function* () {
 	      return new Promise(resolve => {
 	        this.global.getRequestAnimationFrame()(() => {
 	          resolve(!1);
@@ -33413,13 +33483,13 @@
 	    });
 	  }
 	  checkForDraw(drawContext) {
-	    return __awaiter$9(this, void 0, void 0, function* () {
+	    return __awaiter$8(this, void 0, void 0, function* () {
 	      let skip = this.rendering;
 	      return drawContext.restartIncremental && (skip = !1, yield this.forceStop(), this.resetToInit()), skip;
 	    });
 	  }
 	  forceStop() {
-	    return __awaiter$9(this, void 0, void 0, function* () {
+	    return __awaiter$8(this, void 0, void 0, function* () {
 	      this.rendering && (this.status = STATUS.STOP, yield new Promise(resolve => {
 	        this.hooks.completeDraw.tap("stopCb", () => {
 	          this.status = STATUS.NORMAL, this.hooks.completeDraw.taps = this.hooks.completeDraw.taps.filter(item => "stopCb" !== item.name), resolve(!1);
@@ -33431,11 +33501,11 @@
 	    this.currFrameStartAt = 0, this.currentIdx = 0;
 	  }
 	  renderGroup(group, drawContext) {
-	    return __awaiter$9(this, void 0, void 0, function* () {
+	    return __awaiter$8(this, void 0, void 0, function* () {
 	      if (!drawContext.break && !1 !== group.attribute.visibleAll) return group.incremental && drawContext.startAtId === group._uid ? (yield this._increaseRender(group, drawContext), void (drawContext.break = !0)) : void (yield new Promise(resolve => {
 	        this.renderItem(group, drawContext, {
-	          drawingCb: () => __awaiter$9(this, void 0, void 0, function* () {
-	            yield foreachAsync(group, DefaultAttribute.zIndex, item => __awaiter$9(this, void 0, void 0, function* () {
+	          drawingCb: () => __awaiter$8(this, void 0, void 0, function* () {
+	            yield foreachAsync(group, DefaultAttribute.zIndex, item => __awaiter$8(this, void 0, void 0, function* () {
 	              drawContext.break || item.isContainer && (yield this.renderGroup(item, drawContext));
 	            })), resolve(!1);
 	          })
@@ -36105,7 +36175,7 @@
 	    }
 	};
 
-	const fontSize$6 = THEME_CONSTANTS.LABEL_FONT_SIZE;
+	const fontSize$7 = THEME_CONSTANTS.LABEL_FONT_SIZE;
 	const funnel$1 = {
 	    transform: {
 	        style: {
@@ -36114,7 +36184,7 @@
 	    },
 	    label: {
 	        style: {
-	            fontSize: fontSize$6,
+	            fontSize: fontSize$7,
 	            fill: 'white',
 	            textBaseline: 'middle',
 	            lineWidth: 2
@@ -36122,7 +36192,7 @@
 	    },
 	    outerLabel: {
 	        style: {
-	            fontSize: fontSize$6,
+	            fontSize: fontSize$7,
 	            fill: '#707070'
 	        },
 	        line: {
@@ -36133,14 +36203,14 @@
 	    },
 	    transformLabel: {
 	        style: {
-	            fontSize: fontSize$6,
+	            fontSize: fontSize$7,
 	            fill: '#707070',
 	            textBaseline: 'middle'
 	        }
 	    }
 	};
 
-	const fontSize$5 = THEME_CONSTANTS.LABEL_FONT_SIZE;
+	const fontSize$6 = THEME_CONSTANTS.LABEL_FONT_SIZE;
 	const funnel3d = {
 	    transform3d: {
 	        style: {
@@ -36149,7 +36219,7 @@
 	    },
 	    label: {
 	        style: {
-	            fontSize: fontSize$5,
+	            fontSize: fontSize$6,
 	            fill: 'white',
 	            textBaseline: 'middle',
 	            lineWidth: 2
@@ -36157,7 +36227,7 @@
 	    },
 	    outerLabel: {
 	        style: {
-	            fontSize: fontSize$5,
+	            fontSize: fontSize$6,
 	            fill: '#707070'
 	        },
 	        line: {
@@ -36168,7 +36238,7 @@
 	    },
 	    transformLabel: {
 	        style: {
-	            fontSize: fontSize$5,
+	            fontSize: fontSize$6,
 	            fill: '#707070',
 	            textBaseline: 'middle'
 	        }
@@ -36350,7 +36420,7 @@
 	    }
 	};
 
-	const fontSize$4 = THEME_CONSTANTS.LABEL_FONT_SIZE;
+	const fontSize$5 = THEME_CONSTANTS.LABEL_FONT_SIZE;
 	const waterfall$1 = {
 	    seriesFieldName: {
 	        total: 'total',
@@ -36369,7 +36439,7 @@
 	        position: 'withChange',
 	        style: {
 	            fill: 'black',
-	            fontSize: fontSize$4
+	            fontSize: fontSize$5
 	        }
 	    },
 	    label: {
@@ -36377,7 +36447,7 @@
 	        offset: 12,
 	        position: 'inside',
 	        style: {
-	            fontSize: fontSize$4
+	            fontSize: fontSize$5
 	        }
 	    }
 	};
@@ -36402,7 +36472,7 @@
 	    }
 	};
 
-	const fontSize$3 = THEME_CONSTANTS.LABEL_FONT_SIZE;
+	const fontSize$4 = THEME_CONSTANTS.LABEL_FONT_SIZE;
 	const treemap$1 = {
 	    gapWidth: 1,
 	    nodePadding: [5],
@@ -36414,19 +36484,19 @@
 	    },
 	    label: {
 	        style: {
-	            fontSize: fontSize$3,
+	            fontSize: fontSize$4,
 	            fill: 'white',
 	            textBaseline: 'middle',
 	            textAlign: 'center'
 	        }
 	    },
 	    nonLeafLabel: {
-	        padding: fontSize$3 * 2,
+	        padding: fontSize$4 * 2,
 	        style: {
 	            fill: 'black',
 	            stroke: 'white',
 	            lineWidth: 2,
-	            fontSize: fontSize$3,
+	            fontSize: fontSize$4,
 	            textBaseline: 'middle',
 	            textAlign: 'center'
 	        }
@@ -36947,6 +37017,7 @@
 	const DefaultMorph = !0;
 	const DefaultMorphAll = !1;
 	const DefaultSplitPath = null;
+	const DefaultEnableExitAnimation = !0;
 	const ImmediateAnimationState = "VGRAMMAR_IMMEDIATE_ANIMATION";
 	const DefaultAnimationStartTime = 0;
 	const DefaultAnimationDuration = 1e3;
@@ -38005,11 +38076,12 @@
 	class Element {
 	  constructor(mark) {
 	    this.data = null, this.states = [], this.diffState = DiffState.enter, this.isReserved = !1, this.runtimeStatesEncoder = null, this.items = [], this.getStateAttrs = (stateName, nextStates) => {
-	      var _a, _b, _c, _d;
-	      const encoder = null !== (_b = null === (_a = this.runtimeStatesEncoder) || void 0 === _a ? void 0 : _a[stateName]) && void 0 !== _b ? _b : null === (_c = this.mark.getSpec().encode) || void 0 === _c ? void 0 : _c[stateName];
+	      var _a, _b, _c;
+	      const isRuntimeState = !isNil(null === (_a = this.runtimeStatesEncoder) || void 0 === _a ? void 0 : _a[stateName]),
+	        encoder = isRuntimeState ? this.runtimeStatesEncoder[stateName] : null === (_b = this.mark.getSpec().encode) || void 0 === _b ? void 0 : _b[stateName];
 	      if (!encoder) return {};
 	      if (isFunction(encoder)) return encoder(this.getDatum(), this, stateName, nextStates);
-	      if (null === (_d = this.graphicItem.states) || void 0 === _d ? void 0 : _d[stateName]) return this.graphicItem.states[stateName];
+	      if (!isRuntimeState && (null === (_c = this.graphicItem.states) || void 0 === _c ? void 0 : _c[stateName])) return this.graphicItem.states[stateName];
 	      const stateItems = this.items.map(item => Object.assign({}, item, {
 	        nextAttrs: {}
 	      }));
@@ -38110,7 +38182,7 @@
 	  clearStates(hasAnimation) {
 	    var _a;
 	    const stateAnimation = isBoolean(hasAnimation) ? hasAnimation : !!(null === (_a = this.mark.getSpec().animation) || void 0 === _a ? void 0 : _a.state);
-	    this.states = [], this.graphicItem && this.graphicItem.clearStates(stateAnimation);
+	    this.states = [], this.graphicItem && this.graphicItem.clearStates(stateAnimation), this.runtimeStatesEncoder && (this.runtimeStatesEncoder = {});
 	  }
 	  _updateRuntimeStates(state, attrs) {
 	    this.runtimeStatesEncoder || (this.runtimeStatesEncoder = {}), this.runtimeStatesEncoder[state] = attrs;
@@ -38119,13 +38191,17 @@
 	    return this.states && this.states.includes(state);
 	  }
 	  addState(state, attrs) {
-	    const nextStates = array(state).reduce((nextStates, state) => (nextStates.includes(state) || nextStates.push(state), nextStates), this.states.slice());
-	    nextStates.length !== this.states.length && (attrs && isString(state) && this._updateRuntimeStates(state, attrs), this.useStates(nextStates));
+	    var _a;
+	    const nextStates = array(state).reduce((nextStates, state) => (nextStates.includes(state) || nextStates.push(state), nextStates), this.states.slice()),
+	      isRuntimeStateUpdate = attrs && isString(state) && !isEqual$1(attrs, null === (_a = this.runtimeStatesEncoder) || void 0 === _a ? void 0 : _a[state]);
+	    isRuntimeStateUpdate && this._updateRuntimeStates(state, attrs), nextStates.length !== this.states.length ? this.useStates(nextStates) : isRuntimeStateUpdate && this.graphicItem && (this.graphicItem.clearStates(), this.useStates(nextStates));
 	  }
 	  removeState(state) {
 	    const states = array(state),
 	      nextStates = this.states.filter(state => !states.includes(state));
-	    nextStates.length !== this.states.length && this.useStates(nextStates);
+	    nextStates.length !== this.states.length && (this.runtimeStatesEncoder && states.forEach(state => {
+	      this.runtimeStatesEncoder[state] = null;
+	    }), this.useStates(nextStates));
 	  }
 	  useStates(states, hasAnimation) {
 	    var _a, _b;
@@ -40421,7 +40497,7 @@
 	  return res[key] = parseOptionValue(option, params), res;
 	}, {}) : options.map(option => parseOptionValue(option, params)) : options;
 
-	var __awaiter$8 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+	var __awaiter$7 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
 	  return new (P || (P = Promise))(function (resolve, reject) {
 	    function fulfilled(value) {
 	      try {
@@ -40485,7 +40561,7 @@
 	    return super.emit(event, ...args);
 	  }
 	  evaluateTransform(transforms, upstream, parameters) {
-	    return __awaiter$8(this, void 0, void 0, function* () {
+	    return __awaiter$7(this, void 0, void 0, function* () {
 	      if (!transforms || !transforms.length) return upstream;
 	      let currentUpstreamData = upstream,
 	        i = 0;
@@ -40674,12 +40750,13 @@
 	class GlyphElement extends Element {
 	  constructor(mark) {
 	    super(mark), this.getStateAttrs = (stateName, nextStates) => {
-	      var _a, _b, _c, _d;
-	      const encoder = null !== (_b = null === (_a = this.runtimeStatesEncoder) || void 0 === _a ? void 0 : _a[stateName]) && void 0 !== _b ? _b : null === (_c = this.mark.getSpec().encode) || void 0 === _c ? void 0 : _c[stateName],
+	      var _a, _b, _c;
+	      const isRuntimeState = !isNil(null === (_a = this.runtimeStatesEncoder) || void 0 === _a ? void 0 : _a[stateName]),
+	        encoder = isRuntimeState ? this.runtimeStatesEncoder[stateName] : null === (_b = this.mark.getSpec().encode) || void 0 === _b ? void 0 : _b[stateName],
 	        glyphStateAttributes = {};
 	      if (!encoder) return glyphStateAttributes;
 	      if (isFunction(encoder)) return glyphStateAttributes.attributes = encoder(this.getDatum(), this, stateName, nextStates), glyphStateAttributes;
-	      if (null === (_d = this.graphicItem.glyphStates) || void 0 === _d ? void 0 : _d[stateName]) return this.graphicItem.glyphStates[stateName];
+	      if (!isRuntimeState && (null === (_c = this.graphicItem.glyphStates) || void 0 === _c ? void 0 : _c[stateName])) return this.graphicItem.glyphStates[stateName];
 	      if (encoder) {
 	        const item = this.items[0],
 	          targetItems = [Object.assign({}, item, {
@@ -40954,7 +41031,7 @@
 	  return event.element = item, event.vGrammarType = type, event;
 	}
 
-	var __awaiter$7 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+	var __awaiter$6 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
 	  return new (P || (P = Promise))(function (resolve, reject) {
 	    function fulfilled(value) {
 	      try {
@@ -41054,7 +41131,7 @@
 	  }
 	  evaluate(data, parameters) {
 	    var _a;
-	    return __awaiter$7(this, void 0, void 0, function* () {
+	    return __awaiter$6(this, void 0, void 0, function* () {
 	      return this.evaluateMainTasks(data, parameters), (null === (_a = this.renderContext) || void 0 === _a ? void 0 : _a.progressive) || (yield this.evaluateTransform(this._getTransformsAfterEncode(), this.elements, parameters)), this;
 	    });
 	  }
@@ -42101,10 +42178,10 @@
 	      lineWidth = null !== (_e = backgroundStyle.lineWidth) && void 0 !== _e ? _e : 1,
 	      range = this.stage ? [this.stage.width, this.stage.height] : void 0,
 	      layout = "auto" === position;
-	    let minifyBBoxI,
-	      minifyBBoxSize = 1 / 0;
+	    let maxBBoxI,
+	      maxBBoxSize = -1 / 0;
 	    for (let i = 0; i < this.positionList.length + 1; i++) {
-	      const p = layout ? this.positionList[i === this.positionList.length ? minifyBBoxI : i] : position,
+	      const p = layout ? this.positionList[i === this.positionList.length ? maxBBoxI : i] : position,
 	        {
 	          angle: angle,
 	          offset: offset,
@@ -42148,7 +42225,7 @@
 	        {
 	          const bbox = getRectIntersect(b, stageBounds, !1),
 	            size = (bbox.x2 - bbox.x1) * (bbox.y2 - bbox.y1);
-	          size < minifyBBoxSize && (minifyBBoxSize = size, minifyBBoxI = i);
+	          size > maxBBoxSize && (maxBBoxSize = size, maxBBoxI = i);
 	        }
 	      }
 	    }
@@ -42864,7 +42941,7 @@
 	  setBitmapTool(bmpTool) {
 	    this._bmpTool = bmpTool;
 	  }
-	  layoutArcLabels(position, attribute, currentMarks, data, textBoundsArray) {
+	  layoutArcLabels(position, attribute, currentMarks, data, textBoundsArray, ellipsisWidth) {
 	    return [];
 	  }
 	  render() {
@@ -42918,7 +42995,6 @@
 	  }
 	  layout() {
 	    let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-	    var _a;
 	    const {
 	        textStyle = {},
 	        position: position,
@@ -42943,15 +43019,23 @@
 	      textLocation && (labelAttribute.x = textLocation.x, labelAttribute.y = textLocation.y, text.setAttributes(textLocation), labels.push(text));
 	    }
 	    if ("arc" === this.attribute.type) {
-	      const arcs = this.layoutArcLabels(position, this.attribute, Array.from(this._idToGraphic.values()), data, textBoundsArray);
+	      const ellipsisLabelAttribute = Object.assign(Object.assign({}, this.attribute.textStyle), {
+	          text: "..."
+	        }),
+	        ellipsisText = this._createLabelText(ellipsisLabelAttribute),
+	        ellipsisTextBounds = this.getGraphicBounds(ellipsisText),
+	        ellipsisWidth = ellipsisTextBounds.x2 - ellipsisTextBounds.x1,
+	        arcs = this.layoutArcLabels(position, this.attribute, Array.from(this._idToGraphic.values()), data, textBoundsArray, ellipsisWidth);
 	      for (let i = 0; i < data.length; i++) {
 	        const textData = data[i],
-	          basedArc = arcs.find(arc => arc.labelText === textData.text),
+	          basedArc = arcs.find(arc => arc.refDatum.id === textData.id),
 	          labelAttribute = {
+	            visible: basedArc.labelVisible,
 	            x: basedArc.labelPosition.x,
 	            y: basedArc.labelPosition.y,
-	            angle: null !== (_a = this.attribute.angle) && void 0 !== _a ? _a : basedArc.angle,
-	            labelLinePath: basedArc.labelLinePath
+	            angle: basedArc.angle,
+	            maxLineWidth: basedArc.labelLimit,
+	            points: (null == basedArc ? void 0 : basedArc.pointA) && (null == basedArc ? void 0 : basedArc.pointB) && (null == basedArc ? void 0 : basedArc.pointC) ? [basedArc.pointA, basedArc.pointB, basedArc.pointC] : void 0
 	          };
 	        labels[i].setAttributes(labelAttribute);
 	      }
@@ -43000,24 +43084,6 @@
 	          continue;
 	        }
 	      }
-	      if (clampForce) {
-	        const {
-	          dx = 0,
-	          dy = 0
-	        } = clampText(text, bmpTool.width, bmpTool.height);
-	        if ((0 !== dx || 0 !== dy) && canPlace(bmpTool, bitmap, {
-	          x1: text.AABBBounds.x1 + dx,
-	          x2: text.AABBBounds.x2 + dx,
-	          y1: text.AABBBounds.y1 + dy,
-	          y2: text.AABBBounds.y2 + dy
-	        })) {
-	          text.setAttributes({
-	            x: text.attribute.x + dx,
-	            y: text.attribute.y + dy
-	          }), result.push(text);
-	          continue;
-	        }
-	      }
 	      let hasPlace = !1;
 	      for (let j = 0; j < strategy.length; j++) if (hasPlace = place$2(bmpTool, bitmap, strategy[j], this.attribute, text, this.getGraphicBounds(baseMark, labels[i]), this.labeling), !1 !== hasPlace) {
 	        text.setAttributes({
@@ -43075,12 +43141,12 @@
 	      prevTextMap = this._graphicToText || new Map(),
 	      texts = [];
 	    labels.forEach((text, index) => {
-	      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-	      const labelLine = (null === (_a = text.attribute) || void 0 === _a ? void 0 : _a.labelLinePath) ? createPath({
+	      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+	      const labelLine = (null === (_a = text.attribute) || void 0 === _a ? void 0 : _a.points) ? createLine({
 	          visible: null === (_c = null === (_b = text.attribute) || void 0 === _b ? void 0 : _b.visible) || void 0 === _c || _c,
 	          stroke: null !== (_f = null === (_e = null === (_d = text.attribute) || void 0 === _d ? void 0 : _d.line) || void 0 === _e ? void 0 : _e.stroke) && void 0 !== _f ? _f : null === (_g = text.attribute) || void 0 === _g ? void 0 : _g.fill,
-	          lineWidth: 1,
-	          path: null === (_h = text.attribute) || void 0 === _h ? void 0 : _h.labelLinePath
+	          lineWidth: null !== (_k = null === (_j = null === (_h = text.attribute) || void 0 === _h ? void 0 : _h.line) || void 0 === _j ? void 0 : _j.lineWidth) && void 0 !== _k ? _k : 1,
+	          points: null === (_l = text.attribute) || void 0 === _l ? void 0 : _l.points
 	        }) : void 0,
 	        relatedGraphic = this._idToGraphic.get(text.attribute.id),
 	        state = (null == prevTextMap ? void 0 : prevTextMap.get(relatedGraphic)) ? "update" : "enter";
@@ -43109,11 +43175,11 @@
 	      if ("update" === state) {
 	        const prevLabel = prevTextMap.get(relatedGraphic);
 	        if (prevTextMap.delete(relatedGraphic), currentTextMap.set(relatedGraphic, prevLabel), disableAnimation) prevLabel.text.setAttributes(text.attribute), (null == prevLabel ? void 0 : prevLabel.labelLine) && prevLabel.labelLine.setAttributes({
-	          path: null === (_k = text.attribute) || void 0 === _k ? void 0 : _k.labelLinePath
+	          points: null === (_o = text.attribute) || void 0 === _o ? void 0 : _o.points
 	        });else {
 	          const prevText = prevLabel.text;
 	          prevText.animate().to(text.attribute, duration, easing), prevLabel.labelLine && prevLabel.labelLine.animate().to(merge$2({}, prevLabel.labelLine.attribute, {
-	            path: null === (_j = text.attribute) || void 0 === _j ? void 0 : _j.labelLinePath
+	            points: null === (_m = text.attribute) || void 0 === _m ? void 0 : _m.points
 	          }), duration, easing), !1 !== animationConfig.increaseEffect && prevText.attribute.text !== text.attribute.text && isValidNumber(Number(prevText.attribute.text) * Number(text.attribute.text)) && prevText.animate().play(new IncreaseCount({
 	            text: prevText.attribute.text
 	          }, {
@@ -43169,33 +43235,77 @@
 	    return listener;
 	  }
 	  _smartInvert(labels) {
+	    var _a, _b, _c, _d;
 	    const option = this.attribute.smartInvert || {},
 	      {
 	        textType: textType,
 	        contrastRatiosThreshold: contrastRatiosThreshold,
 	        alternativeColors: alternativeColors
-	      } = option;
-	    for (let i = 0; i < labels.length; i++) {
+	      } = option,
+	      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";
+	    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);
 	      let isInside = canPlaceInside(label.AABBBounds, null == baseMark ? void 0 : baseMark.AABBBounds);
-	      if ("arc" === this.attribute.type && (isInside = "inside" === this.attribute.position), label.attribute.stroke && label.attribute.lineWidth > 0) label.setAttributes({
-	        fill: labelSmartInvert(label.attribute.fill, label.attribute.stroke, textType, contrastRatiosThreshold, alternativeColors)
-	      });else if (isInside) {
-	        const backgroundColor = baseMark.attribute.fill,
-	          foregroundColor = label.attribute.fill;
+	      "arc" === this.attribute.type && (isInside = "inside" === this.attribute.position);
+	      const backgroundColor = baseMark.attribute.fill,
+	        foregroundColor = label.attribute.fill,
+	        baseColor = backgroundColor,
+	        invertColor = labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors),
+	        simialrColor = contrastAccessibilityChecker(invertColor, brightColor) ? brightColor : darkColor;
+	      if (isInside) {
+	        if (this.setFillStrategy(fillStrategy, label, baseColor, invertColor, simialrColor), 0 === label.attribute.lineWidth) continue;
+	        this.setStrokeStrategy(strokeStrategy, label, baseColor, invertColor, simialrColor);
+	      } 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;
+	        }
+	        this.setFillStrategy(fillStrategy, label, baseColor, invertColor, simialrColor), this.setStrokeStrategy(strokeStrategy, label, baseColor, invertColor, simialrColor);
+	      }
+	    }
+	  }
+	  setFillStrategy(fillStrategy, label, baseColor, invertColor, simialrColor) {
+	    switch (fillStrategy) {
+	      case "base":
 	        label.setAttributes({
-	          fill: labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors)
+	          fill: baseColor
 	        });
-	      } else if (label.attribute.lineWidth > 0) {
-	        const backgroundColor = label.attribute.stroke,
-	          foregroundColor = label.attribute.fill;
+	        break;
+	      case "invertBase":
 	        label.setAttributes({
-	          stroke: baseMark.attribute.fill,
-	          fill: labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors)
+	          fill: invertColor
+	        });
+	        break;
+	      case "similarBase":
+	        label.setAttributes({
+	          fill: simialrColor
+	        });
+	    }
+	  }
+	  setStrokeStrategy(strokeStrategy, label, baseColor, invertColor, simialrColor) {
+	    switch (strokeStrategy) {
+	      case "base":
+	        label.setAttributes({
+	          stroke: baseColor
+	        });
+	        break;
+	      case "invertBase":
+	        label.setAttributes({
+	          stroke: invertColor
+	        });
+	        break;
+	      case "similarBase":
+	        label.setAttributes({
+	          stroke: simialrColor
 	        });
-	      }
 	    }
 	  }
 	  setLocation(point) {
@@ -43477,17 +43587,19 @@
 	      y: 0
 	    };
 	  }
-	  layoutArcLabels(position, attribute, currentMarks, data, textBoundsArray) {
-	    this._arcLeft.clear(), this._arcRight.clear();
+	  layoutArcLabels(position, attribute, currentMarks, data, textBoundsArray, ellipsisWidth) {
+	    var _a;
+	    this._arcLeft.clear(), this._arcRight.clear(), this._ellipsisWidth = ellipsisWidth;
 	    const {
-	      width: width,
-	      height: height
-	    } = attribute;
+	        width: width,
+	        height: height
+	      } = attribute,
+	      centerOffset = null !== (_a = null == attribute ? void 0 : attribute.centerOffset) && void 0 !== _a ? _a : 0;
 	    currentMarks.forEach((currentMark, index) => {
 	      var _a, _b;
 	      const graphicAttribute = currentMark.attribute,
 	        radiusRatio = this.computeLayoutOuterRadius(graphicAttribute.outerRadius, width, height),
-	        radius = this.computeRadius(radiusRatio, width, height),
+	        radius = this.computeRadius(radiusRatio, width, height, centerOffset),
 	        center = {
 	          x: null !== (_a = null == graphicAttribute ? void 0 : graphicAttribute.x) && void 0 !== _a ? _a : 0,
 	          y: null !== (_b = null == graphicAttribute ? void 0 : graphicAttribute.y) && void 0 !== _b ? _b : 0
@@ -43500,7 +43612,7 @@
 	        arcMiddle = circlePoint(center.x, center.y, graphicAttribute.outerRadius, arcMiddleAngle),
 	        outerArcMiddle = circlePoint(center.x, center.y, radius + attribute.line.line1MinLength, arcMiddleAngle),
 	        arc = new ArcInfo$1(item, arcMiddle, outerArcMiddle, arcQuadrant, intervalAngle, arcMiddleAngle);
-	      arc.pointA = circlePoint(center.x, center.y, this.computeDatumRadius(2 * center.x, 2 * center.y, graphicAttribute.outerRadius), arc.middleAngle), arc.labelSize = {
+	      arc.pointA = circlePoint(center.x, center.y, this.computeDatumRadius(2 * center.x, 2 * center.y, graphicAttribute.outerRadius, centerOffset), arc.middleAngle), arc.labelSize = {
 	        width: textBounds.x2 - textBounds.x1,
 	        height: textBounds.y2 - textBounds.y1
 	      }, isQuadrantRight(arc.quadrant) ? this._arcRight.set(arc.refDatum, arc) : isQuadrantLeft(arc.quadrant) && this._arcLeft.set(arc.refDatum, arc);
@@ -43511,22 +43623,24 @@
 	    return "inside" === position ? (arcs.push(...this._layoutInsideLabels(rightArcs, attribute, currentMarks)), arcs.push(...this._layoutInsideLabels(leftArcs, attribute, currentMarks))) : (arcs.push(...this._layoutOutsideLabels(rightArcs, attribute, currentMarks)), arcs.push(...this._layoutOutsideLabels(leftArcs, attribute, currentMarks))), arcs;
 	  }
 	  _layoutInsideLabels(arcs, attribute, currentMarks) {
-	    var _a, _b, _c, _d;
+	    var _a, _b, _c, _d, _e;
 	    const center = {
 	        x: null !== (_b = null === (_a = currentMarks[0].attribute) || void 0 === _a ? void 0 : _a.x) && void 0 !== _b ? _b : 0,
 	        y: null !== (_d = null === (_c = currentMarks[0].attribute) || void 0 === _c ? void 0 : _c.y) && void 0 !== _d ? _d : 0
 	      },
+	      centerOffset = null !== (_e = null == attribute ? void 0 : attribute.centerOffset) && void 0 !== _e ? _e : 0,
 	      innerRadiusRatio = this.computeLayoutOuterRadius(currentMarks[0].attribute.innerRadius, attribute.width, attribute.height),
 	      outerRadiusRatio = this.computeLayoutOuterRadius(currentMarks[0].attribute.outerRadius, attribute.width, attribute.height),
 	      labelConfig = attribute,
 	      spaceWidth = labelConfig.spaceWidth;
 	    return arcs.forEach(arc => {
+	      var _a, _b;
 	      const {
 	          labelSize: labelSize,
 	          radian: radian
 	        } = arc,
-	        innerRadius = this.computeRadius(innerRadiusRatio, attribute.width, attribute.height, 1),
-	        outerRadius = this.computeRadius(outerRadiusRatio, attribute.width, attribute.height, 1);
+	        innerRadius = this.computeRadius(innerRadiusRatio, attribute.width, attribute.height, centerOffset, 1),
+	        outerRadius = this.computeRadius(outerRadiusRatio, attribute.width, attribute.height, centerOffset, 1);
 	      let limit;
 	      if (radian < connectLineRadian(outerRadius, labelSize.height)) limit = 0;else {
 	        let minRadius;
@@ -43538,7 +43652,7 @@
 	      const labelWidth = Math.min(limit, arc.labelSize.width),
 	        align = this._computeAlign(arc, attribute),
 	        labelRadius = outerRadius - spaceWidth - ("left" === align ? labelWidth : "right" === align ? 0 : labelWidth / 2);
-	      arc.labelPosition = circlePoint(center.x, center.y, labelRadius, arc.middleAngle), arc.labelLimit = labelWidth, isGreater(labelWidth, 0) || (arc.labelVisible = !1), arc.angle = arc.middleAngle;
+	      arc.labelPosition = circlePoint(center.x, center.y, labelRadius, arc.middleAngle), arc.labelLimit = labelWidth, isGreater(labelWidth, 0) || (arc.labelVisible = !1), arc.angle = null !== (_b = null === (_a = null == attribute ? void 0 : attribute.textStyle) || void 0 === _a ? void 0 : _a.angle) && void 0 !== _b ? _b : arc.middleAngle;
 	    }), arcs;
 	  }
 	  _layoutOutsideLabels(arcs, attribute, currentMarks) {
@@ -43591,28 +43705,30 @@
 	    }
 	    const width = 2 * center_x;
 	    return arcs.forEach(arc => {
-	      arc.labelVisible && (isLess(arc.pointB.x, line2MinLength + spaceWidth) || isGreater(arc.pointB.x, width - line2MinLength - spaceWidth)) && (arc.labelVisible = !1), arc.angle = 0, arc.labelLinePath = `M${Math.round(arc.pointA.x)},${Math.round(arc.pointA.y)} L${Math.round(arc.pointB.x)},${Math.round(arc.pointB.y)} L${Math.round(arc.pointC.x)},${Math.round(arc.pointC.y)}`;
+	      var _a, _b;
+	      arc.labelVisible && (isLess(arc.pointB.x, line2MinLength + spaceWidth) || isGreater(arc.pointB.x, width - line2MinLength - spaceWidth)) && (arc.labelVisible = !1), arc.angle = null !== (_b = null === (_a = null == attribute ? void 0 : attribute.textStyle) || void 0 === _a ? void 0 : _a.angle) && void 0 !== _b ? _b : 0;
 	    }), arcs;
 	  }
 	  _computeX(arc, attribute, currentMarks) {
-	    var _a, _b, _c, _e;
+	    var _a, _b, _c, _e, _f;
 	    const center_x = null !== (_b = null === (_a = currentMarks[0].attribute) || void 0 === _a ? void 0 : _a.x) && void 0 !== _b ? _b : 0,
+	      centerOffset = (null === (_c = currentMarks[0].attribute) || void 0 === _c ? void 0 : _c.y, null !== (_e = null == attribute ? void 0 : attribute.centerOffset) && void 0 !== _e ? _e : 0),
 	      plotLayout_width = 2 * center_x,
-	      radiusRatio = (null === (_c = currentMarks[0].attribute) || void 0 === _c ? void 0 : _c.y, this.computeLayoutOuterRadius(currentMarks[0].attribute.outerRadius, attribute.width, attribute.height)),
+	      radiusRatio = this.computeLayoutOuterRadius(currentMarks[0].attribute.outerRadius, attribute.width, attribute.height),
 	      line1MinLength = attribute.line.line1MinLength,
 	      line2MinLength = attribute.line.line2MinLength,
-	      labelLayoutAlign = null === (_e = attribute.layout) || void 0 === _e ? void 0 : _e.align,
+	      labelLayoutAlign = null === (_f = attribute.layout) || void 0 === _f ? void 0 : _f.align,
 	      spaceWidth = attribute.spaceWidth,
 	      {
 	        labelPosition: labelPosition,
 	        quadrant: quadrant,
 	        pointB: pointB
-	      } = (this._computeAlign(arc, attribute), arc);
+	      } = arc;
 	    isValidNumber(pointB.x * pointB.y) || (arc.pointC = {
 	      x: NaN,
 	      y: NaN
 	    }, labelPosition.x = NaN, arc.labelLimit = 0);
-	    const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height),
+	    const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height, centerOffset),
 	      flag = isQuadrantLeft(quadrant) ? -1 : 1;
 	    let cx = 0;
 	    let limit = (flag > 0 ? plotLayout_width - pointB.x : pointB.x) - line2MinLength - spaceWidth;
@@ -43629,17 +43745,18 @@
 	      default:
 	        cx = pointB.x + flag * line2MinLength;
 	    }
-	    if (labelWidth = Math.max(this._ellipsisWidth, labelWidth), arc.pointC = {
+	    labelWidth = Math.max(this._ellipsisWidth, labelWidth), arc.labelLimit = labelWidth, arc.pointC = {
 	      x: cx,
 	      y: labelPosition.y
-	    }, "edge" === labelLayoutAlign) {
+	    };
+	    const targetCenterOffset = .5 * (arc.labelLimit < arc.labelSize.width ? arc.labelLimit : arc.labelSize.width);
+	    if ("edge" === labelLayoutAlign) {
 	      const alignOffset = 0;
-	      labelPosition.x = flag > 0 ? plotLayout_width + alignOffset : alignOffset;
+	      labelPosition.x = (flag > 0 ? plotLayout_width + alignOffset : alignOffset) - flag * targetCenterOffset;
 	    } else {
 	      const alignOffset = 0;
-	      labelPosition.x = cx + alignOffset + flag * (spaceWidth + .5 * arc.labelSize.width);
+	      labelPosition.x = cx + alignOffset + flag * (spaceWidth + targetCenterOffset);
 	    }
-	    arc.labelLimit = labelWidth;
 	  }
 	  _computeAlignOffset(align, labelWidth, alignFlag) {
 	    switch (align) {
@@ -43763,7 +43880,7 @@
 	    return -1;
 	  }
 	  _computePointB(arc, r, attribute, currentMarks) {
-	    var _a, _b, _c, _d;
+	    var _a, _b, _c, _d, _e;
 	    const labelConfig = attribute,
 	      radiusRatio = this.computeLayoutOuterRadius(currentMarks[0].attribute.outerRadius, attribute.width, attribute.height),
 	      line1MinLength = labelConfig.line.line1MinLength;
@@ -43775,7 +43892,8 @@
 	          x: null !== (_b = null === (_a = currentMarks[0].attribute) || void 0 === _a ? void 0 : _a.x) && void 0 !== _b ? _b : 0,
 	          y: null !== (_d = null === (_c = currentMarks[0].attribute) || void 0 === _c ? void 0 : _c.y) && void 0 !== _d ? _d : 0
 	        },
-	        radius = this.computeRadius(radiusRatio, attribute.width, attribute.height),
+	        centerOffset = null !== (_e = null == attribute ? void 0 : attribute.centerOffset) && void 0 !== _e ? _e : 0,
+	        radius = this.computeRadius(radiusRatio, attribute.width, attribute.height, centerOffset),
 	        {
 	          labelPosition: labelPosition,
 	          quadrant: quadrant
@@ -43795,7 +43913,7 @@
 	    for (const arc of arcs) arc.labelVisible && (arc.lastLabelY = arc.labelPosition.y);
 	  }
 	  _computeYRange(arc, attribute, currentMarks) {
-	    var _a, _b, _c, _d;
+	    var _a, _b, _c, _d, _e;
 	    const plotRect = {
 	        width: 2 * (null !== (_b = null === (_a = currentMarks[0].attribute) || void 0 === _a ? void 0 : _a.x) && void 0 !== _b ? _b : 0),
 	        height: 2 * (null !== (_d = null === (_c = currentMarks[0].attribute) || void 0 === _c ? void 0 : _c.y) && void 0 !== _d ? _d : 0)
@@ -43806,7 +43924,8 @@
 	        width: width,
 	        height: height
 	      } = plotRect,
-	      radius = this.computeRadius(radiusRatio, attribute.width, attribute.height),
+	      centerOffset = null !== (_e = null == attribute ? void 0 : attribute.centerOffset) && void 0 !== _e ? _e : 0,
+	      radius = this.computeRadius(radiusRatio, attribute.width, attribute.height, centerOffset),
 	      r = this._computeLayoutRadius(height / 2, attribute, currentMarks),
 	      cx = Math.abs(arc.center.x - width / 2),
 	      cy = arc.center.y - height / 2;
@@ -43821,11 +43940,13 @@
 	    points[0].x > points[1].x && points.reverse(), points[0].x < 0 ? isNumberClose(points[0].y, points[1].y) ? Math.abs(arc.middleAngle) < Math.PI / 2 ? (min = 0, max = points[1].y + height / 2) : (min = points[1].y + height / 2, max = height) : points[0].y < points[1].y ? (min = 0, max = points[1].y + height / 2) : (min = points[1].y + height / 2, max = plotRect.height) : (min = Math.min(points[0].y, points[1].y) + height / 2, max = Math.max(points[0].y, points[1].y) + height / 2), arc.labelYRange = [min, max];
 	  }
 	  _computeLayoutRadius(halfYLength, attribute, currentMarks) {
+	    var _a;
 	    const labelConfig = attribute,
 	      layoutArcGap = labelConfig.layoutArcGap,
 	      line1MinLength = labelConfig.line.line1MinLength,
 	      radiusRatio = this.computeLayoutOuterRadius(currentMarks[0].attribute.outerRadius, attribute.width, attribute.height),
-	      outerR = this.computeRadius(radiusRatio, attribute.width, attribute.height) + line1MinLength,
+	      centerOffset = null !== (_a = null == attribute ? void 0 : attribute.centerOffset) && void 0 !== _a ? _a : 0,
+	      outerR = this.computeRadius(radiusRatio, attribute.width, attribute.height, centerOffset) + line1MinLength,
 	      a = outerR - layoutArcGap;
 	    return Math.max((a ** 2 + halfYLength ** 2) / (2 * a), outerR);
 	  }
@@ -43874,8 +43995,9 @@
 	      checkBoundsOverlap(lastBounds, bounds) ? arcs[i].labelVisible = !1 : lastBounds = bounds;
 	    }
 	  }
-	  computeRadius(r, width, height, k) {
-	    return this.computeLayoutRadius(width || 0, height || 0) * r * (isNil(k) ? 1 : k);
+	  computeRadius(r, width, height, centerOffset, k) {
+	    var _a;
+	    return null !== (_a = this.computeLayoutRadius(width || 0, height || 0) * r * (isNil(k) ? 1 : k) + centerOffset) && void 0 !== _a ? _a : 0;
 	  }
 	  computeLayoutRadius(width, height) {
 	    return Math.min(width / 2, height / 2);
@@ -43883,9 +44005,10 @@
 	  computeLayoutOuterRadius(r, width, height) {
 	    return r / (Math.min(width, height) / 2);
 	  }
-	  computeDatumRadius(width, height, outerRadius) {
+	  computeDatumRadius(width, height, outerRadius, centerOffset) {
+	    var _a;
 	    const outerRadiusRatio = this.computeLayoutOuterRadius(outerRadius, width, height);
-	    return this.computeLayoutRadius(width || 0, height || 0) * outerRadiusRatio;
+	    return null !== (_a = this.computeLayoutRadius(width || 0, height || 0) * outerRadiusRatio + centerOffset) && void 0 !== _a ? _a : 0;
 	  }
 	}
 	ArcLabel.defaultAttributes = {
@@ -43911,7 +44034,8 @@
 	    align: "arc",
 	    strategy: "priority",
 	    tangentConstraint: !0
-	  }
+	  },
+	  pickable: !1
 	};
 
 	const labelComponentMap = {
@@ -44610,10 +44734,9 @@
 	    let {
 	      style: textStyle
 	    } = tagAttributes;
-	    return textStyle = isFunction(textStyle) ? merge$2({}, DEFAULT_AXIS_THEME.label.style, textStyle(tickDatum, index, tickData, layer)) : textStyle, textStyle = merge$2({
-	      textAlign: this.getTextAlign(vector),
-	      textBaseline: this.getTextBaseline(vector, inside)
-	    }, textStyle), isFunction(textStyle.text) && (textStyle.text = textStyle.text({
+	    textStyle = isFunction(textStyle) ? merge$2({}, DEFAULT_AXIS_THEME.label.style, textStyle(tickDatum, index, tickData, layer)) : textStyle;
+	    const labelAlign = this.getLabelAlign(vector, inside, textStyle.angle);
+	    return textStyle = merge$2(labelAlign, textStyle), isFunction(textStyle.text) && (textStyle.text = textStyle.text({
 	      label: tickDatum.label,
 	      value: tickDatum.rawValue,
 	      index: tickDatum.index,
@@ -44741,37 +44864,49 @@
 	    bounds.x1 += deltaX, bounds.x2 += deltaX, bounds.y1 += deltaY, bounds.y2 += deltaY, bounds.centerX += deltaX, bounds.centerY += deltaY, item.rotatedBounds = bounds;
 	  });
 	}
+	function clampAngle() {
+	  let angle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+	  if (angle < 0) for (; angle < 0;) angle += 2 * Math.PI;
+	  if (angle > 0) for (; angle >= 2 * Math.PI;) angle -= 2 * Math.PI;
+	  return angle;
+	}
 	function rotateYAxis(orient, items) {
-	  let align = ["right", "right", "center", "left", "center", "left", "center", "right", "right"],
-	    baseline = ["middle", "middle", "top", "top", "middle", "middle", "bottom", "bottom", "middle"];
-	  "right" === orient && (align = ["left", "right", "right", "right", "left", "left", "left", "left", "right"], baseline = ["middle", "bottom", "middle", "top", "top", "top", "middle", "bottom", "bottom"]), items.forEach((item, i) => {
-	    let angle = item.attribute.angle || 0;
-	    if (angle < 0) for (; angle < 0;) angle += 2 * Math.PI;
-	    if (angle > 0) for (; angle >= 2 * Math.PI;) angle -= 2 * Math.PI;
-	    const step = angle / (.5 * Math.PI);
-	    let index;
-	    index = step === Math.floor(step) ? 2 * Math.floor(step) : 2 * Math.floor(step) + 1, item.setAttributes({
-	      textAlign: align[index],
-	      textBaseline: baseline[index],
-	      angle: angle
-	    });
+	  items.forEach((item, i) => {
+	    item.setAttributes(Object.assign(Object.assign({}, getYAxisLabelAlign(orient, item.attribute.angle)), {
+	      angle: clampAngle(item.attribute.angle)
+	    }));
 	  });
 	}
 	function rotateXAxis(orient, items) {
+	  items.forEach(item => {
+	    item.setAttributes(Object.assign(Object.assign({}, getXAxisLabelAlign(orient, item.attribute.angle)), {
+	      angle: clampAngle(item.attribute.angle)
+	    }));
+	  });
+	}
+	function getXAxisLabelAlign(orient) {
+	  let angle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
 	  let align = ["center", "left", "left", "left", "center", "right", "right", "right", "left"],
 	    baseline = ["top", "top", "middle", "bottom", "bottom", "bottom", "middle", "top", "top"];
-	  "top" === orient && (align = ["center", "right", "right", "right", "center", "left", "left", "left", "right"], baseline = ["bottom", "bottom", "middle", "top", "top", "top", "middle", "bottom", "bottom"]), items.forEach(item => {
-	    let angle = item.attribute.angle || 0;
-	    if (angle < 0) for (; angle < 0;) angle += 2 * Math.PI;
-	    if (angle > 0) for (; angle >= 2 * Math.PI;) angle -= 2 * Math.PI;
-	    const step = angle / (.5 * Math.PI);
-	    let index;
-	    index = step === Math.floor(step) ? 2 * Math.floor(step) : 2 * Math.floor(step) + 1, item.setAttributes({
-	      textAlign: align[index],
-	      textBaseline: baseline[index],
-	      angle: angle
-	    });
-	  });
+	  "top" === orient && (align = ["center", "right", "right", "right", "center", "left", "left", "left", "right"], baseline = ["bottom", "bottom", "middle", "top", "top", "top", "middle", "bottom", "bottom"]);
+	  const step = (angle = clampAngle(angle)) / (.5 * Math.PI);
+	  let index;
+	  return index = step === Math.floor(step) ? 2 * Math.floor(step) : 2 * Math.floor(step) + 1, {
+	    textAlign: align[index],
+	    textBaseline: baseline[index]
+	  };
+	}
+	function getYAxisLabelAlign(orient) {
+	  let angle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+	  let align = ["right", "right", "center", "left", "center", "left", "center", "right", "right"],
+	    baseline = ["middle", "middle", "top", "top", "middle", "middle", "bottom", "bottom", "middle"];
+	  "right" === orient && (align = ["left", "right", "right", "right", "left", "left", "left", "left", "right"], baseline = ["middle", "bottom", "middle", "top", "top", "top", "middle", "bottom", "bottom"]);
+	  const step = (angle = clampAngle(angle)) / (.5 * Math.PI);
+	  let index;
+	  return index = step === Math.floor(step) ? 2 * Math.floor(step) : 2 * Math.floor(step) + 1, {
+	    textAlign: align[index],
+	    textBaseline: baseline[index]
+	  };
 	}
 
 	function autoLimit(labels, config) {
@@ -45125,10 +45260,18 @@
 	      factor = (inside ? 1 : -1) * verticalFactor;
 	    return isNumberClose(vector[1], 0) ? base = !isNumberClose(vector[0], 0) || Object.is(vector[0], -0) || Object.is(vector[1], -0) ? "middle" : 1 === factor ? "bottom" : "top" : vector[1] > 0 ? base = "top" : vector[1] < 0 && (base = "bottom"), base;
 	  }
-	  beforeLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+	  getLabelAlign(vector, inside, angle) {
 	    const orient = this.attribute.orient;
-	    "left" === orient || "right" === orient ? rotateYAxis(orient, labelShapes) : "bottom" !== orient && "top" !== orient || rotateXAxis(orient, labelShapes);
+	    if (isValidNumber(angle)) {
+	      if ("top" === orient || "bottom" === orient) return getXAxisLabelAlign(orient, angle);
+	      if ("left" === orient || "right" === orient) return getYAxisLabelAlign(orient, angle);
+	    }
+	    return {
+	      textAlign: this.getTextAlign(vector),
+	      textBaseline: this.getTextBaseline(vector, inside)
+	    };
 	  }
+	  beforeLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {}
 	  handleLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
 	    if (isEmpty(labelShapes)) return;
 	    const {
@@ -45462,6 +45605,12 @@
 	  beforeLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {}
 	  handleLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {}
 	  afterLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {}
+	  getLabelAlign(vector, inside, angle) {
+	    return {
+	      textAlign: this.getTextAlign(vector),
+	      textBaseline: this.getTextBaseline(vector)
+	    };
+	  }
 	}
 	CircleAxis.defaultAttributes = DEFAULT_AXIS_THEME;
 
@@ -47206,10 +47355,18 @@
 	        }, null == valueAttr ? void 0 : valueAttr.style), {
 	          text: valueAttr.formatMethod ? valueAttr.formatMethod(value, item, index) : value
 	        }));
-	      this._appendDataToShape(valueShape, LEGEND_ELEMENT_NAME.itemValue, item, itemGroup, null == valueAttr ? void 0 : valueAttr.state), valueShape.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected), this._itemWidthByUser && (valueShape.setAttribute("maxLineWidth", this._itemWidthByUser - parsedPadding[1] - parsedPadding[3] - shapeSize - shapeSpace - labelShape.AABBBounds.width() - labelSpace - focusSpace - valueSpace), valueAttr.alignRight && valueShape.setAttributes({
-	        textAlign: "right",
-	        x: this._itemWidthByUser - shapeSize / 2 - parsedPadding[1] - parsedPadding[3] - focusSpace - valueSpace
-	      })), focusStartX = valueShape.AABBBounds.x2 + valueSpace, innerGroup.add(valueShape);
+	      if (this._appendDataToShape(valueShape, LEGEND_ELEMENT_NAME.itemValue, item, itemGroup, null == valueAttr ? void 0 : valueAttr.state), valueShape.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected), this._itemWidthByUser) {
+	        const layoutWidth = this._itemWidthByUser - parsedPadding[1] - parsedPadding[3] - shapeSize - shapeSpace - labelSpace - focusSpace - valueSpace,
+	          valueBounds = valueShape.AABBBounds,
+	          labelBounds = labelShape.AABBBounds,
+	          valueWidth = valueBounds.width(),
+	          labelWidth = labelBounds.width();
+	        labelWidth > layoutWidth ? (layoutWidth - valueWidth) / labelWidth > .4 ? labelShape.setAttribute("maxLineWidth", layoutWidth - valueWidth) : (valueShape.setAttribute("maxLineWidth", .5 * layoutWidth), labelShape.setAttribute("maxLineWidth", .5 * layoutWidth)) : valueShape.setAttribute("maxLineWidth", layoutWidth - labelWidth), valueAttr.alignRight && valueShape.setAttributes({
+	          textAlign: "right",
+	          x: this._itemWidthByUser - shapeSize / 2 - parsedPadding[1] - parsedPadding[3] - focusSpace - valueSpace
+	        });
+	      }
+	      focusStartX = valueShape.AABBBounds.x2 + valueSpace, innerGroup.add(valueShape);
 	    } else this._itemWidthByUser && labelShape.setAttribute("maxLineWidth", this._itemWidthByUser - parsedPadding[1] - parsedPadding[3] - shapeSize - shapeSpace - focusSpace);
 	    focusShape && (focusShape.setAttribute("x", focusStartX), innerGroup.add(focusShape));
 	    const innerGroupBounds = innerGroup.AABBBounds,
@@ -47487,6 +47644,7 @@
 	        min: min,
 	        max: max
 	      } = this.attribute;
+	      if (max === min) return;
 	      let currentPos,
 	        originPos,
 	        railLen,
@@ -47505,15 +47663,16 @@
 	    }, this._onTrackPointerMove = e => {
 	      e.stopPropagation();
 	      const {
-	          railWidth: railWidth,
-	          railHeight: railHeight,
-	          min: min,
-	          max: max
-	        } = this.attribute,
-	        {
-	          startHandler: startHandler,
-	          endHandler: endHandler
-	        } = this._getHandlers();
+	        railWidth: railWidth,
+	        railHeight: railHeight,
+	        min: min,
+	        max: max
+	      } = this.attribute;
+	      if (max === min) return;
+	      const {
+	        startHandler: startHandler,
+	        endHandler: endHandler
+	      } = this._getHandlers();
 	      let currentPos, trackLen, railLen;
 	      this._isHorizontal ? (currentPos = e.clientX, trackLen = this._track.attribute.width, railLen = railWidth) : (currentPos = e.clientY, trackLen = this._track.attribute.height, railLen = railHeight);
 	      const delta = currentPos - this._prePos;
@@ -47541,12 +47700,13 @@
 	    }, this._onRailPointerDown = e => {
 	      e.stopPropagation();
 	      const {
-	          railWidth: railWidth,
-	          railHeight: railHeight,
-	          min: min,
-	          max: max
-	        } = this.attribute,
-	        startHandler = this._startHandler,
+	        railWidth: railWidth,
+	        railHeight: railHeight,
+	        min: min,
+	        max: max
+	      } = this.attribute;
+	      if (max === min) return;
+	      const startHandler = this._startHandler,
 	        endHandler = this._endHandler;
 	      let currentPos, startHandlerPos, endHandlerPos, railLen;
 	      this._isHorizontal ? (currentPos = e.viewX - this._rail.globalAABBBounds.x1, startHandlerPos = null == startHandler ? void 0 : startHandler.attribute.x, endHandlerPos = null == endHandler ? void 0 : endHandler.attribute.x, railLen = railWidth) : (currentPos = e.viewY - this._rail.globalAABBBounds.y1, startHandlerPos = null == startHandler ? void 0 : startHandler.attribute.y, endHandlerPos = null == endHandler ? void 0 : endHandler.attribute.y, railLen = railHeight);
@@ -47559,14 +47719,15 @@
 	    };
 	  }
 	  setValue(value) {
+	    const {
+	      layout: layout,
+	      railWidth: railWidth,
+	      railHeight: railHeight,
+	      min: min,
+	      max: max
+	    } = this.attribute;
+	    if (max === min) return;
 	    const [startValue, endValue] = array(value),
-	      {
-	        layout: layout,
-	        railWidth: railWidth,
-	        railHeight: railHeight,
-	        min: min,
-	        max: max
-	      } = this.attribute,
 	      {
 	        startHandler: startHandler,
 	        endHandler: endHandler
@@ -47681,7 +47842,7 @@
 	      isHorizontal = this._isHorizontal,
 	      railLen = isHorizontal ? railWidth : railHeight,
 	      [startValue, endValue] = convertValueToRange(value),
-	      handlerStart = (startValue - min) / (max - min) * railLen,
+	      handlerStart = max === min ? range ? 0 : railLen : (startValue - min) / (max - min) * railLen,
 	      startHandler = this._renderHandler(Object.assign({
 	        x: isHorizontal ? handlerStart : railWidth / 2,
 	        y: isHorizontal ? railHeight / 2 : handlerStart,
@@ -47690,11 +47851,11 @@
 	        cursor: !1 === slidable ? "default" : getDefaultCursor(isHorizontal)
 	      }, handlerStyle));
 	    if (startHandler.name = SLIDER_ELEMENT_NAME.startHandler, this._startHandler = startHandler, container.add(startHandler), this._currentValue.startPos = handlerStart, handlerTextVisible) {
-	      const startHandlerText = this._renderHandlerText(startValue);
+	      const startHandlerText = this._renderHandlerText(startValue, range ? "start" : "end");
 	      startHandlerText.name = SLIDER_ELEMENT_NAME.startHandlerText, container.add(startHandlerText), this._startHandlerText = startHandlerText;
 	    }
 	    if (range) {
-	      const handlerEnd = (endValue - min) / (max - min) * railLen,
+	      const handlerEnd = max === min ? railLen : (endValue - min) / (max - min) * railLen,
 	        endHandler = this._renderHandler(Object.assign({
 	          x: isHorizontal ? handlerEnd : railWidth / 2,
 	          y: isHorizontal ? railHeight / 2 : handlerEnd,
@@ -47703,7 +47864,7 @@
 	          cursor: !1 === slidable ? "default" : getDefaultCursor(isHorizontal)
 	        }, handlerStyle));
 	      if (endHandler.name = SLIDER_ELEMENT_NAME.endHandler, this._endHandler = endHandler, container.add(endHandler), this._currentValue.endPos = handlerEnd, handlerTextVisible) {
-	        const endHandlerText = this._renderHandlerText(endValue);
+	        const endHandlerText = this._renderHandlerText(endValue, "end");
 	        endHandlerText.name = SLIDER_ELEMENT_NAME.endHandlerText, container.add(endHandlerText), this._endHandlerText = endHandlerText;
 	      }
 	    }
@@ -47717,15 +47878,16 @@
 	      railWidth: railWidth,
 	      trackStyle: trackStyle,
 	      railStyle: railStyle,
-	      slidable: slidable
-	    } = this.attribute;
-	    let {
+	      slidable: slidable,
 	      value: value
 	    } = this.attribute;
-	    isNil(value) && (value = [min, max]);
+	    let startValue, endValue;
+	    if (isNil(value)) range ? (startValue = min, endValue = max) : startValue = endValue = min;else if (range) {
+	      const clampValue = clampRange(value, min, max);
+	      startValue = clampValue[0], endValue = clampValue[1];
+	    } else startValue = min, endValue = clamp$1(value, min, max);
 	    const isHorizontal = this._isHorizontal,
 	      railLen = isHorizontal ? railWidth : railHeight;
-	    let [startValue, endValue] = convertValueToRange(value);
 	    range || (startValue = min);
 	    const trackContainer = createGroup({
 	      x: 0,
@@ -47740,10 +47902,11 @@
 	    const draggableTrack = isObject$f(range) && !0 === range.draggableTrack;
 	    let cursor;
 	    cursor = !1 === slidable ? "default" : !1 === range || !1 === draggableTrack ? "pointer" : getDefaultCursor(isHorizontal);
-	    const trackWidth = (endValue - startValue) / (max - min) * railLen,
+	    const trackWidth = max === min ? railLen : (endValue - startValue) / (max - min) * railLen,
+	      startPos = max === min ? 0 : (startValue - min) / (max - min) * railLen,
 	      track = createRect(Object.assign({
-	        x: isHorizontal ? (startValue - min) / (max - min) * railLen : 0,
-	        y: isHorizontal ? 0 : (startValue - min) / (max - min) * railLen,
+	        x: isHorizontal ? startPos : 0,
+	        y: isHorizontal ? 0 : startPos,
 	        width: isHorizontal ? trackWidth : railWidth,
 	        height: isHorizontal ? railHeight : trackWidth,
 	        cursor: cursor
@@ -47753,7 +47916,7 @@
 	  _renderHandler(style) {
 	    return createSymbol(style);
 	  }
-	  _renderHandlerText(value) {
+	  _renderHandlerText(value, position) {
 	    var _a, _b, _c;
 	    const {
 	        align: align,
@@ -47766,7 +47929,8 @@
 	        slidable: slidable
 	      } = this.attribute,
 	      isHorizontal = this._isHorizontal,
-	      handlerStart = (value - min) / (max - min) * (isHorizontal ? railWidth : railHeight),
+	      railLen = isHorizontal ? railWidth : railHeight,
+	      handlerStart = max === min ? "start" === position ? 0 : railLen : (value - min) / (max - min) * railLen,
 	      textSpace = null !== (_a = handlerText.space) && void 0 !== _a ? _a : 4,
 	      textStyle = Object.assign({
 	        text: (null == handlerText ? void 0 : handlerText.formatter) ? handlerText.formatter(value) : value.toFixed(null !== (_b = null == handlerText ? void 0 : handlerText.precision) && void 0 !== _b ? _b : 0),
@@ -48870,7 +49034,7 @@
 	  }
 	}
 
-	var __awaiter$6 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+	var __awaiter$5 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
 	  return new (P || (P = Promise))(function (resolve, reject) {
 	    function fulfilled(value) {
 	      try {
@@ -48927,7 +49091,7 @@
 	    }, this._dispatchChange = value => {
 	      const index = Math.floor(value);
 	      index !== this._activeIndex && (this._dataIndex = index, this._activeIndex = index, index !== this._maxIndex && this.dispatchCustomEvent(PlayerEventEnum.OnChange));
-	    }, this.play = () => __awaiter$6(this, void 0, void 0, function* () {
+	    }, this.play = () => __awaiter$5(this, void 0, void 0, function* () {
 	      this._isPlaying || (this._controller.togglePause(), this._isPlaying = !0, this._elapsed >= this._totalDuration && (this._elapsed = 0), this._startTime = Date.now() - this._elapsed, this.dispatchCustomEvent(PlayerEventEnum.OnPlay), this._rafId = vglobal.getRequestAnimationFrame()(this._play.bind(this)));
 	    }), this._play = () => {
 	      this._elapsed = Date.now() - this._startTime;
@@ -51250,7 +51414,7 @@
 	  return new Component(view, componentType, groupMark);
 	};
 
-	var __awaiter$5 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+	var __awaiter$4 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
 	  return new (P || (P = Promise))(function (resolve, reject) {
 	    function fulfilled(value) {
 	      try {
@@ -51319,7 +51483,7 @@
 	    };
 	  }
 	  evaluate(upstream, parameters) {
-	    return __awaiter$5(this, void 0, void 0, function* () {
+	    return __awaiter$4(this, void 0, void 0, function* () {
 	      const tasks = this._isLoaded ? this.transforms : this._loadTasks.concat(this.transforms);
 	      this.grammarSource && (this._input = upstream);
 	      const values = yield this.evaluateTransform(tasks, this._input, parameters),
@@ -51499,7 +51663,7 @@
 	  }
 	}
 
-	var __awaiter$4 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+	var __awaiter$3 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
 	  return new (P || (P = Promise))(function (resolve, reject) {
 	    function fulfilled(value) {
 	      try {
@@ -51529,7 +51693,7 @@
 	    this.grammars = [], this.logger = Logger.getInstance(), this._curRank = 0, this._committed = new UniqueList(grammar => grammar.uid), this._heap = new Heap((a, b) => a.qrank - b.qrank), this._beforeRunner = null, this._afterRunner = null, this._isRunning = !1, this._updateCounter = 0, this._finishFirstRender = !1;
 	  }
 	  asyncCallback(callback) {
-	    return __awaiter$4(this, void 0, void 0, function* () {
+	    return __awaiter$3(this, void 0, void 0, function* () {
 	      try {
 	        yield callback(this);
 	      } catch (err) {
@@ -51587,7 +51751,7 @@
 	    grammar.targets && grammar.targets.length && this._finishFirstRender && grammar.targets.forEach(target => this._enqueue(target));
 	  }
 	  evaluate() {
-	    return __awaiter$4(this, void 0, void 0, function* () {
+	    return __awaiter$3(this, void 0, void 0, function* () {
 	      if (this._beforeRunner && (yield this.asyncCallback(this._beforeRunner)), !this._committed.length) return this.logger.info("Dataflow invoked, but nothing to do."), !1;
 	      this._isRunning = !0, this._updateCounter += 1;
 	      let grammar,
@@ -52148,19 +52312,20 @@
 	  };
 	  return (null !== (_a = spec.marks) && void 0 !== _a ? _a : []).forEach(mark => traverse(mark, "root")), spec;
 	};
-	const normalizeMorphConfig = morph => {
-	  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+	const normalizeRunningConfig = runningConfig => {
+	  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
 	  return {
-	    reuse: null !== (_a = null == morph ? void 0 : morph.reuse) && void 0 !== _a ? _a : DefaultReuse,
-	    morph: null !== (_b = null == morph ? void 0 : morph.morph) && void 0 !== _b ? _b : DefaultMorph,
-	    morphAll: null !== (_c = null == morph ? void 0 : morph.morphAll) && void 0 !== _c ? _c : DefaultMorphAll,
+	    reuse: null !== (_a = null == runningConfig ? void 0 : runningConfig.reuse) && void 0 !== _a ? _a : DefaultReuse,
+	    morph: null !== (_b = null == runningConfig ? void 0 : runningConfig.morph) && void 0 !== _b ? _b : DefaultMorph,
+	    morphAll: null !== (_c = null == runningConfig ? void 0 : runningConfig.morphAll) && void 0 !== _c ? _c : DefaultMorphAll,
 	    animation: {
-	      easing: null !== (_e = null === (_d = null == morph ? void 0 : morph.animation) || void 0 === _d ? void 0 : _d.easing) && void 0 !== _e ? _e : DefaultAnimationEasing,
-	      delay: null !== (_g = null === (_f = null == morph ? void 0 : morph.animation) || void 0 === _f ? void 0 : _f.delay) && void 0 !== _g ? _g : DefaultAnimationDelay,
-	      duration: null !== (_j = null === (_h = null == morph ? void 0 : morph.animation) || void 0 === _h ? void 0 : _h.duration) && void 0 !== _j ? _j : DefaultAnimationDuration,
-	      oneByOne: null !== (_l = null === (_k = null == morph ? void 0 : morph.animation) || void 0 === _k ? void 0 : _k.oneByOne) && void 0 !== _l ? _l : DefaultAnimationOneByOne,
-	      splitPath: null !== (_o = null === (_m = null == morph ? void 0 : morph.animation) || void 0 === _m ? void 0 : _m.splitPath) && void 0 !== _o ? _o : DefaultSplitPath
-	    }
+	      easing: null !== (_e = null === (_d = null == runningConfig ? void 0 : runningConfig.animation) || void 0 === _d ? void 0 : _d.easing) && void 0 !== _e ? _e : DefaultAnimationEasing,
+	      delay: null !== (_g = null === (_f = null == runningConfig ? void 0 : runningConfig.animation) || void 0 === _f ? void 0 : _f.delay) && void 0 !== _g ? _g : DefaultAnimationDelay,
+	      duration: null !== (_j = null === (_h = null == runningConfig ? void 0 : runningConfig.animation) || void 0 === _h ? void 0 : _h.duration) && void 0 !== _j ? _j : DefaultAnimationDuration,
+	      oneByOne: null !== (_l = null === (_k = null == runningConfig ? void 0 : runningConfig.animation) || void 0 === _k ? void 0 : _k.oneByOne) && void 0 !== _l ? _l : DefaultAnimationOneByOne,
+	      splitPath: null !== (_o = null === (_m = null == runningConfig ? void 0 : runningConfig.animation) || void 0 === _m ? void 0 : _m.splitPath) && void 0 !== _o ? _o : DefaultSplitPath
+	    },
+	    enableExitAnimation: null !== (_p = null == runningConfig ? void 0 : runningConfig.enableExitAnimation) && void 0 !== _p ? _p : DefaultEnableExitAnimation
 	  };
 	};
 
@@ -52799,32 +52964,32 @@
 	      return null !== (_a = grammar.id()) && void 0 !== _a ? _a : Symbol();
 	    });
 	  }
-	  diffMark(prevMarks, nextMarks, morphConfig) {
+	  diffMark(prevMarks, nextMarks, runningConfig) {
 	    const diffResult = {
 	      enter: [],
 	      exit: [],
 	      update: []
 	    };
-	    let prevMorphMarks = [],
-	      nextMorphMarks = [];
+	    let prevDiffMarks = [],
+	      nextDiffMarks = [];
 	    prevMarks.forEach(mark => {
-	      morphConfig.morph && (morphConfig.morphAll || mark.getMorphConfig().morph) && mark.markType !== GrammarMarkType.group ? prevMorphMarks.push(mark) : diffResult.exit.push({
+	      mark.markType !== GrammarMarkType.group && (runningConfig.morph && mark.getMorphConfig().morph || runningConfig.morphAll || runningConfig.reuse) ? prevDiffMarks.push(mark) : diffResult.exit.push({
 	        prev: [mark]
 	      });
 	    }), nextMarks.forEach(mark => {
-	      morphConfig.morph && (morphConfig.morphAll || mark.getMorphConfig().morph) && mark.markType !== GrammarMarkType.group ? nextMorphMarks.push(mark) : diffResult.enter.push({
+	      mark.markType !== GrammarMarkType.group && (runningConfig.morph && mark.getMorphConfig().morph || runningConfig.morphAll || runningConfig.reuse) ? nextDiffMarks.push(mark) : diffResult.enter.push({
 	        next: [mark]
 	      });
 	    });
-	    const keyDiffResult = this.diffUpdateByGroup(prevMorphMarks, nextMorphMarks, mark => mark.getMorphConfig().morphKey, mark => mark.getMorphConfig().morphKey);
-	    prevMorphMarks = keyDiffResult.prev, nextMorphMarks = keyDiffResult.next, diffResult.update = diffResult.update.concat(keyDiffResult.update);
-	    const nameDiffResult = this.diffUpdateByGroup(prevMorphMarks, nextMorphMarks, mark => mark.id(), mark => mark.id());
-	    prevMorphMarks = nameDiffResult.prev, nextMorphMarks = nameDiffResult.next, diffResult.update = diffResult.update.concat(nameDiffResult.update);
-	    const prevParentGroup = groupData(prevMorphMarks, mark => {
+	    const keyDiffResult = this.diffUpdateByGroup(prevDiffMarks, nextDiffMarks, mark => mark.getMorphConfig().morphKey, mark => mark.getMorphConfig().morphKey);
+	    prevDiffMarks = keyDiffResult.prev, nextDiffMarks = keyDiffResult.next, diffResult.update = diffResult.update.concat(keyDiffResult.update);
+	    const nameDiffResult = this.diffUpdateByGroup(prevDiffMarks, nextDiffMarks, mark => mark.id(), mark => mark.id());
+	    prevDiffMarks = nameDiffResult.prev, nextDiffMarks = nameDiffResult.next, diffResult.update = diffResult.update.concat(nameDiffResult.update);
+	    const prevParentGroup = groupData(prevDiffMarks, mark => {
 	        var _a, _b;
 	        return null === (_b = null === (_a = mark.group) || void 0 === _a ? void 0 : _a.id) || void 0 === _b ? void 0 : _b.call(_a);
 	      }),
-	      nextParentGroup = groupData(nextMorphMarks, mark => {
+	      nextParentGroup = groupData(nextDiffMarks, mark => {
 	        var _a, _b;
 	        return null === (_b = null === (_a = mark.group) || void 0 === _a ? void 0 : _a.id) || void 0 === _b ? void 0 : _b.call(_a);
 	      });
@@ -52844,11 +53009,11 @@
 	            next: [nextChild]
 	          });
 	        }
-	        prevMorphMarks = prevMorphMarks.filter(mark => !prevChildren.includes(mark)), nextMorphMarks = nextMorphMarks.filter(mark => !nextChildren.includes(mark));
+	        prevDiffMarks = prevDiffMarks.filter(mark => !prevChildren.includes(mark)), nextDiffMarks = nextDiffMarks.filter(mark => !nextChildren.includes(mark));
 	      }
-	    }), prevMorphMarks.forEach(mark => diffResult.exit.push({
+	    }), prevDiffMarks.forEach(mark => diffResult.exit.push({
 	      prev: [mark]
-	    })), nextMorphMarks.forEach(mark => diffResult.enter.push({
+	    })), nextDiffMarks.forEach(mark => diffResult.enter.push({
 	      next: [mark]
 	    })), diffResult;
 	  }
@@ -52861,7 +53026,7 @@
 	      });
 	    }
 	  }
-	  morph(prevMarks, nextMarks, morphConfig) {
+	  morph(prevMarks, nextMarks, runningConfig) {
 	    const prevElements = prevMarks.reduce((elements, mark) => (this._appendMorphKeyToElements(mark), elements.concat(mark.elements)), []),
 	      nextElements = nextMarks.reduce((elements, mark) => (this._appendMorphKeyToElements(mark), elements.concat(mark.elements)), []),
 	      diffResult = diffMultiple(prevElements, nextElements, element => {
@@ -52885,13 +53050,13 @@
 	    };
 	    diffResult.enter.forEach(diff => {
 	      diff.next.forEach(element => {
-	        this.doMorph([], [element], morphConfig, onMorphEnd, parameters);
+	        this.doMorph([], [element], runningConfig, onMorphEnd, parameters);
 	      }), morphCount += 1;
 	    }), diffResult.update.forEach(diff => {
 	      const divideCount = Math.min(diff.prev.length, diff.next.length),
 	        prevDivide = this.divideElements(diff.prev, divideCount),
 	        nextDivide = this.divideElements(diff.next, divideCount);
-	      for (let i = 0; i < divideCount; i++) this.doMorph(prevDivide[i], nextDivide[i], morphConfig, onMorphEnd, parameters), morphCount += 1;
+	      for (let i = 0; i < divideCount; i++) this.doMorph(prevDivide[i], nextDivide[i], runningConfig, onMorphEnd, parameters), morphCount += 1;
 	    });
 	  }
 	  diffUpdateByGroup(prev, next, prevKey, nextKey) {
@@ -52921,7 +53086,7 @@
 	      update: update
 	    };
 	  }
-	  doMorph(prev, next, morphConfig, onEnd, parameters) {
+	  doMorph(prev, next, runningConfig, onEnd, parameters) {
 	    var _a, _b;
 	    const morphData = {
 	        prev: prev.map(element => element.getDatum()),
@@ -52931,11 +53096,11 @@
 	        prev: prev.slice(),
 	        next: next.slice()
 	      },
-	      easing = morphConfig.animation.easing,
-	      delay = invokeFunctionType(morphConfig.animation.delay, parameters, morphData, morphElements),
-	      duration = invokeFunctionType(morphConfig.animation.duration, parameters, morphData, morphElements),
-	      oneByOne = invokeFunctionType(morphConfig.animation.oneByOne, parameters, morphData, morphElements),
-	      splitPath = invokeFunctionType(morphConfig.animation.splitPath, parameters, morphData, morphElements),
+	      easing = runningConfig.animation.easing,
+	      delay = invokeFunctionType(runningConfig.animation.delay, parameters, morphData, morphElements),
+	      duration = invokeFunctionType(runningConfig.animation.duration, parameters, morphData, morphElements),
+	      oneByOne = invokeFunctionType(runningConfig.animation.oneByOne, parameters, morphData, morphElements),
+	      splitPath = invokeFunctionType(runningConfig.animation.splitPath, parameters, morphData, morphElements),
 	      individualDelay = isValidNumber(oneByOne) && oneByOne > 0 ? index => isNumber(oneByOne) ? index * oneByOne : !0 === oneByOne ? index * duration : 0 : void 0;
 	    1 !== prev.length && 0 !== prev.length || 1 !== next.length ? 1 === prev.length && next.length > 1 ? oneToMultiMorph(prev[0].getGraphicItem(), next.map(element => element.getGraphicItem()), {
 	      delay: delay,
@@ -53299,7 +53464,7 @@
 	  }
 	}
 
-	var __awaiter$3 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+	var __awaiter$2 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
 	  return new (P || (P = Promise))(function (resolve, reject) {
 	    function fulfilled(value) {
 	      try {
@@ -53649,27 +53814,27 @@
 	  commit(grammar) {
 	    return this._dataflow.commit(grammar), this;
 	  }
-	  run(morphConfig) {
-	    return this.evaluate(morphConfig), this;
+	  run(runningConfig) {
+	    return this.evaluate(runningConfig), this;
 	  }
-	  runSync(morphConfig) {
-	    return this.evaluateSync(morphConfig), this;
+	  runSync(runningConfig) {
+	    return this.evaluateSync(runningConfig), this;
 	  }
 	  isRunning() {
 	    return this._running;
 	  }
-	  runAsync(morphConfig) {
-	    return __awaiter$3(this, void 0, void 0, function* () {
+	  runAsync(runningConfig) {
+	    return __awaiter$2(this, void 0, void 0, function* () {
 	      for (; this._running;) yield this._running;
 	      const clear = () => {
 	        this._running = null;
 	      };
-	      return (this._running = this.evaluate(morphConfig)).then(clear, clear), this._running;
+	      return (this._running = this.evaluate(runningConfig)).then(clear, clear), this._running;
 	    });
 	  }
-	  runNextTick(morphConfig) {
-	    return __awaiter$3(this, void 0, void 0, function* () {
-	      return this._currentDataflow || (this._currentDataflow = Promise.resolve().then(() => this.runAsync(morphConfig).then(() => {
+	  runNextTick(runningConfig) {
+	    return __awaiter$2(this, void 0, void 0, function* () {
+	      return this._currentDataflow || (this._currentDataflow = Promise.resolve().then(() => this.runAsync(runningConfig).then(() => {
 	        this._currentDataflow = null;
 	      }).catch(e => {
 	        this._currentDataflow = null, this.logger.error(e);
@@ -53679,34 +53844,34 @@
 	  doRender(immediately) {
 	    this.emit(HOOK_EVENT.BEFORE_DO_RENDER), this.renderer && (this._progressiveMarks || this.animate.animate(), this.renderer.render(immediately), this.handleRenderEnd()), this.emit(HOOK_EVENT.AFTER_DO_RENDER);
 	  }
-	  evaluate(morphConfig) {
+	  evaluate(runningConfig) {
 	    var _a, _b;
-	    return __awaiter$3(this, void 0, void 0, function* () {
-	      const normalizedMorphConfig = normalizeMorphConfig(morphConfig);
-	      this.reuseCachedGrammars(normalizedMorphConfig);
+	    return __awaiter$2(this, void 0, void 0, function* () {
+	      const normalizedRunningConfig = normalizeRunningConfig(runningConfig);
+	      this.reuseCachedGrammars(normalizedRunningConfig);
 	      const grammarWillDetach = this._cachedGrammars.size() > 0;
 	      this.detachCachedGrammar();
 	      const hasResize = this._resizeRenderer(),
 	        hasUpdate = this._dataflow.hasCommitted();
 	      return grammarWillDetach || hasUpdate || this._layoutState || hasResize ? (this.clearProgressive(), yield this._dataflow.evaluate(), this._needBuildLayoutTree && (this.buildLayoutTree(), this._needBuildLayoutTree = !1), this._layoutState && (this._layoutState = LayoutState.layouting, this.doLayout(), this._dataflow.hasCommitted() && (this._layoutState = LayoutState.reevaluate, yield this._dataflow.evaluate()), this._layoutState = LayoutState.after, (null === (_a = this._layoutMarks) || void 0 === _a ? void 0 : _a.length) && this.handleLayoutEnd()), this._layoutState = null, this.findProgressiveMarks(), this._resizeRenderer(), this.doRender(!1), null === (_b = this._willMorphMarks) || void 0 === _b || _b.forEach(morphMarks => {
-	        this._morph.morph(morphMarks.prev, morphMarks.next, normalizedMorphConfig);
-	      }), this._willMorphMarks = null, this.releaseCachedGrammars(), this.doPreProgressive(), this) : this;
+	        this._morph.morph(morphMarks.prev, morphMarks.next, normalizedRunningConfig);
+	      }), this._willMorphMarks = null, this.releaseCachedGrammars(normalizedRunningConfig), this.doPreProgressive(), this) : this;
 	    });
 	  }
-	  evaluateSync(morphConfig) {
+	  evaluateSync(runningConfig) {
 	    var _a, _b;
-	    const normalizedMorphConfig = normalizeMorphConfig(morphConfig);
-	    this.reuseCachedGrammars(normalizedMorphConfig);
+	    const normalizedRunningConfig = normalizeRunningConfig(runningConfig);
+	    this.reuseCachedGrammars(normalizedRunningConfig);
 	    const grammarWillDetach = this._cachedGrammars.size() > 0;
-	    this.releaseCachedGrammars();
+	    this.detachCachedGrammar();
 	    const hasResize = this._resizeRenderer(),
 	      hasUpdate = this._dataflow.hasCommitted();
 	    return grammarWillDetach || hasUpdate || this._layoutState || hasResize ? (this.clearProgressive(), this._dataflow.evaluateSync(), this._needBuildLayoutTree && (this.buildLayoutTree(), this._needBuildLayoutTree = !1), this._layoutState && (this._layoutState = LayoutState.layouting, this.doLayout(), this._dataflow.hasCommitted() && (this._layoutState = LayoutState.reevaluate, this._dataflow.evaluateSync()), this._layoutState = LayoutState.after, (null === (_a = this._layoutMarks) || void 0 === _a ? void 0 : _a.length) && this.handleLayoutEnd()), this._layoutState = null, this.findProgressiveMarks(), this._resizeRenderer(), this.doRender(!0), null === (_b = this._willMorphMarks) || void 0 === _b || _b.forEach(morphMarks => {
-	      this._morph.morph(morphMarks.prev, morphMarks.next, normalizedMorphConfig);
-	    }), this._willMorphMarks = null, this.releaseCachedGrammars(), this.doPreProgressive(), this) : this;
+	      this._morph.morph(morphMarks.prev, morphMarks.next, normalizedRunningConfig);
+	    }), this._willMorphMarks = null, this.releaseCachedGrammars(normalizedRunningConfig), this.doPreProgressive(), this) : this;
 	  }
-	  reuseCachedGrammars(morphConfig) {
-	    if (this._willMorphMarks || (this._willMorphMarks = []), morphConfig.reuse) {
+	  reuseCachedGrammars(runningConfig) {
+	    if (this._willMorphMarks || (this._willMorphMarks = []), runningConfig.reuse) {
 	      const reuseDiffUpdate = diff => {
 	        diff.next.reuse(diff.prev), diff.prev.detachAll(), diff.prev.clear(), this._cachedGrammars.unrecord(diff.prev);
 	      };
@@ -53715,8 +53880,10 @@
 	      this._morph.diffGrammar(this._cachedGrammars.getAllScales(), this.grammars.getAllScales()).update.forEach(reuseDiffUpdate);
 	      this._morph.diffGrammar(this._cachedGrammars.getAllCoordinates(), this.grammars.getAllCoordinates()).update.forEach(reuseDiffUpdate);
 	    }
-	    this._morph.diffMark(this._cachedGrammars.getAllMarks(), this.grammars.getAllMarks().filter(mark => "root" !== mark.id()), morphConfig).update.forEach(diff => {
-	      1 === diff.prev.length && 1 === diff.next.length && diff.prev[0].markType === diff.next[0].markType && morphConfig.reuse ? (diff.next[0].reuse(diff.prev[0]), diff.prev[0].detachAll(), diff.prev[0].clear(), this._cachedGrammars.unrecord(diff.prev[0])) : morphConfig.morph && this._willMorphMarks.push({
+	    this._morph.diffMark(this._cachedGrammars.getAllMarks(), this.grammars.getAllMarks().filter(mark => "root" !== mark.id()), runningConfig).update.forEach(diff => {
+	      const matched = 1 === diff.prev.length && 1 === diff.next.length && diff.prev[0].markType === diff.next[0].markType,
+	        enableMarkMorphConfig = diff.prev.every(mark => mark.getMorphConfig().morph) && diff.next.every(mark => mark.getMorphConfig().morph);
+	      matched && runningConfig.reuse ? (diff.next[0].reuse(diff.prev[0]), diff.prev[0].detachAll(), diff.prev[0].clear(), this._cachedGrammars.unrecord(diff.prev[0])) : (runningConfig.morph && enableMarkMorphConfig || runningConfig.morphAll) && this._willMorphMarks.push({
 	        prev: diff.prev,
 	        next: diff.next
 	      });
@@ -53731,21 +53898,22 @@
 	      }
 	    });
 	  }
-	  releaseCachedGrammars() {
+	  releaseCachedGrammars(runningConfig) {
 	    this._cachedGrammars.traverse(grammar => {
 	      "mark" !== grammar.grammarType && grammar.release();
 	    });
-	    const markNodes = this._cachedGrammars.getAllMarkNodes(),
-	      releaseUp = node => {
-	        if (node.mark.view && 0 === node.mark.animate.getAnimatorCount() && (!node.children || 0 === node.children.length)) {
-	          node.mark.release();
-	          const parent = node.parent;
-	          parent && (node.parent.children = node.parent.children.filter(n => n !== node), node.parent = null, releaseUp(parent));
-	        }
-	      };
+	    const markNodes = this._cachedGrammars.getAllMarkNodes();
+	    markNodes.forEach(node => {
+	      node.mark.animate.stop(), runningConfig.enableExitAnimation && node.mark.animate.animate();
+	    });
+	    const releaseUp = node => {
+	      if (node.mark.view && 0 === node.mark.animate.getAnimatorCount() && (!node.children || 0 === node.children.length)) {
+	        node.mark.release();
+	        const parent = node.parent;
+	        parent && (node.parent.children = node.parent.children.filter(n => n !== node), node.parent = null, releaseUp(parent));
+	      }
+	    };
 	    markNodes.forEach(node => {
-	      node.mark.animate.animate();
-	    }), markNodes.forEach(node => {
 	      const mark = node.mark;
 	      0 === mark.animate.getAnimatorCount() ? releaseUp(node) : mark.addEventListener("animationEnd", () => {
 	        0 === mark.animate.getAnimatorCount() && releaseUp(node);
@@ -53806,7 +53974,7 @@
 	  }
 	  resize(width, height) {
 	    let render = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
-	    return __awaiter$3(this, void 0, void 0, function* () {
+	    return __awaiter$2(this, void 0, void 0, function* () {
 	      let needDataflow = !1;
 	      return width !== this.width() && (needDataflow = !0, this.updateSignal(SIGNAL_WIDTH, width)), height !== this.height() && (needDataflow = !0, this.updateSignal(SIGNAL_HEIGHT, height)), needDataflow && (render ? yield this.evaluate() : yield this._dataflow.evaluate()), this;
 	    });
@@ -54150,6 +54318,9 @@
 	const STACK_FIELD_END_PERCENT = `${PREFIX}_STACK_END_PERCENT`;
 	const STACK_FIELD_START_OffsetSilhouette = `${PREFIX}_STACK_START_OffsetSilhouette`;
 	const STACK_FIELD_END_OffsetSilhouette = `${PREFIX}_STACK_END_OffsetSilhouette`;
+	const STACK_FIELD_TOTAL = `${PREFIX}_STACK_TOTAL`;
+	const STACK_FIELD_TOTAL_PERCENT = `${PREFIX}_STACK_TOTAL_PERCENT`;
+	const STACK_FIELD_TOTAL_TOP = `${PREFIX}_STACK_TOTAL_TOP`;
 	const SEGMENT_FIELD_START = `${PREFIX}_SEGMENT_START`;
 	const SEGMENT_FIELD_END = `${PREFIX}_SEGMENT_END`;
 	var LayoutZIndex;
@@ -54320,7 +54491,6 @@
 	    },
 	    label: {
 	        style: {
-	            fill: 'white',
 	            textAlign: 'center',
 	            textBaseline: 'middle',
 	            fontSize: 12
@@ -54592,7 +54762,7 @@
 	    delayTime: 0
 	};
 
-	const fontSize$2 = THEME_CONSTANTS.LABEL_FONT_SIZE;
+	const fontSize$3 = THEME_CONSTANTS.LABEL_FONT_SIZE;
 	const crosshair = {
 	    trigger: 'hover',
 	    xField: {
@@ -54611,7 +54781,7 @@
 	            style: {
 	                fontWeight: 'normal',
 	                fill: '#fff',
-	                fontSize: fontSize$2
+	                fontSize: fontSize$3
 	            },
 	            labelBackground: {
 	                padding: {
@@ -54643,7 +54813,7 @@
 	            style: {
 	                fontWeight: 'normal',
 	                fill: '#fff',
-	                fontSize: fontSize$2
+	                fontSize: fontSize$3
 	            },
 	            labelBackground: {
 	                padding: {
@@ -54675,7 +54845,7 @@
 	            style: {
 	                fontWeight: 'normal',
 	                fill: '#fff',
-	                fontSize: fontSize$2
+	                fontSize: fontSize$3
 	            },
 	            labelBackground: {
 	                padding: {
@@ -54707,7 +54877,7 @@
 	            style: {
 	                fontWeight: 'normal',
 	                fill: '#fff',
-	                fontSize: fontSize$2
+	                fontSize: fontSize$3
 	            },
 	            labelBackground: {
 	                padding: {
@@ -54994,8 +55164,8 @@
 	        } }, DEFAULT_CONTINUOUS_LEGEND_THEME)
 	};
 
-	const fontSize$1 = THEME_CONSTANTS.LABEL_FONT_SIZE;
-	const fontFamily = THEME_CONSTANTS.FONT_FAMILY;
+	const fontSize$2 = THEME_CONSTANTS.LABEL_FONT_SIZE;
+	const fontFamily$1 = THEME_CONSTANTS.FONT_FAMILY;
 	const mapLabel = {
 	    visible: true,
 	    offset: 12,
@@ -55007,8 +55177,8 @@
 	            textBaseline: 'middle',
 	            textAlign: 'left',
 	            fill: 'black',
-	            fontSize: fontSize$1,
-	            fontFamily
+	            fontSize: fontSize$2,
+	            fontFamily: fontFamily$1
 	        }
 	    },
 	    valueLabel: {
@@ -55017,8 +55187,8 @@
 	            textBaseline: 'middle',
 	            textAlign: 'left',
 	            fill: 'black',
-	            fontSize: fontSize$1,
-	            fontFamily
+	            fontSize: fontSize$2,
+	            fontFamily: fontFamily$1
 	        }
 	    },
 	    background: {
@@ -55220,7 +55390,7 @@
 	    }
 	};
 
-	const fontSize = THEME_CONSTANTS.LABEL_FONT_SIZE;
+	const fontSize$1 = THEME_CONSTANTS.LABEL_FONT_SIZE;
 	const tooltip = {
 	    offset: {
 	        x: 10,
@@ -55262,7 +55432,7 @@
 	        spacing: 6
 	    },
 	    keyLabel: {
-	        fontSize,
+	        fontSize: fontSize$1,
 	        fontColor: '#4E5969',
 	        textAlign: 'left',
 	        lineHeight: 18,
@@ -55270,7 +55440,7 @@
 	        spacing: 26
 	    },
 	    valueLabel: {
-	        fontSize,
+	        fontSize: fontSize$1,
 	        fontColor: '#4E5969',
 	        lineHeight: 18,
 	        textBaseline: 'middle',
@@ -55306,6 +55476,24 @@
 	    }
 	};
 
+	const fontSize = THEME_CONSTANTS.LABEL_FONT_SIZE;
+	const fontFamily = THEME_CONSTANTS.FONT_FAMILY;
+	const totalLabel = {
+	    visible: false,
+	    offset: 5,
+	    overlap: {
+	        clampForce: true,
+	        strategy: []
+	    },
+	    smartInvert: false,
+	    animation: false,
+	    style: {
+	        fontSize,
+	        fontFamily,
+	        fill: 'black'
+	    }
+	};
+
 	const component = {
 	    discreteLegend,
 	    colorLegend,
@@ -55328,7 +55516,8 @@
 	    indicator,
 	    title,
 	    mapLabel,
-	    poptip
+	    poptip,
+	    totalLabel
 	};
 
 	const lightTheme = {
@@ -56360,7 +56549,8 @@
 	    discreteLegend: 'legend',
 	    continuousLegend: 'legend',
 	    colorLegend: 'legend',
-	    sizeLegend: 'legend'
+	    sizeLegend: 'legend',
+	    label: 'label'
 	};
 	class EventDispatcher {
 	    constructor(vchart, compiler) {
@@ -56482,6 +56672,12 @@
 	        if (filter.type && modelType !== filter.type) {
 	            return false;
 	        }
+	        if (filter.level === 'mark' && !filter.type && !(params === null || params === void 0 ? void 0 : params.mark)) {
+	            return false;
+	        }
+	        if (filter.level === 'model' && !filter.type && !(params === null || params === void 0 ? void 0 : params.model)) {
+	            return false;
+	        }
 	        if (isValid(filter.userId) && ((_c = params.model) === null || _c === void 0 ? void 0 : _c.userId) !== filter.userId) {
 	            return false;
 	        }
@@ -56950,7 +57146,7 @@
 	    }
 	    renderAsync(morphConfig) {
 	        var _a;
-	        return __awaiter$i(this, void 0, void 0, function* () {
+	        return __awaiter$h(this, void 0, void 0, function* () {
 	            this.initView();
 	            if (!this._view) {
 	                return Promise.reject('srView init fail');
@@ -56977,6 +57173,8 @@
 	        if (!this._view) {
 	            return Promise.reject();
 	        }
+	        this._width = width;
+	        this._height = height;
 	        this._view.resize(width, height);
 	        return this.reRenderAsync({ morph: false });
 	    }
@@ -57185,7 +57383,7 @@
 	}
 	function getCanvasDataURL(c, ctx) {
 	    var _a;
-	    return __awaiter$i(this, void 0, void 0, function* () {
+	    return __awaiter$h(this, void 0, void 0, function* () {
 	        if (!c) {
 	            return '';
 	        }
@@ -57201,6 +57399,62 @@
 	    });
 	}
 
+	function setDefaultCrosshairForCartesianChart(spec) {
+	    spec.crosshair = array(spec.crosshair || {}).map(crosshairCfg => {
+	        return merge$2({
+	            [spec.direction === Direction$2.horizontal ? 'yField' : 'xField']: {
+	                visible: true,
+	                line: {
+	                    visible: true,
+	                    type: 'rect'
+	                }
+	            }
+	        }, crosshairCfg);
+	    });
+	}
+	function calculateChartSize(spec, option) {
+	    var _a;
+	    const { width: userWidth, height: userHeight } = spec;
+	    if (isValid(userWidth) && isValid(userHeight)) {
+	        return {
+	            width: userWidth,
+	            height: userHeight
+	        };
+	    }
+	    let width = DEFAULT_CHART_WIDTH;
+	    let height = DEFAULT_CHART_HEIGHT;
+	    const container = option.container;
+	    const canvas = option.canvas;
+	    if (container) {
+	        const { width: containerWidth, height: containerHeight } = getContainerSize(container, DEFAULT_CHART_WIDTH, DEFAULT_CHART_HEIGHT);
+	        width = containerWidth;
+	        height = containerHeight;
+	    }
+	    else if (canvas && isTrueBrowser(option.mode)) {
+	        let canvasNode;
+	        if (isString(canvas)) {
+	            canvasNode = document === null || document === void 0 ? void 0 : document.getElementById(canvas);
+	        }
+	        else {
+	            canvasNode = canvas;
+	        }
+	        const { width: containerWidth, height: containerHeight } = getContainerSize(canvasNode, DEFAULT_CHART_WIDTH, DEFAULT_CHART_HEIGHT);
+	        width = containerWidth;
+	        height = containerHeight;
+	    }
+	    else if (isMiniAppLikeMode(option.mode) && ((_a = option.modeParams) === null || _a === void 0 ? void 0 : _a.domref)) {
+	        const domRef = option.modeParams.domref;
+	        width = domRef.width;
+	        height = domRef.height;
+	    }
+	    width = userWidth !== null && userWidth !== void 0 ? userWidth : width;
+	    height = userHeight !== null && userHeight !== void 0 ? userHeight : height;
+	    return {
+	        width,
+	        height
+	    };
+	}
+
 	class VChart {
 	    static useChart(charts) {
 	        charts.forEach(c => Factory.registerChart(c.type, c));
@@ -57249,7 +57503,6 @@
 	                throw new Error(msg);
 	            }
 	        };
-	        this._curSize = { width: 0, height: 0 };
 	        this._observer = null;
 	        this._context = {};
 	        this._onResize = debounce((...args) => {
@@ -57282,10 +57535,17 @@
 	        this._currentThemeName = ThemeManager.getCurrentThemeName();
 	        this._setSpec(spec);
 	        this._updateCurrentTheme();
+	        this._curSize = calculateChartSize(this._spec, {
+	            container: this._container,
+	            canvas: this._canvas,
+	            mode: this._option.mode || exports.RenderModeEnum['desktop-browser'],
+	            modeParams: this._option.modeParams
+	        });
 	        this._compiler = new Compiler({
 	            dom: (_a = this._container) !== null && _a !== void 0 ? _a : 'none',
 	            canvas: renderCanvas
 	        }, Object.assign(Object.assign({ mode: this._option.mode, stage, pluginList: poptip !== false ? ['poptipForText'] : [] }, restOptions), { background: this._getBackground(), onError: this._onError }));
+	        this._compiler.setSize(this._curSize.width, this._curSize.height);
 	        this._eventDispatcher = new EventDispatcher(this, this._compiler);
 	        this._event = new Event$1(this._eventDispatcher, mode);
 	        this._compiler.initView();
@@ -57294,10 +57554,6 @@
 	        });
 	        this._initDataSet(this._option.dataSet);
 	        this._autoSize = isTrueBrowser(mode) ? (_d = (_c = spec.autoFit) !== null && _c !== void 0 ? _c : this._option.autoFit) !== null && _d !== void 0 ? _d : true : false;
-	        this._curSize = {
-	            width: spec.width || 0,
-	            height: spec.height || 0
-	        };
 	        this._bindResizeEvent();
 	        this._bindVGrammarViewEvent();
 	        this._event.emit(ChartEvent.initialized, {});
@@ -57352,6 +57608,7 @@
 	            return;
 	        }
 	        this._chart = chart;
+	        this._chart.setCanvasRect(this._curSize.width, this._curSize.height);
 	        this._chart.created();
 	        this._chart.init({});
 	    }
@@ -57411,7 +57668,7 @@
 	        }
 	    }
 	    updateCustomConfigAndRerender(modifyConfig, morphConfig) {
-	        return __awaiter$i(this, void 0, void 0, function* () {
+	        return __awaiter$h(this, void 0, void 0, function* () {
 	            const result = modifyConfig();
 	            if (!isValid(result)) {
 	                return this;
@@ -57473,7 +57730,7 @@
 	    }
 	    renderAsync(morphConfig) {
 	        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-	        return __awaiter$i(this, void 0, void 0, function* () {
+	        return __awaiter$h(this, void 0, void 0, function* () {
 	            if (!this._chart) {
 	                (_b = (_a = this._option.performanceHook) === null || _a === void 0 ? void 0 : _a.beforeInitializeChart) === null || _b === void 0 ? void 0 : _b.call(_a);
 	                this._initChart(this._spec);
@@ -57518,7 +57775,7 @@
 	        InstanceManager.unregisterInstance(this);
 	    }
 	    updateData(id, data, options) {
-	        return __awaiter$i(this, void 0, void 0, function* () {
+	        return __awaiter$h(this, void 0, void 0, function* () {
 	            if (isNil(this._dataSet)) {
 	                return this;
 	            }
@@ -57552,7 +57809,7 @@
 	        });
 	    }
 	    updateDataInBatches(list) {
-	        return __awaiter$i(this, void 0, void 0, function* () {
+	        return __awaiter$h(this, void 0, void 0, function* () {
 	            if (this._chart) {
 	                list.forEach(({ id, data, options }) => {
 	                    this._chart.updateData(id, data, false, options);
@@ -57621,7 +57878,7 @@
 	        return this;
 	    }
 	    updateFullData(data, reRender = true) {
-	        return __awaiter$i(this, void 0, void 0, function* () {
+	        return __awaiter$h(this, void 0, void 0, function* () {
 	            if (this._chart) {
 	                this._chart.updateFullData(data);
 	                if (reRender) {
@@ -57648,7 +57905,7 @@
 	        });
 	    }
 	    updateSpec(spec, forceMerge = false, morphConfig) {
-	        return __awaiter$i(this, void 0, void 0, function* () {
+	        return __awaiter$h(this, void 0, void 0, function* () {
 	            if (!spec) {
 	                return this;
 	            }
@@ -57691,7 +57948,7 @@
 	    }
 	    resize(width, height) {
 	        var _a, _b, _c, _d, _e, _f;
-	        return __awaiter$i(this, void 0, void 0, function* () {
+	        return __awaiter$h(this, void 0, void 0, function* () {
 	            if (!this._chart || !this._compiler) {
 	                return this;
 	            }
@@ -57769,7 +58026,7 @@
 	        return this._currentThemeName;
 	    }
 	    setCurrentTheme(name) {
-	        return __awaiter$i(this, void 0, void 0, function* () {
+	        return __awaiter$h(this, void 0, void 0, function* () {
 	            if (!ThemeManager.themeExist(name)) {
 	                return this;
 	            }
@@ -57878,7 +58135,7 @@
 	        }
 	    }
 	    getDataURL() {
-	        return __awaiter$i(this, void 0, void 0, function* () {
+	        return __awaiter$h(this, void 0, void 0, function* () {
 	            const stage = this.getStage();
 	            if (this._chart && stage) {
 	                stage.render();
@@ -57893,7 +58150,7 @@
 	        });
 	    }
 	    exportImg(name) {
-	        return __awaiter$i(this, void 0, void 0, function* () {
+	        return __awaiter$h(this, void 0, void 0, function* () {
 	            if (!isTrueBrowser(this._option.mode)) {
 	                this._option.onError(new TypeError(`non-browser environment can not export img`));
 	                return;
@@ -58830,6 +59087,8 @@
 	    }
 	    init(option) {
 	    }
+	    afterInit() {
+	    }
 	    onLayoutStart(layoutRect, viewRect, ctx) {
 	        super.onLayoutStart(layoutRect, viewRect, ctx);
 	        this._isLayout = true;
@@ -58873,6 +59132,7 @@
 	        const result = {
 	            change: false,
 	            reMake: false,
+	            reMakeData: false,
 	            reRender: false,
 	            reSize: false,
 	            reCompile: false
@@ -60806,7 +61066,7 @@
 	VChart.useMark([ComponentMark, GroupMark, ImageMark]);
 	Factory.registerRegion('region', Region);
 	Factory.registerLayout('base', Layout);
-	const version = "1.3.0-beta.6";
+	const version = "1.3.0-beta.7";
 	Logger.getInstance(LoggerLevel.Error);
 
 	var SeriesMarkNameEnum;
@@ -61211,6 +61471,13 @@
 	            for (const key in stackCache.nodes) {
 	                this.stackOffsetSilhouette(stackCache.nodes[key]);
 	            }
+	            model.getSeries().forEach(s => {
+	                const stackData = s.getStackData();
+	                const stackValueField = s.getStackValueField();
+	                if (stackData && stackValueField) {
+	                    this.stackTotal(stackCache, stackValueField);
+	                }
+	            });
 	        };
 	        this._chart = chart;
 	    }
@@ -61224,6 +61491,25 @@
 	            this.stackRegion({ model: r });
 	        });
 	    }
+	    stackTotal(stackData, valueField) {
+	        if ('values' in stackData && stackData.values.length) {
+	            const total = sum(stackData.values, valueField);
+	            const percent = max$2(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;
@@ -61730,46 +62016,14 @@
 	    }
 	    onRender(option) {
 	    }
+	    setCanvasRect(width, height) {
+	        this._canvasRect = { width, height };
+	    }
 	    getCanvasRect() {
 	        if (this._canvasRect) {
 	            return this._canvasRect;
 	        }
-	        const { width: userWidth, height: userHeight } = this._spec;
-	        if (isValid(userWidth) && isValid(userHeight)) {
-	            this._canvasRect = {
-	                width: userWidth,
-	                height: userHeight
-	            };
-	        }
-	        else {
-	            let width = DEFAULT_CHART_WIDTH;
-	            let height = DEFAULT_CHART_HEIGHT;
-	            const container = this._option.container;
-	            const canvas = this._option.canvas;
-	            if (container) {
-	                const { width: containerWidth, height: containerHeight } = getContainerSize(this._option.container, DEFAULT_CHART_WIDTH, DEFAULT_CHART_HEIGHT);
-	                width = containerWidth;
-	                height = containerHeight;
-	            }
-	            else if (canvas && isTrueBrowser(this._option.mode)) {
-	                let canvasNode;
-	                if (isString(canvas)) {
-	                    canvasNode = document === null || document === void 0 ? void 0 : document.getElementById(canvas);
-	                }
-	                else {
-	                    canvasNode = canvas;
-	                }
-	                const { width: containerWidth, height: containerHeight } = getContainerSize(canvasNode, DEFAULT_CHART_WIDTH, DEFAULT_CHART_HEIGHT);
-	                width = containerWidth;
-	                height = containerHeight;
-	            }
-	            width = userWidth !== null && userWidth !== void 0 ? userWidth : width;
-	            height = userHeight !== null && userHeight !== void 0 ? userHeight : height;
-	            this._canvasRect = {
-	                width,
-	                height
-	            };
-	        }
+	        this._canvasRect = calculateChartSize(this._spec, this._option);
 	        return this._canvasRect;
 	    }
 	    getSeriesData(id, index) {
@@ -61898,7 +62152,7 @@
 	        if (!this._spec.data) {
 	            return;
 	        }
-	        array(this._spec.data).forEach(d => {
+	        array(this._spec.data).forEach((d, i) => {
 	            const dataView = this._dataSet.getDataView(d.id);
 	            if (dataView) {
 	                if (d.values) {
@@ -61908,6 +62162,9 @@
 	                    dataView.updateRawData([]);
 	                }
 	            }
+	            else {
+	                result.reMakeData = true;
+	            }
 	        });
 	    }
 	    updateRegionSpec(result) {
@@ -61957,7 +62214,19 @@
 	            return;
 	        }
 	        this._series.forEach(s => {
-	            this._mergeUpdateResult(result, s.updateSpec(this._spec.series[s.getSpecIndex()]));
+	            var _a;
+	            const spec = this._spec.series[s.getSpecIndex()];
+	            if (result.reMakeData) {
+	                let values;
+	                if (!spec.data) {
+	                    values = (_a = this.getSeriesData(spec.dataId, spec.dataIndex)) === null || _a === void 0 ? void 0 : _a.latestData;
+	                }
+	                else {
+	                    values = spec.data.values;
+	                }
+	                s.updateRawData(values);
+	            }
+	            this._mergeUpdateResult(result, s.updateSpec(spec));
 	            s.reInit();
 	        });
 	    }
@@ -61990,7 +62259,8 @@
 	            largeThreshold: spec.largeThreshold,
 	            progressiveStep: spec.progressiveStep,
 	            progressiveThreshold: spec.progressiveThreshold,
-	            background: spec.seriesBackground
+	            background: spec.seriesBackground,
+	            invalidType: spec.invalidType
 	        };
 	        return series;
 	    }
@@ -62046,7 +62316,7 @@
 	        });
 	    }
 	    setSeriesTheme(theme) {
-	        this._series.forEach((s) => __awaiter$i(this, void 0, void 0, function* () {
+	        this._series.forEach((s) => __awaiter$h(this, void 0, void 0, function* () {
 	            yield s.setCurrentTheme(theme.series[s.type], true);
 	        }));
 	    }
@@ -62324,7 +62594,7 @@
 	        return true;
 	    }
 	    _getDefaultSeriesSpec(spec) {
-	        const series = Object.assign(Object.assign({}, super._getDefaultSeriesSpec(spec)), { xField: spec.xField, yField: spec.yField, zField: spec.zField, seriesField: spec.seriesField, seriesStyle: spec.seriesStyle, direction: spec.direction, stack: spec.stack, percent: spec.percent, stackOffsetSilhouette: spec.stackOffsetSilhouette });
+	        const series = Object.assign(Object.assign({}, super._getDefaultSeriesSpec(spec)), { xField: spec.xField, yField: spec.yField, zField: spec.zField, seriesField: spec.seriesField, seriesStyle: spec.seriesStyle, direction: spec.direction, stack: spec.stack, percent: spec.percent, stackOffsetSilhouette: spec.stackOffsetSilhouette, totalLabel: spec.totalLabel });
 	        const seriesType = this.seriesType;
 	        if (seriesType) {
 	            series.type = seriesType;
@@ -62423,20 +62693,6 @@
 	    ChartTypeEnum["heatmap"] = "heatmap";
 	})(ChartTypeEnum || (ChartTypeEnum = {}));
 
-	function setDefaultCrosshairForCartesianChart(spec) {
-	    spec.crosshair = array(spec.crosshair || {}).map(crosshairCfg => {
-	        return merge$2({
-	            [spec.direction === Direction$2.horizontal ? 'yField' : 'xField']: {
-	                visible: true,
-	                line: {
-	                    visible: true,
-	                    type: 'rect'
-	                }
-	            }
-	        }, crosshairCfg);
-	    });
-	}
-
 	const waterfall = (lastData, op) => {
 	    if (!lastData || lastData.length === 0) {
 	        return lastData;
@@ -62778,6 +63034,11 @@
 	                    event.on(trigger, { level: Event_Bubble_Level.mark }, this.onUnSelect);
 	                });
 	            }
+	            if (!selectTriggerOff) {
+	                array(selectTriggerOff !== null && selectTriggerOff !== void 0 ? selectTriggerOff : selectTrigger).forEach(trigger => {
+	                    event.on(trigger, { level: Event_Bubble_Level.vchart }, this.onUnSelect);
+	                });
+	            }
 	        }
 	    }
 	    releaseEvent() {
@@ -63517,17 +63778,14 @@
 	        return data;
 	    }
 	    const { invalidType, checkField } = config();
-	    if (invalidType === 'link') {
-	        data = data.filter((datum) => couldBeValidNumber(datum[checkField]));
-	    }
-	    else if (invalidType === 'zero') {
-	        data.forEach((datum) => {
-	            if (!couldBeValidNumber(datum[checkField])) {
-	                datum[checkField] = 0;
-	            }
-	        });
+	    if (invalidType !== 'zero') {
 	        return data;
 	    }
+	    data.forEach((datum) => {
+	        if (!couldBeValidNumber(datum[checkField])) {
+	            datum[checkField] = 0;
+	        }
+	    });
 	    return data;
 	};
 
@@ -63660,6 +63918,8 @@
 	        this._stack = false;
 	        this._percent = false;
 	        this._stackOffsetSilhouette = false;
+	        this._invalidType = 'break';
+	        this._getInvalidDefined = (datum) => couldBeValidNumber(datum[this.getStackValueField()]);
 	        this._region = options.region;
 	        this._dataSet = options.dataSet;
 	        ((_a = this._spec) === null || _a === void 0 ? void 0 : _a.name) && (this.name = this._spec.name);
@@ -63710,11 +63970,11 @@
 	        }
 	        if (isBoolean(this._spec.percent)) {
 	            this._percent = this._spec.percent;
-	            this._stack = this._spec.stack || this._spec.percent;
+	            this._stack = this._spec.percent || this._stack;
 	        }
 	        if (isBoolean(this._spec.stackOffsetSilhouette)) {
 	            this._stackOffsetSilhouette = this._spec.stackOffsetSilhouette;
-	            this._stack = this._spec.stack || this._spec.stackOffsetSilhouette;
+	            this._stack = this._spec.stackOffsetSilhouette || this._stack;
 	        }
 	        if (isValid(this._spec.invalidType)) {
 	            this._invalidType = this._spec.invalidType;
@@ -63722,7 +63982,7 @@
 	        (_a = this._tooltipHelper) === null || _a === void 0 ? void 0 : _a.updateTooltipSpec();
 	    }
 	    initData() {
-	        var _a, _b;
+	        var _a, _b, _c;
 	        this._rawData = this._spec.data;
 	        (_a = this._rawData) === null || _a === void 0 ? void 0 : _a.target.addListener('change', this.rawDataUpdate.bind(this));
 	        this._addDataIndexAndKey();
@@ -63736,9 +63996,9 @@
 	            this._data = new SeriesData(this._option, viewData);
 	            this._viewDataFilter.target.removeListener('change', viewData.reRunAllTransform);
 	        }
-	        if (this._invalidType === 'link' || this._invalidType === 'zero') {
-	            registerDataSetInstanceTransform(this._option.dataSet, 'invalidTravel', invalidTravel);
-	            (_b = this.getViewData()) === null || _b === void 0 ? void 0 : _b.transform({
+	        if (this._invalidType === 'zero' && ((_b = this._rawData) === null || _b === void 0 ? void 0 : _b.dataSet)) {
+	            registerDataSetInstanceTransform(this._rawData.dataSet, 'invalidTravel', invalidTravel);
+	            (_c = this._rawData) === null || _c === void 0 ? void 0 : _c.transform({
 	                type: 'invalidTravel',
 	                options: {
 	                    config: () => {
@@ -64077,6 +64337,7 @@
 	        if (spec.invalidType !== invalidType) {
 	            result.change = true;
 	            result.reRender = true;
+	            result.reMake = true;
 	        }
 	        return result;
 	    }
@@ -64179,7 +64440,7 @@
 	    onMarkTreePositionUpdate(marks) {
 	    }
 	    setCurrentTheme(theme, noRender) {
-	        return __awaiter$i(this, void 0, void 0, function* () {
+	        return __awaiter$h(this, void 0, void 0, function* () {
 	            const modifyConfig = () => {
 	                this.reInit(theme);
 	                return { change: true, reMake: false };
@@ -64278,7 +64539,8 @@
 	        return key;
 	    }
 	    addViewDataFilter(option) {
-	        this._viewDataFilter.transform(option, false);
+	        var _a;
+	        (_a = this._viewDataFilter) === null || _a === void 0 ? void 0 : _a.transform(option, false);
 	    }
 	    reFilterViewData() {
 	        var _a;
@@ -64318,6 +64580,9 @@
 	        }
 	        return list;
 	    }
+	    _getInvalidConnectType() {
+	        return this._invalidType === 'zero' ? 'zero' : this._invalidType === 'link' ? 'connect' : 'none';
+	    }
 	}
 	BaseSeries.mark = {
 	    [SeriesMarkNameEnum.label]: { name: SeriesMarkNameEnum.label, type: MarkTypeEnum.text }
@@ -64567,13 +64832,19 @@
 	        if (!this._xAxisHelper) {
 	            return Number.NaN;
 	        }
-	        return this.valueToPositionX(this.getDatumPositionValues(datum, this._fieldX));
+	        const { dataToPosition, getFields } = this._xAxisHelper;
+	        const fields = getFields ? getFields() : this._fieldX;
+	        const value = this.getDatumPositionValues(datum, fields);
+	        return dataToPosition(array(value), { bandPosition: this._bandPosition, datum });
 	    }
 	    dataToPositionY(datum) {
 	        if (!this._yAxisHelper) {
 	            return Number.NaN;
 	        }
-	        return this.valueToPositionY(this.getDatumPositionValues(datum, this._fieldY));
+	        const { dataToPosition, getFields } = this._yAxisHelper;
+	        const fields = getFields ? getFields() : this._fieldY;
+	        const value = this.getDatumPositionValues(datum, fields);
+	        return dataToPosition(array(value), { bandPosition: this._bandPosition, datum });
 	    }
 	    dataToPositionZ(datum) {
 	        if (!this._zAxisHelper) {
@@ -66718,6 +66989,12 @@
 	            this.setMarkStyle(lineMark, {
 	                stroke: this.getColorAttribute()
 	            }, 'normal', AttributeLevel.Series);
+	            if (this._invalidType !== 'zero') {
+	                this.setMarkStyle(lineMark, {
+	                    defined: this._getInvalidDefined,
+	                    connectedType: this._getInvalidConnectType()
+	                }, 'normal', AttributeLevel.Series);
+	            }
 	            if (this.coordinate === 'polar') {
 	                this.setMarkStyle(lineMark, {
 	                    lineJoin: DEFAULT_CLOSE_STROKE_JOIN,
@@ -66735,16 +67012,6 @@
 	                    curveType
 	                }, 'normal', AttributeLevel.Built_In);
 	            }
-	            if (this._invalidType) {
-	                this.setMarkStyle(lineMark, {
-	                    defined: (datum) => {
-	                        if (this._invalidType === 'break') {
-	                            return couldBeValidNumber(datum[this.getStackValueField()]);
-	                        }
-	                        return true;
-	                    }
-	                }, 'normal', AttributeLevel.Series);
-	            }
 	            this.setMarkStyle(lineMark, {
 	                x: this.dataToPositionX.bind(this),
 	                y: this.dataToPositionY.bind(this),
@@ -66813,17 +67080,9 @@
 	        this.setMarkStyle(symbolMark, {
 	            fill: this.getColorAttribute()
 	        }, 'normal', AttributeLevel.Series);
-	        if (this._invalidType) {
+	        if (this._invalidType !== 'zero') {
 	            this.setMarkStyle(symbolMark, {
-	                visible: (datum) => {
-	                    if (this._invalidType === 'break') {
-	                        return couldBeValidNumber(datum[this.getStackValueField()]);
-	                    }
-	                    else if (this._invalidType === 'link') {
-	                        return couldBeValidNumber(datum[this.getStackValueField()]);
-	                    }
-	                    return true;
-	                }
+	                visible: this._getInvalidDefined
 	            }, 'normal', AttributeLevel.Series);
 	        }
 	        this.setMarkStyle(symbolMark, {
@@ -66864,17 +67123,9 @@
 	            },
 	            z: this.dataToPositionZ.bind(this)
 	        });
-	        if (this._invalidType) {
+	        if (this._invalidType !== 'zero') {
 	            this.setMarkStyle(labelMark, {
-	                visible: (datum) => {
-	                    if (this._invalidType === 'break') {
-	                        return couldBeValidNumber(datum[this.getStackValueField()]);
-	                    }
-	                    else if (this._invalidType === 'link') {
-	                        return couldBeValidNumber(datum[this.getStackValueField()]);
-	                    }
-	                    return true;
-	                }
+	                visible: this._getInvalidDefined
 	            }, 'normal', AttributeLevel.Series);
 	        }
 	    }
@@ -66957,7 +67208,6 @@
 	    constructor() {
 	        super(...arguments);
 	        this.type = SeriesTypeEnum.line;
-	        this._invalidType = 'break';
 	    }
 	    initMark() {
 	        var _a;
@@ -66985,7 +67235,8 @@
 	        }
 	    }
 	    getSeriesStyle(datum) {
-	        const isLineAsSeriesMark = this._spec.seriesMark !== 'point';
+	        var _a;
+	        const isLineAsSeriesMark = ((_a = this._spec) === null || _a === void 0 ? void 0 : _a.seriesMark) !== 'point';
 	        return (attribute) => {
 	            var _a, _b;
 	            if (isLineAsSeriesMark) {
@@ -67392,13 +67643,79 @@
 	}
 	AreaMark.type = MarkTypeEnum.area;
 
+	class AreaSeriesTooltipHelper extends BaseSeriesTooltipHelper {
+	    constructor() {
+	        super(...arguments);
+	        this._getSeriesStyle = (datum, styleKey, defaultValue) => {
+	            var _a, _b, _c, _d;
+	            for (const key of array(styleKey)) {
+	                let value = (_a = this.series.getSeriesStyle(datum)) === null || _a === void 0 ? void 0 : _a(key);
+	                if (value === false && (key === 'fill' || key === 'stroke')) {
+	                    if (key === 'fill') {
+	                        value = (_c = (_b = this.series.getSeriesStyle(datum)) === null || _b === void 0 ? void 0 : _b('stroke')) === null || _c === void 0 ? void 0 : _c[0];
+	                    }
+	                    else {
+	                        value = (_d = this.series.getSeriesStyle(datum)) === null || _d === void 0 ? void 0 : _d('fill');
+	                    }
+	                }
+	                if (isValid(value)) {
+	                    return value;
+	                }
+	            }
+	            return defaultValue;
+	        };
+	    }
+	}
+
 	VChart.useMark([LineMark, AreaMark, TextMark, SymbolMark]);
 	class AreaSeries extends CartesianSeries {
 	    constructor() {
 	        super(...arguments);
 	        this.type = SeriesTypeEnum.area;
 	        this._stack = true;
-	        this._invalidType = 'break';
+	    }
+	    setAttrFromSpec() {
+	        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+	        super.setAttrFromSpec();
+	        const isAreaVisible = ((_a = this._spec.area) === null || _a === void 0 ? void 0 : _a.visible) !== false && ((_c = (_b = this._spec.area) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.visible) !== false;
+	        const isLineVisible = ((_d = this._spec.line) === null || _d === void 0 ? void 0 : _d.visible) !== false && ((_f = (_e = this._spec.line) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.visible) !== false;
+	        const areaSpec = (_g = this._spec.area) !== null && _g !== void 0 ? _g : {};
+	        const lineSpec = (_h = this._spec.line) !== null && _h !== void 0 ? _h : {};
+	        areaSpec.interactive = areaSpec.interactive || lineSpec.interactive;
+	        areaSpec.support3d = areaSpec.support3d || lineSpec.support3d;
+	        areaSpec.zIndex =
+	            isValid(areaSpec.zIndex) || isValid(lineSpec.zIndex)
+	                ? Math.max((_j = areaSpec.zIndex) !== null && _j !== void 0 ? _j : 0, (_k = lineSpec.zIndex) !== null && _k !== void 0 ? _k : 0)
+	                : undefined;
+	        if (areaSpec.style) {
+	            delete areaSpec.style.stroke;
+	        }
+	        if (areaSpec.state) {
+	            Object.keys(areaSpec.state).forEach(state => {
+	                if ('style' in areaSpec.state[state]) {
+	                    delete areaSpec.state[state].style.stroke;
+	                }
+	                else {
+	                    delete areaSpec.state[state].stroke;
+	                }
+	            });
+	        }
+	        let mainSpec = areaSpec;
+	        let subSpec = lineSpec;
+	        const seriesMark = (_l = this._spec.seriesMark) !== null && _l !== void 0 ? _l : 'area';
+	        if (seriesMark === 'line' || (isLineVisible && !isAreaVisible)) {
+	            mainSpec = lineSpec;
+	            subSpec = areaSpec;
+	        }
+	        areaSpec.style = merge$2({}, subSpec.style, mainSpec.style);
+	        areaSpec.state = merge$2({}, subSpec.state, mainSpec.state);
+	        if (!isAreaVisible) {
+	            areaSpec.style.fill = false;
+	        }
+	        if (!isLineVisible) {
+	            areaSpec.style.stroke = false;
+	        }
+	        areaSpec.visible = !(!isAreaVisible && !isLineVisible);
 	    }
 	    initMark() {
 	        var _a, _b, _c, _d;
@@ -67414,9 +67731,8 @@
 	            groupKey: this._seriesField,
 	            defaultMorphElementKey: this.getDimensionField()[0],
 	            progressive,
-	            isSeriesMark: isAreaVisible && seriesMark === 'area'
+	            isSeriesMark: isAreaVisible && seriesMark !== 'point'
 	        });
-	        this.initLineMark(progressive, seriesMark === 'line' || (seriesMark === 'area' && !isAreaVisible));
 	        this.initSymbolMark(progressive, seriesMark === 'point');
 	    }
 	    initMarkStyle() {
@@ -67454,18 +67770,26 @@
 	            }
 	            this.setMarkStyle(areaMark, {
 	                fill: this.getColorAttribute(),
-	                defined: (datum) => {
-	                    if (this._invalidType === 'break') {
-	                        return couldBeValidNumber(datum[this.getStackValueField()]);
-	                    }
-	                    return true;
-	                }
+	                stroke: this.getColorAttribute()
 	            }, 'normal', AttributeLevel.Series);
+	            if (this._invalidType !== 'zero') {
+	                this.setMarkStyle(areaMark, {
+	                    defined: this._getInvalidDefined,
+	                    connectedType: this._getInvalidConnectType()
+	                }, 'normal', AttributeLevel.Series);
+	            }
 	            this.setMarkStyle(areaMark, {
 	                curveType
 	            }, 'normal', AttributeLevel.Built_In);
 	            this._trigger.registerMark(areaMark);
 	            this._tooltipHelper.activeTriggerSet.dimension.add(areaMark);
+	            Object.keys(areaMark.stateStyle).forEach(state => {
+	                if (areaMark.stateStyle[state].stroke) {
+	                    areaMark.setPostProcess('stroke', result => {
+	                        return [result, false, false, false];
+	                    }, state);
+	                }
+	            });
 	        }
 	        this.initLineMarkStyle(this._direction, userCurveType);
 	        this.initSymbolMarkStyle();
@@ -67485,6 +67809,9 @@
 	            this._symbolMark.setAnimationConfig(animationConfig(DEFAULT_MARK_ANIMATION.symbol(), userAnimationConfig(SeriesMarkNameEnum.point, this._spec)));
 	        }
 	    }
+	    initTooltip() {
+	        this._tooltipHelper = new AreaSeriesTooltipHelper(this);
+	    }
 	}
 	AreaSeries.type = SeriesTypeEnum.area;
 	AreaSeries.mark = Object.assign(Object.assign(Object.assign({}, BaseSeries.mark), lineLikeSeriesMarkMap), { [SeriesMarkNameEnum.area]: { name: SeriesMarkNameEnum.area, type: MarkTypeEnum.area } });
@@ -67603,13 +67930,14 @@
 	            }
 	            this.setMarkStyle(areaMark, {
 	                fill: this.getColorAttribute(),
-	                defined: (datum) => {
-	                    if (this._invalidType === 'break') {
-	                        return couldBeValidNumber(datum[this.getStackValueField()]);
-	                    }
-	                    return true;
-	                }
+	                stroke: false
 	            }, 'normal', AttributeLevel.Series);
+	            if (this._invalidType !== 'zero') {
+	                this.setMarkStyle(areaMark, {
+	                    defined: this._getInvalidDefined,
+	                    connectedType: this._getInvalidConnectType()
+	                }, 'normal', AttributeLevel.Series);
+	            }
 	            this.setMarkStyle(areaMark, {
 	                curveType
 	            }, 'normal', AttributeLevel.Built_In);
@@ -67794,6 +68122,7 @@
 	        super(...arguments);
 	        this.type = SeriesTypeEnum.geo;
 	        this.coordinate = 'geo';
+	        this._nameProperty = 'name';
 	    }
 	    getMapViewData() {
 	        var _a;
@@ -67811,6 +68140,9 @@
 	    set valueField(f) {
 	        this._valueField = f;
 	    }
+	    getNameProperty() {
+	        return this._nameProperty;
+	    }
 	    getCoordinateHelper() {
 	        return this._coordinateHelper;
 	    }
@@ -67993,15 +68325,11 @@
 	    constructor() {
 	        super(...arguments);
 	        this.type = SeriesTypeEnum.map;
-	        this._nameProperty = 'name';
 	        this._areaCache = new Map();
 	    }
 	    getNameMap() {
 	        return this._nameMap;
 	    }
-	    getNameProperty() {
-	        return this._nameProperty;
-	    }
 	    setAttrFromSpec() {
 	        super.setAttrFromSpec();
 	        this.map = this._spec.map;
@@ -69350,37 +69678,18 @@
 	        this._viewDataLabel = new SeriesData(this._option, viewDataLabel);
 	    }
 	    initMark() {
-	        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
 	        this._pieMark = this._createMark(Object.assign(Object.assign({}, BasePieSeries.mark.pie), { name: this._pieMarkName, type: this._pieMarkType }), {
 	            morph: shouldDoMorph(this._spec.animation, this._spec.morph, userAnimationConfig(this.type, this._spec)),
 	            defaultMorphElementKey: this._seriesField,
 	            key: DEFAULT_DATA_KEY,
 	            groupKey: this._seriesField,
 	            skipBeforeLayouted: true,
-	            isSeriesMark: true
+	            isSeriesMark: true,
+	            label: merge$2({ animation: this._spec.animation }, this._spec.label)
 	        });
-	        if ((_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.label) === null || _b === void 0 ? void 0 : _b.visible) {
-	            const spec = this.getSpec();
-	            this._labelMark = this._createMark(BasePieSeries.mark.label, {
-	                dataView: this._viewDataLabel.getDataView(),
-	                dataProductId: this._viewDataLabel.getProductId(),
-	                skipBeforeLayouted: true,
-	                themeSpec: (_c = this._theme) === null || _c === void 0 ? void 0 : _c.label,
-	                support3d: (_d = spec === null || spec === void 0 ? void 0 : spec.label) === null || _d === void 0 ? void 0 : _d.support3d,
-	                markSpec: Object.assign({ visible: true }, (_e = this.getSpec()) === null || _e === void 0 ? void 0 : _e.label)
-	            });
-	            this._labelLineMark = this._createMark(BasePieSeries.mark.labelLine, {
-	                dataView: this._viewDataLabel.getDataView(),
-	                dataProductId: this._viewDataLabel.getProductId(),
-	                skipBeforeLayouted: true,
-	                themeSpec: (_g = (_f = this._theme) === null || _f === void 0 ? void 0 : _f.label) === null || _g === void 0 ? void 0 : _g.line,
-	                support3d: (_h = spec === null || spec === void 0 ? void 0 : spec.label) === null || _h === void 0 ? void 0 : _h.support3d,
-	                markSpec: Object.assign({ visible: true }, (_k = (_j = this.getSpec()) === null || _j === void 0 ? void 0 : _j.label) === null || _k === void 0 ? void 0 : _k.line)
-	            });
-	        }
 	    }
 	    initMarkStyle() {
-	        var _a, _b, _c, _d, _e, _f, _g;
+	        var _a;
 	        const pieMark = this._pieMark;
 	        if (pieMark) {
 	            this.setMarkStyle(pieMark, {
@@ -69402,32 +69711,6 @@
 	            this._trigger.registerMark(pieMark);
 	            (_a = this._tooltipHelper) === null || _a === void 0 ? void 0 : _a.activeTriggerSet.mark.add(pieMark);
 	        }
-	        const labelMark = this._labelMark;
-	        if (labelMark) {
-	            this.setMarkStyle(labelMark, {
-	                visible: field$2(DEFAULT_LABEL_VISIBLE).bind(this),
-	                x: field$2(DEFAULT_LABEL_X).bind(this),
-	                y: field$2(DEFAULT_LABEL_Y).bind(this),
-	                text: field$2(DEFAULT_LABEL_TEXT).bind(this),
-	                fill: ((_c = (_b = this._spec.label) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.fill) || this.getColorAttribute(),
-	                textAlign: field$2(DEFAULT_LABEL_ALIGN).bind(this),
-	                textBaseline: ((_d = this._spec.label) === null || _d === void 0 ? void 0 : _d.position) === 'inside' ? 'middle' : 'top',
-	                angle: (datum) => {
-	                    var _a;
-	                    const angle = datum[ARC_MIDDLE_ANGLE];
-	                    return ((_a = this._spec.label) === null || _a === void 0 ? void 0 : _a.position) === 'inside' ? degrees(angle) : 0;
-	                },
-	                limit: field$2(DEFAULT_LABEL_LIMIT).bind(this)
-	            }, undefined, AttributeLevel.User_Mark);
-	            this._trigger.registerMark(labelMark);
-	        }
-	        const labelLineMark = this._labelLineMark;
-	        if (labelLineMark) {
-	            this.setMarkStyle(labelLineMark, Object.assign({ visible: field$2(DEFAULT_LABEL_VISIBLE).bind(this), stroke: ((_g = (_f = (_e = this._spec.label) === null || _e === void 0 ? void 0 : _e.line) === null || _f === void 0 ? void 0 : _f.style) === null || _g === void 0 ? void 0 : _g.stroke) || this.getColorAttribute(), lineWidth: 1 }, this.generateLinePath('normal')));
-	            this.setMarkStyle(labelLineMark, this.generateLinePath('hover'), 'hover');
-	            this.setMarkStyle(labelLineMark, this.generateLinePath('selected'), 'selected');
-	            this._trigger.registerMark(labelLineMark);
-	        }
 	    }
 	    initMarkStyleWithSpec(mark, spec, key) {
 	        super.initMarkStyleWithSpec(mark, spec, key);
@@ -69440,6 +69723,22 @@
 	            }
 	        }
 	    }
+	    initLabelMarkStyle(textMark) {
+	        var _a, _b, _c, _d, _e, _f;
+	        if (!textMark) {
+	            return;
+	        }
+	        this.setMarkStyle(textMark, {
+	            visible: field$2(DEFAULT_LABEL_VISIBLE).bind(this),
+	            text: (datum) => {
+	                return datum[this.getDimensionField()[0]];
+	            },
+	            fill: ((_b = (_a = this._spec.label) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fill) || this.getColorAttribute(),
+	            angle: (_d = (_c = this._spec.label) === null || _c === void 0 ? void 0 : _c.style) === null || _d === void 0 ? void 0 : _d.angle,
+	            limit: (_f = (_e = this._spec.label) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.limit,
+	            z: this.dataToPositionZ.bind(this)
+	        });
+	    }
 	    afterInitMark() {
 	        super.afterInitMark();
 	        this._trigger.setStateKeys([this._seriesField, ...this._radiusField]);
@@ -69585,12 +69884,6 @@
 	            }
 	            this._pieMark.setAnimationConfig(pieAnimationConfig);
 	        }
-	        if (this._labelMark) {
-	            this._labelMark.setAnimationConfig(animationConfig(DEFAULT_MARK_ANIMATION.label(), userAnimationConfig(SeriesMarkNameEnum.label, this._spec)));
-	            if (this._labelLineMark) {
-	                this._labelLineMark.setAnimationConfig(animationConfig(DEFAULT_MARK_ANIMATION.label(), userAnimationConfig(SeriesMarkNameEnum.labelLine, this._spec)));
-	            }
-	        }
 	    }
 	    getDefaultShapeType() {
 	        return 'square';
@@ -69720,7 +70013,6 @@
 	    constructor() {
 	        super(...arguments);
 	        this.type = SeriesTypeEnum.scatter;
-	        this._invalidType = 'break';
 	    }
 	    setAttrFromSpec() {
 	        super.setAttrFromSpec();
@@ -69840,14 +70132,11 @@
 	        if (!symbolMark) {
 	            return;
 	        }
-	        this.setMarkStyle(symbolMark, {
-	            visible: (datum) => {
-	                if (this._invalidType === 'break') {
-	                    return couldBeValidNumber(datum[this.getStackValueField()]);
-	                }
-	                return true;
-	            }
-	        });
+	        if (this._invalidType !== 'zero') {
+	            this.setMarkStyle(symbolMark, {
+	                visible: this._getInvalidDefined
+	            });
+	        }
 	        this.setMarkStyle(symbolMark, {
 	            x: this.dataToPositionX.bind(this),
 	            y: this.dataToPositionY.bind(this),
@@ -69878,14 +70167,13 @@
 	            text: (datum) => {
 	                return datum[this.getStackValueField()];
 	            },
-	            visible: (datum) => {
-	                if (this._invalidType === 'break') {
-	                    return couldBeValidNumber(datum[this.getStackValueField()]);
-	                }
-	                return true;
-	            },
 	            z: this.dataToPositionZ.bind(this)
 	        }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series);
+	        if (this._invalidType !== 'zero') {
+	            this.setMarkStyle(labelMark, {
+	                visible: this._getInvalidDefined
+	            }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series);
+	        }
 	    }
 	    handleZoom(e) {
 	        this.getMarksWithoutRoot().forEach(mark => {
@@ -69980,29 +70268,19 @@
 	    }
 	    initMark() {
 	        this.initRoseMark();
-	        this.initLabelMark();
 	    }
 	    initMarkStyle() {
 	        this.initRoseMarkStyle();
-	        this.initLabelMarkStyle();
 	    }
 	    initRoseMark() {
 	        this._roseMark = this._createMark(RoseSeries.mark.rose, {
 	            morph: shouldDoMorph(this._spec.animation, this._spec.morph, userAnimationConfig('rose', this._spec)),
 	            defaultMorphElementKey: this.getDimensionField()[0],
 	            groupKey: this._seriesField,
-	            isSeriesMark: true
+	            isSeriesMark: true,
+	            label: merge$2({ animation: this._spec.animation }, this._spec.label)
 	        });
 	    }
-	    initLabelMark() {
-	        var _a, _b, _c, _d;
-	        if ((_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.label) === null || _b === void 0 ? void 0 : _b.visible) {
-	            this._labelMark = this._createMark(RoseSeries.mark.label, {
-	                themeSpec: (_c = this._theme) === null || _c === void 0 ? void 0 : _c.label,
-	                markSpec: Object.assign({ visible: true }, (_d = this.getSpec()) === null || _d === void 0 ? void 0 : _d.label)
-	            });
-	        }
-	    }
 	    getRoseAngle() {
 	        var _a, _b, _c;
 	        const angleBandWidth = (_c = (_b = (_a = this.angleAxisHelper).getBandwidth) === null || _b === void 0 ? void 0 : _b.call(_a, this._groups ? this._groups.fields.length - 1 : 0)) !== null && _c !== void 0 ? _c : DefaultBandWidth$1;
@@ -70037,35 +70315,21 @@
 	            (_a = this._tooltipHelper) === null || _a === void 0 ? void 0 : _a.activeTriggerSet.mark.add(roseMark);
 	        }
 	    }
-	    initLabelMarkStyle() {
-	        var _a, _b;
-	        const labelMark = this._labelMark;
-	        if (labelMark) {
-	            let angle = 0;
-	            let radius = 0;
-	            this.setMarkStyle(labelMark, {
-	                visible: true,
-	                x: (datum) => {
-	                    var _a, _b;
-	                    const baseAngle = this.angleAxisHelper.dataToPosition(this.getDatumPositionValues(datum, this.getGroupFields()));
-	                    const bandAngle = this.angleAxisHelper.getBandwidth(0) * 0.5;
-	                    const startAngle = baseAngle - bandAngle;
-	                    const endAngle = baseAngle + this.getRoseAngle() - bandAngle;
-	                    angle = (startAngle + endAngle) / 2;
-	                    radius =
-	                        valueInScaleRange(this.radiusAxisHelper.dataToPosition([datum[this._radiusField[0]]]), this.radiusAxisHelper.getScale(0)) -
-	                            (((_b = (_a = this._spec.label) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.size) || 10) / 2;
-	                    return this.angleAxisHelper.center().x + radius * Math.cos(angle);
-	                },
-	                y: () => this.angleAxisHelper.center().y + radius * Math.sin(angle),
-	                text: (datum) => {
-	                    return datum[this._radiusField[0]];
-	                },
-	                stroke: ((_b = (_a = this._spec.label) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.stroke) || this.getColorAttribute(),
-	                angle: () => { var _a, _b, _c; return (((_b = (_a = this._spec.label) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.angle) || ((_c = degrees(angle)) !== null && _c !== void 0 ? _c : 0) + 90); }
-	            }, undefined, AttributeLevel.User_Mark);
-	            this._trigger.registerMark(labelMark);
+	    initLabelMarkStyle(textMark) {
+	        var _a, _b, _c, _d, _e, _f, _g, _h;
+	        if (!textMark) {
+	            return;
 	        }
+	        this.setMarkStyle(textMark, {
+	            visible: (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.label) === null || _b === void 0 ? void 0 : _b.visible,
+	            text: (datum) => {
+	                return datum[this.getDimensionField()[0]];
+	            },
+	            fill: ((_d = (_c = this._spec.label) === null || _c === void 0 ? void 0 : _c.style) === null || _d === void 0 ? void 0 : _d.fill) || this.getColorAttribute(),
+	            angle: (_f = (_e = this._spec.label) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.angle,
+	            limit: (_h = (_g = this._spec.label) === null || _g === void 0 ? void 0 : _g.style) === null || _h === void 0 ? void 0 : _h.limit,
+	            z: 0
+	        });
 	    }
 	    initAnimation() {
 	        var _a, _b;
@@ -70595,6 +70859,9 @@
 	    _getDataIdKey() {
 	        return undefined;
 	    }
+	    getStackValueField() {
+	        return null;
+	    }
 	}
 	DotSeries.type = SeriesTypeEnum.dot;
 	DotSeries.mark = Object.assign(Object.assign({}, BaseSeries.mark), { [SeriesMarkNameEnum.group]: { name: SeriesMarkNameEnum.group, type: MarkTypeEnum.group }, [SeriesMarkNameEnum.grid]: { name: SeriesMarkNameEnum.grid, type: MarkTypeEnum.rule }, [SeriesMarkNameEnum.gridBackground]: { name: SeriesMarkNameEnum.gridBackground, type: MarkTypeEnum.rect }, [SeriesMarkNameEnum.dot]: { name: SeriesMarkNameEnum.dot, type: MarkTypeEnum.symbol }, [SeriesMarkNameEnum.title]: { name: SeriesMarkNameEnum.title, type: MarkTypeEnum.text }, [SeriesMarkNameEnum.subTitle]: { name: SeriesMarkNameEnum.subTitle, type: MarkTypeEnum.text }, [SeriesMarkNameEnum.symbol]: { name: SeriesMarkNameEnum.symbol, type: MarkTypeEnum.symbol } });
@@ -71457,7 +71724,7 @@
 	class BaseLayout {
 	  constructor(options) {
 	    var _a, _b;
-	    switch (this.options = Object.assign({}, BaseLayout.defaultOptions, options), isFunction(this.options.shape) ? this.shape = this.options.shape : this.shape = getShapeFunction(this.options.shape), this.getText = null !== (_a = functor$1(this.options.text)) && void 0 !== _a ? _a : d => d, this.getTextFontWeight = functor$1(this.options.fontWeight), this.getTextFontSize = functor$1(this.options.fontSize), this.getTextFontStyle = functor$1(this.options.fontStyle), this.getTextFontFamily = functor$1(this.options.fontFamily), this.outputCallback = null !== (_b = this.options.outputCallback) && void 0 !== _b ? _b : res => res, this.options.color) {
+	    switch (this.options = merge$2({}, BaseLayout.defaultOptions, options), isFunction(this.options.shape) ? this.shape = this.options.shape : this.shape = getShapeFunction(this.options.shape), this.getText = null !== (_a = functor$1(this.options.text)) && void 0 !== _a ? _a : d => d, this.getTextFontWeight = functor$1(this.options.fontWeight), this.getTextFontSize = functor$1(this.options.fontSize), this.getTextFontStyle = functor$1(this.options.fontStyle), this.getTextFontFamily = functor$1(this.options.fontFamily), this.outputCallback = null !== (_b = this.options.outputCallback) && void 0 !== _b ? _b : res => res, this.options.color) {
 	      case "random-dark":
 	        this.getTextColor = () => randomHslColor(10, 50);
 	        break;
@@ -71569,7 +71836,7 @@
 	class CloudLayout extends BaseLayout {
 	  constructor(options) {
 	    var _a;
-	    super(Object.assign({}, CloudLayout.defaultOptions, options)), this.cw = 64, this.ch = 2048, this._size = [256, 256], this._isBoardExpandCompleted = !1, this._placeStatus = 0, this._tTemp = null, this._dtTemp = null, this._dy = 0, this.cacheMap = new Map(), this.options.minFontSize <= CloudLayout.defaultOptions.minFontSize && (this.options.minFontSize = CloudLayout.defaultOptions.minFontSize), this.spiral = isString(this.options.spiral) ? null !== (_a = spirals[this.options.spiral]) && void 0 !== _a ? _a : spirals.archimedean : this.options.spiral, this.random = this.options.random ? Math.random : () => 1, this.getTextPadding = functor$1(this.options.padding);
+	    super(merge$2({}, CloudLayout.defaultOptions, options)), this.cw = 64, this.ch = 2048, this._size = [256, 256], this._isBoardExpandCompleted = !1, this._placeStatus = 0, this._tTemp = null, this._dtTemp = null, this._dy = 0, this.cacheMap = new Map(), this.options.minFontSize <= CloudLayout.defaultOptions.minFontSize && (this.options.minFontSize = CloudLayout.defaultOptions.minFontSize), this.spiral = isString(this.options.spiral) ? null !== (_a = spirals[this.options.spiral]) && void 0 !== _a ? _a : spirals.archimedean : this.options.spiral, this.random = this.options.random ? Math.random : () => 1, this.getTextPadding = functor$1(this.options.padding);
 	  }
 	  zoomRatio() {
 	    return this._originSize[0] / this._size[0];
@@ -71912,7 +72179,7 @@
 
 	let GridLayout$1 = class GridLayout extends BaseLayout {
 	  constructor(options) {
-	    super(Object.assign({}, GridLayout.defaultOptions, options)), this.fillGridAt = (x, y) => {
+	    super(merge$2({}, GridLayout.defaultOptions, options)), this.fillGridAt = (x, y) => {
 	      x >= this.ngx || y >= this.ngy || x < 0 || y < 0 || (this.grid[x][y] = !1);
 	    }, this.updateGrid = (gx, gy, gw, gh, info) => {
 	      const occupied = info.occupied;
@@ -72103,7 +72370,7 @@
 
 	class FastLayout extends BaseLayout {
 	  constructor(options) {
-	    super(Object.assign({}, FastLayout.defaultOptions, options)), this.random = this.options.random ? Math.random : () => 0, this.aspectRatio = 1;
+	    super(merge$2({}, FastLayout.defaultOptions, options)), this.random = this.options.random ? Math.random : () => 0, this.aspectRatio = 1;
 	  }
 	  fit(word) {
 	    for (let i = 0, len = this.result.length; i < len; i++) if (isOverlap(word, this.result[i])) return !1;
@@ -72301,7 +72568,7 @@
 	  return length;
 	};
 	function loadImage(url) {
-	  return isValidUrl(url) ? new Promise((resolve, reject) => {
+	  return url && (isValidUrl(url) || isBase64(url) || url.startsWith("<svg")) ? new Promise((resolve, reject) => {
 	    const imageMark = createImage({
 	      image: url
 	    });
@@ -72322,7 +72589,7 @@
 	  };
 	}
 
-	var __awaiter$2 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+	var __awaiter$1 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
 	  return new (P || (P = Promise))(function (resolve, reject) {
 	    function fulfilled(value) {
 	      try {
@@ -72347,121 +72614,119 @@
 	    step((generator = generator.apply(thisArg, _arguments || [])).next());
 	  });
 	};
-	function segmentation(segmentationInput) {
-	  return __awaiter$2(this, void 0, void 0, function* () {
-	    const {
-	      shapeUrl: shapeUrl,
+	function loadAndHandleImage(segmentationInput) {
+	  return __awaiter$1(this, void 0, void 0, function* () {
+	    const shapeImage = yield loadImage(segmentationInput.shapeUrl);
+	    return segmentationInput.removeWhiteBorder && shapeImage ? removeBorder(shapeImage, segmentationInput.tempCanvas, segmentationInput.tempCtx) : shapeImage;
+	  });
+	}
+	function segmentation(shapeImage, segmentationInput) {
+	  const {
 	      size: size,
 	      tempCanvas: tempCanvas,
-	      tempCtx: ctx,
-	      removeWhiteBorder: removeWhiteBorder
-	    } = segmentationInput;
-	    let shapeImage = yield loadImage(shapeUrl);
-	    removeWhiteBorder && (shapeImage = yield removeBorder(shapeImage, tempCanvas, ctx));
-	    const shapeConfig = scaleAndMiddleShape(shapeImage, size);
-	    tempCanvas.width = size[0], tempCanvas.height = size[1], ctx.clearRect(0, 0, tempCanvas.width, tempCanvas.height), ctx.drawImage(shapeImage, shapeConfig.x, shapeConfig.y, shapeConfig.width, shapeConfig.height);
-	    const imageData = ctx.getImageData(0, 0, size[0], size[1]),
-	      labels = new Array(size[0] * size[1]).fill(0);
-	    let curLabel = 1;
+	      tempCtx: ctx
+	    } = segmentationInput,
+	    shapeConfig = scaleAndMiddleShape(shapeImage, size);
+	  tempCanvas.width = size[0], tempCanvas.height = size[1], ctx.clearRect(0, 0, tempCanvas.width, tempCanvas.height), ctx.drawImage(shapeImage, shapeConfig.x, shapeConfig.y, shapeConfig.width, shapeConfig.height);
+	  const imageData = ctx.getImageData(0, 0, size[0], size[1]),
+	    labels = new Array(size[0] * size[1]).fill(0);
+	  let curLabel = 1;
+	  const offset = [[0, 1], [1, 0], [-1, 0], [0, -1]];
+	  let queue = [];
+	  for (let i = 0; i < size[1]; i++) for (let j = 0; j < size[0]; j++) if (0 === labels[i * size[0] + j] && !isEmptyPixel(imageData, i, j)) {
+	    labels[i * size[0] + j] = curLabel, queue.push([i, j]);
+	    for (let k = 0; k < queue.length; k++) for (let m = 0; m < 4; m++) {
+	      let row = queue[k][0] + offset[m][0],
+	        col = queue[k][1] + offset[m][1];
+	      row = row < 0 ? 0 : row >= size[1] ? size[1] - 1 : row, col = col < 0 ? 0 : col >= size[0] ? size[0] - 1 : col, 0 !== labels[row * size[0] + col] || isEmptyPixel(imageData, row, col) || (labels[row * size[0] + col] = curLabel, queue.push([row, col]));
+	    }
+	    curLabel++, queue = [];
+	  }
+	  const boundaries = {},
+	    areas = {},
+	    centers = {},
+	    maxPoints = {},
+	    maxR = {},
+	    ratios = {},
+	    shapeBounds = {
+	      x1: 1 / 0,
+	      x2: -1 / 0,
+	      y1: 1 / 0,
+	      y2: -1 / 0,
+	      width: 0,
+	      height: 0
+	    };
+	  for (let i = 0; i < size[1]; i++) for (let j = 0; j < size[0]; j++) {
+	    const label = labels[i * size[0] + j];
+	    0 !== label && (isBoundaryPixel(i, j) && (boundaries[label] = boundaries[label] || [], boundaries[label].push([j, i]), maxPoints[label] || (maxPoints[label] = [1 / 0, -1 / 0, 1 / 0, -1 / 0]), i < maxPoints[label][0] && (maxPoints[label][0] = i), i > maxPoints[label][1] && (maxPoints[label][1] = i), j < maxPoints[label][2] && (maxPoints[label][2] = j), j > maxPoints[label][3] && (maxPoints[label][3] = j), j < shapeBounds.x1 && (shapeBounds.x1 = j), j > shapeBounds.x2 && (shapeBounds.x2 = j), i < shapeBounds.y1 && (shapeBounds.y1 = i), i > shapeBounds.y2 && (shapeBounds.y2 = i)), areas[label] = areas[label] || 0, areas[label]++);
+	  }
+	  const allBoundaries = [];
+	  for (const label in boundaries) {
+	    const boundary = boundaries[label],
+	      x = ~~(boundary.reduce((acc, cur) => acc + cur[0], 0) / boundary.length),
+	      y = ~~(boundary.reduce((acc, cur) => acc + cur[1], 0) / boundary.length);
+	    centers[label] = [x, y], allBoundaries.push(...boundary);
+	    const [yMin, yMax, xMin, xMax] = maxPoints[label];
+	    maxR[label] = ~~Math.max(Math.sqrt((x - xMin) ** 2 + (y - yMin) ** 2), Math.sqrt((x - xMax) ** 2 + (y - yMax) ** 2), Math.sqrt((x - xMin) ** 2 + (y - yMax) ** 2), Math.sqrt((x - xMax) ** 2 + (y - yMin) ** 2)), ratios[label] = (xMax - xMin) / (yMax - yMin);
+	  }
+	  const regions = Object.keys(centers).map(key => ({
+	    label: key - 1,
+	    boundary: boundaries[key],
+	    area: areas[key],
+	    center: centers[key],
+	    maxPoint: maxPoints[key],
+	    maxR: maxR[key],
+	    ratio: ratios[key]
+	  }));
+	  shapeBounds.width = shapeBounds.x2 - shapeBounds.x1 + 1, shapeBounds.height = shapeBounds.y2 - shapeBounds.y1 + 1;
+	  const x = ~~(allBoundaries.reduce((acc, cur) => acc + cur[0], 0) / allBoundaries.length),
+	    y = ~~(allBoundaries.reduce((acc, cur) => acc + cur[1], 0) / allBoundaries.length),
+	    shapeMaxR = ~~Math.max(Math.sqrt((x - shapeBounds.x1) ** 2 + (y - shapeBounds.y1) ** 2), Math.sqrt((x - shapeBounds.x2) ** 2 + (y - shapeBounds.y2) ** 2), Math.sqrt((x - shapeBounds.x1) ** 2 + (y - shapeBounds.y2) ** 2), Math.sqrt((x - shapeBounds.x2) ** 2 + (y - shapeBounds.y1) ** 2)),
+	    shapeRatio = shapeBounds.width / shapeBounds.height,
+	    shapeArea = Object.keys(areas).reduce((acc, key) => acc + areas[key], 0),
+	    segmentation = {
+	      regions: regions,
+	      labels: labels,
+	      labelNumber: curLabel - 1
+	    };
+	  return Object.assign(segmentationInput, {
+	    segmentation: segmentation,
+	    shapeConfig: shapeConfig,
+	    shapeBounds: shapeBounds,
+	    shapeMaxR: shapeMaxR,
+	    shapeRatio: shapeRatio,
+	    shapeCenter: [x, y],
+	    shapeArea: shapeArea
+	  });
+	  function isBoundaryPixel(i, j) {
 	    const offset = [[0, 1], [1, 0], [-1, 0], [0, -1]];
-	    let queue = [];
-	    for (let i = 0; i < size[1]; i++) for (let j = 0; j < size[0]; j++) if (0 === labels[i * size[0] + j] && !isEmptyPixel(imageData, i, j)) {
-	      labels[i * size[0] + j] = curLabel, queue.push([i, j]);
-	      for (let k = 0; k < queue.length; k++) for (let m = 0; m < 4; m++) {
-	        let row = queue[k][0] + offset[m][0],
-	          col = queue[k][1] + offset[m][1];
-	        row = row < 0 ? 0 : row >= size[1] ? size[1] - 1 : row, col = col < 0 ? 0 : col >= size[0] ? size[0] - 1 : col, 0 !== labels[row * size[0] + col] || isEmptyPixel(imageData, row, col) || (labels[row * size[0] + col] = curLabel, queue.push([row, col]));
-	      }
-	      curLabel++, queue = [];
-	    }
-	    const boundaries = {},
-	      areas = {},
-	      centers = {},
-	      maxPoints = {},
-	      maxR = {},
-	      ratios = {},
-	      shapeBounds = {
-	        x1: 1 / 0,
-	        x2: -1 / 0,
-	        y1: 1 / 0,
-	        y2: -1 / 0,
-	        width: 0,
-	        height: 0
-	      };
-	    for (let i = 0; i < size[1]; i++) for (let j = 0; j < size[0]; j++) {
-	      const label = labels[i * size[0] + j];
-	      0 !== label && (isBoundaryPixel(i, j) && (boundaries[label] = boundaries[label] || [], boundaries[label].push([j, i]), maxPoints[label] || (maxPoints[label] = [1 / 0, -1 / 0, 1 / 0, -1 / 0]), i < maxPoints[label][0] && (maxPoints[label][0] = i), i > maxPoints[label][1] && (maxPoints[label][1] = i), j < maxPoints[label][2] && (maxPoints[label][2] = j), j > maxPoints[label][3] && (maxPoints[label][3] = j), j < shapeBounds.x1 && (shapeBounds.x1 = j), j > shapeBounds.x2 && (shapeBounds.x2 = j), i < shapeBounds.y1 && (shapeBounds.y1 = i), i > shapeBounds.y2 && (shapeBounds.y2 = i)), areas[label] = areas[label] || 0, areas[label]++);
-	    }
-	    const allBoundaries = [];
-	    for (const label in boundaries) {
-	      const boundary = boundaries[label],
-	        x = ~~(boundary.reduce((acc, cur) => acc + cur[0], 0) / boundary.length),
-	        y = ~~(boundary.reduce((acc, cur) => acc + cur[1], 0) / boundary.length);
-	      centers[label] = [x, y], allBoundaries.push(...boundary);
-	      const [yMin, yMax, xMin, xMax] = maxPoints[label];
-	      maxR[label] = ~~Math.max(Math.sqrt((x - xMin) ** 2 + (y - yMin) ** 2), Math.sqrt((x - xMax) ** 2 + (y - yMax) ** 2), Math.sqrt((x - xMin) ** 2 + (y - yMax) ** 2), Math.sqrt((x - xMax) ** 2 + (y - yMin) ** 2)), ratios[label] = (xMax - xMin) / (yMax - yMin);
-	    }
-	    const regions = Object.keys(centers).map(key => ({
-	      label: key - 1,
-	      boundary: boundaries[key],
-	      area: areas[key],
-	      center: centers[key],
-	      maxPoint: maxPoints[key],
-	      maxR: maxR[key],
-	      ratio: ratios[key]
-	    }));
-	    shapeBounds.width = shapeBounds.x2 - shapeBounds.x1 + 1, shapeBounds.height = shapeBounds.y2 - shapeBounds.y1 + 1;
-	    const x = ~~(allBoundaries.reduce((acc, cur) => acc + cur[0], 0) / allBoundaries.length),
-	      y = ~~(allBoundaries.reduce((acc, cur) => acc + cur[1], 0) / allBoundaries.length),
-	      shapeMaxR = ~~Math.max(Math.sqrt((x - shapeBounds.x1) ** 2 + (y - shapeBounds.y1) ** 2), Math.sqrt((x - shapeBounds.x2) ** 2 + (y - shapeBounds.y2) ** 2), Math.sqrt((x - shapeBounds.x1) ** 2 + (y - shapeBounds.y2) ** 2), Math.sqrt((x - shapeBounds.x2) ** 2 + (y - shapeBounds.y1) ** 2)),
-	      shapeRatio = shapeBounds.width / shapeBounds.height,
-	      shapeArea = Object.keys(areas).reduce((acc, key) => acc + areas[key], 0),
-	      segmentation = {
-	        regions: regions,
-	        labels: labels,
-	        labelNumber: curLabel - 1
-	      };
-	    return Object.assign(segmentationInput, {
-	      segmentation: segmentation,
-	      shapeConfig: shapeConfig,
-	      shapeBounds: shapeBounds,
-	      shapeMaxR: shapeMaxR,
-	      shapeRatio: shapeRatio,
-	      shapeCenter: [x, y],
-	      shapeArea: shapeArea
-	    });
-	    function isBoundaryPixel(i, j) {
-	      const offset = [[0, 1], [1, 0], [-1, 0], [0, -1]];
-	      if (0 === i || 0 === j || i === size[1] - 1 || j === size[0] - 1) return !0;
-	      for (let k = 0; k < 4; k++) {
-	        let row = i + offset[k][0],
-	          col = j + offset[k][1];
-	        if (row = row < 0 ? 0 : row >= size[1] ? size[1] - 1 : row, col = col < 0 ? 0 : col >= size[0] ? size[0] - 1 : col, 0 === labels[row * size[0] + col]) return !0;
-	      }
-	      return !1;
+	    if (0 === i || 0 === j || i === size[1] - 1 || j === size[0] - 1) return !0;
+	    for (let k = 0; k < 4; k++) {
+	      let row = i + offset[k][0],
+	        col = j + offset[k][1];
+	      if (row = row < 0 ? 0 : row >= size[1] ? size[1] - 1 : row, col = col < 0 ? 0 : col >= size[0] ? size[0] - 1 : col, 0 === labels[row * size[0] + col]) return !0;
 	    }
-	  });
+	    return !1;
+	  }
 	}
 	function isEmptyPixel(imageData, i, j) {
 	  const width = imageData.width;
 	  return 0 === imageData.data[i * width * 4 + 4 * j + 3] || 255 === imageData.data[i * width * 4 + 4 * j + 0] && 255 === imageData.data[i * width * 4 + 4 * j + 1] && 255 === imageData.data[i * width * 4 + 4 * j + 2];
 	}
 	function removeBorder(image, canvas, ctx) {
-	  return __awaiter$2(this, void 0, void 0, function* () {
-	    canvas.width = image.width, canvas.height = image.height, ctx.clearRect(0, 0, canvas.width, canvas.height), ctx.drawImage(image, 0, 0);
-	    const width = canvas.width,
-	      imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-	    let top = 0,
-	      bottom = imageData.height,
-	      left = 0,
-	      right = imageData.width;
-	    for (; top < bottom && rowBlank(imageData, width, top);) ++top;
-	    for (; bottom - 1 > top && rowBlank(imageData, width, bottom - 1);) --bottom;
-	    for (; left < right && columnBlank(imageData, width, left, top, bottom);) ++left;
-	    for (; right - 1 > left && columnBlank(imageData, width, right - 1, top, bottom);) --right;
-	    const trimmed = ctx.getImageData(left, top, right - left, bottom - top);
-	    return canvas.width = trimmed.width, canvas.height = trimmed.height, ctx.clearRect(0, 0, canvas.width, canvas.height), ctx.putImageData(trimmed, 0, 0), yield loadImage(canvas.toDataURL("imgage/png"));
-	  });
+	  canvas.width = image.width, canvas.height = image.height, ctx.clearRect(0, 0, canvas.width, canvas.height), ctx.drawImage(image, 0, 0);
+	  const width = canvas.width,
+	    imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+	  let top = 0,
+	    bottom = imageData.height,
+	    left = 0,
+	    right = imageData.width;
+	  for (; top < bottom && rowBlank(imageData, width, top);) ++top;
+	  for (; bottom - 1 > top && rowBlank(imageData, width, bottom - 1);) --bottom;
+	  for (; left < right && columnBlank(imageData, width, left, top, bottom);) ++left;
+	  for (; right - 1 > left && columnBlank(imageData, width, right - 1, top, bottom);) --right;
+	  const trimmed = ctx.getImageData(left, top, right - left, bottom - top);
+	  return canvas.width = trimmed.width, canvas.height = trimmed.height, ctx.clearRect(0, 0, canvas.width, canvas.height), ctx.putImageData(trimmed, 0, 0), canvas;
 	}
 	function rowBlank(imageData, width, y) {
 	  for (let x = 0; x < width; ++x) if (!isEmptyPixel(imageData, y, x)) return !1;
@@ -72969,44 +73234,17 @@
 	  }
 	}
 
-	var __awaiter$1 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
-	  return new (P || (P = Promise))(function (resolve, reject) {
-	    function fulfilled(value) {
-	      try {
-	        step(generator.next(value));
-	      } catch (e) {
-	        reject(e);
-	      }
-	    }
-	    function rejected(value) {
-	      try {
-	        step(generator.throw(value));
-	      } catch (e) {
-	        reject(e);
-	      }
-	    }
-	    function step(result) {
-	      var value;
-	      result.done ? resolve(result.value) : (value = result.value, value instanceof P ? value : new P(function (resolve) {
-	        resolve(value);
-	      })).then(fulfilled, rejected);
-	    }
-	    step((generator = generator.apply(thisArg, _arguments || [])).next());
-	  });
-	};
 	function cloud (words, layoutConfig, segmentationOutput) {
-	  return __awaiter$1(this, void 0, void 0, function* () {
-	    allocateWords(words, segmentationOutput), "ensureMapping" === layoutConfig.layoutMode ? layoutGlobalShrink(words, layoutConfig, segmentationOutput) : "ensureMappingEnlarge" === layoutConfig.layoutMode ? layoutSelfEnlarge(words, layoutConfig, segmentationOutput) : layout(words, layoutConfig, segmentationOutput);
-	    const fillingWords = filling(words, layoutConfig, segmentationOutput),
-	      failedWords = [],
-	      successedWords = [];
-	    for (let i = 0; i < words.length; i++) words[i].hasPlaced ? successedWords.push(words[i]) : failedWords.push(words[i]);
-	    return failedWords.forEach(word => word.visible = !1), {
-	      fillingWords: fillingWords,
-	      successedWords: successedWords,
-	      failedWords: failedWords
-	    };
-	  });
+	  allocateWords(words, segmentationOutput), "ensureMapping" === layoutConfig.layoutMode ? layoutGlobalShrink(words, layoutConfig, segmentationOutput) : "ensureMappingEnlarge" === layoutConfig.layoutMode ? layoutSelfEnlarge(words, layoutConfig, segmentationOutput) : layout(words, layoutConfig, segmentationOutput);
+	  const fillingWords = filling(words, layoutConfig, segmentationOutput),
+	    failedWords = [],
+	    successedWords = [];
+	  for (let i = 0; i < words.length; i++) words[i].hasPlaced ? successedWords.push(words[i]) : failedWords.push(words[i]);
+	  return failedWords.forEach(word => word.visible = !1), {
+	    fillingWords: fillingWords,
+	    successedWords: successedWords,
+	    failedWords: failedWords
+	  };
 	}
 
 	var __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
@@ -73049,7 +73287,9 @@
 	};
 	const transform$1 = (options, upstreamData, parameters, view) => __awaiter(void 0, void 0, void 0, function* () {
 	  var _a, _b, _c;
-	  if (options.size && (!options.size[0] || !options.size[1])) return upstreamData;
+	  if (!options.size || options.size[0] <= 0 || options.size[1] <= 0) {
+	    return Logger.getInstance().info("Wordcloud size dimensions must be greater than 0"), [];
+	  }
 	  options.shape || error("WordcloudShape shape must be specified."), options.text || error("WordcloudShape text must be specified."), (null == view ? void 0 : view.emit) && view.emit(WORDCLOUD_SHAPE_HOOK_EVENT.BEFORE_WORDCLOUD_SHAPE_LAYOUT);
 	  const data = upstreamData,
 	    as = options.as || OUTPUT;
@@ -73073,7 +73313,9 @@
 	  tempCtx.textAlign = "center", tempCtx.textBaseline = "middle", segmentationInput.tempCanvas = tempCanvas, segmentationInput.tempCtx = tempCtx;
 	  const boardW = options.size[0] + 31 >> 5 << 5;
 	  segmentationInput.boardSize = [boardW, options.size[1]], segmentationInput.random ? segmentationInput.randomGenerator = Math.random : segmentationInput.randomGenerator = fakeRandom();
-	  const segmentationOutput = yield segmentation(segmentationInput),
+	  const shapeImage = yield loadAndHandleImage(segmentationInput);
+	  if (!shapeImage) return [];
+	  const segmentationOutput = segmentation(shapeImage, segmentationInput),
 	    colorMode = options.colorMode || "ordinal",
 	    wordsConfig = {
 	      getText: field(options.text),
@@ -73166,17 +73408,17 @@
 	    fillingWords: fillingWords,
 	    successedWords: successedWords,
 	    failedWords: failedWords
-	  } = yield cloud(words, layoutConfig, segmentationOutput);
+	  } = cloud(words, layoutConfig, segmentationOutput);
 	  let w, t;
 	  const modKeywords = [];
-	  for (let i = 0; i < words.length; ++i) w = words[i], t = w.datum, t[as.x] = w.x, t[as.y] = w.y, t[as.fontFamily] = w.fontFamily, t[as.fontSize] = w.fontSize, t[as.fontStyle] = w.fontStyle, t[as.fontWeight] = w.fontWeight, t[as.angle] = w.rotate, t[as.opacity] = w.opacity, t[as.visible] = w.visible, t[as.isFillingWord] = !1, t[as.color] = w.color, modKeywords.push(t);
+	  for (let i = 0; i < words.length; ++i) w = words[i], t = w.datum, t[as.x] = w.x, t[as.y] = w.y, t[as.fontFamily] = w.fontFamily, t[as.fontSize] = w.fontSize, t[as.fontStyle] = w.fontStyle, t[as.fontWeight] = w.fontWeight, t[as.angle] = degreeToRadian(w.rotate), t[as.opacity] = w.opacity, t[as.visible] = w.visible, t[as.isFillingWord] = !1, t[as.color] = w.color, modKeywords.push(t);
 	  const textKey = null !== (_b = null === (_a = options.text) || void 0 === _a ? void 0 : _a.field) && void 0 !== _b ? _b : "textKey",
 	    dataIndexKey = null !== (_c = options.dataIndexKey) && void 0 !== _c ? _c : "defaultDataIndexKey",
 	    fillingWordsData = [];
 	  return fillingWords.forEach((word, index) => {
 	    var _a, _b;
 	    const t = {};
-	    t[as.x] = word.x, t[as.y] = word.y, t[as.fontFamily] = word.fontFamily, t[as.fontSize] = word.fontSize, t[as.fontStyle] = word.fontStyle, t[as.fontWeight] = word.fontWeight, t[as.angle] = word.rotate, t[as.opacity] = word.opacity, t[as.visible] = word.visible, t[as.isFillingWord] = !0, t[as.color] = getFillingColor ? (null === (_a = options.colorField) || void 0 === _a ? void 0 : _a.field) === (null === (_b = options.fillingColorField) || void 0 === _b ? void 0 : _b.field) && sameColorList ? word.color : word.fillingColor : layoutConfig.fillingColorList[~~(segmentationInput.randomGenerator() * layoutConfig.fillingColorList.length)], t[textKey] = word.text, t[dataIndexKey] = `${word.text}_${index}_fillingWords`, fillingWordsData.push(t);
+	    t[as.x] = word.x, t[as.y] = word.y, t[as.fontFamily] = word.fontFamily, t[as.fontSize] = word.fontSize, t[as.fontStyle] = word.fontStyle, t[as.fontWeight] = word.fontWeight, t[as.angle] = degreeToRadian(word.rotate), t[as.opacity] = word.opacity, t[as.visible] = word.visible, t[as.isFillingWord] = !0, t[as.color] = getFillingColor ? (null === (_a = options.colorField) || void 0 === _a ? void 0 : _a.field) === (null === (_b = options.fillingColorField) || void 0 === _b ? void 0 : _b.field) && sameColorList ? word.color : word.fillingColor : layoutConfig.fillingColorList[~~(segmentationInput.randomGenerator() * layoutConfig.fillingColorList.length)], t[textKey] = word.text, t[dataIndexKey] = `${word.text}_${index}_fillingWords`, fillingWordsData.push(t);
 	  }), (null == view ? void 0 : view.emit) && view.emit(WORDCLOUD_SHAPE_HOOK_EVENT.AFTER_WORDCLOUD_SHAPE_LAYOUT, {
 	    successedWords: successedWords,
 	    failedWords: failedWords
@@ -73203,10 +73445,12 @@
 	        fillingColorScale = datum => new OrdinalScale().domain(uniquefillingColorField).range(fillingColorList).scale(datum);
 	      }
 	    } else {
-	      new LinearScale().domain(extent(getColor, data)).range([0, 1]);
-	      if (1 === colorList.length && (colorList = [colorList[0], colorList[0]]), colorScale = i => "black", getFillingColor && ((null === (_c = options.colorField) || void 0 === _c ? void 0 : _c.field) !== (null === (_d = options.fillingColorField) || void 0 === _d ? void 0 : _d.field) || !sameColorList)) {
-	        new LinearScale().domain(extent(getFillingColor, data)).range([0, 1]);
-	        1 === fillingColorList.length && (fillingColorList = [fillingColorList[0], fillingColorList[0]]), fillingColorScale = i => "black";
+	      1 === colorList.length && (colorList = [colorList[0], colorList[0]]);
+	      const valueScale = new LinearScale().domain(extent(getColor, data)).range(colorList);
+	      if (colorScale = i => valueScale.scale(i), getFillingColor && ((null === (_c = options.colorField) || void 0 === _c ? void 0 : _c.field) !== (null === (_d = options.fillingColorField) || void 0 === _d ? void 0 : _d.field) || !sameColorList)) {
+	        1 === fillingColorList.length && (fillingColorList = [fillingColorList[0], fillingColorList[0]]);
+	        const fillingValueScale = new LinearScale().domain(extent(getFillingColor, data)).range(fillingColorList);
+	        fillingColorScale = i => fillingValueScale.scale(i);
 	      }
 	    }
 	    Object.assign(wordsConfig, {
@@ -73229,7 +73473,7 @@
 	        fontSizeScale = datum => sizeScale.scale(getFontSize(datum));
 	      } else if (getFontSize && isFunction(getFontSize) && !range) {
 	        const a = .5,
-	          [min, max] = (segmentationOutput.shapeArea, extent(getFontSize, data)),
+	          [min, max] = extent(getFontSize, data),
 	          words = data.map(datum => ({
 	            text: getText(datum),
 	            value: getFontSize(datum),
@@ -73468,7 +73712,7 @@
 	        const fontWeightField = this._fontWeightField;
 	        const fillingRotateAngles = this._wordCloudShapeConfig.fillingRotateAngles;
 	        if (valueField) {
-	            const [minValue, maxValue] = extent$2((_a = this.getViewData()) === null || _a === void 0 ? void 0 : _a.latestData.map((datum) => datum[valueField]));
+	            const [minValue, maxValue] = extent$2((_a = this.getViewData()) === null || _a === void 0 ? void 0 : _a.latestData.map((datum) => +datum[valueField]));
 	            valueScale.domain([minValue, maxValue], true).range(fontWeightRange);
 	            wordCloudTransforms.push({
 	                type: 'map',
@@ -73648,7 +73892,7 @@
 	        const fontWeightField = this._fontWeightField;
 	        const fillingRotateAngles = this._wordCloudShapeConfig.fillingRotateAngles;
 	        if (valueField) {
-	            const [minValue, maxValue] = extent$2((_a = this.getViewData()) === null || _a === void 0 ? void 0 : _a.latestData.map((datum) => datum[valueField]));
+	            const [minValue, maxValue] = extent$2((_a = this.getViewData()) === null || _a === void 0 ? void 0 : _a.latestData.map((datum) => +datum[valueField]));
 	            valueScale.domain([minValue, maxValue], true).range(fontWeightRange);
 	            wordCloudTransforms.push({
 	                type: 'map',
@@ -78634,7 +78878,7 @@
 	    }
 	    _getDefaultSeriesSpec(spec) {
 	        var _a;
-	        return Object.assign(Object.assign({}, super._getDefaultSeriesSpec(spec)), { invalidType: spec.invalidType || 'break', point: spec.point, line: spec.line, area: spec.area, seriesMark: (_a = spec.seriesMark) !== null && _a !== void 0 ? _a : 'area', activePoint: spec.activePoint });
+	        return Object.assign(Object.assign({}, super._getDefaultSeriesSpec(spec)), { point: spec.point, line: spec.line, area: spec.area, seriesMark: (_a = spec.seriesMark) !== null && _a !== void 0 ? _a : 'area', activePoint: spec.activePoint });
 	    }
 	    transformSpec(spec) {
 	        super.transformSpec(spec);
@@ -79133,7 +79377,7 @@
 	    }
 	    _getDefaultSeriesSpec(spec) {
 	        var _a;
-	        return Object.assign(Object.assign({}, super._getDefaultSeriesSpec(spec)), { invalidType: spec.invalidType || 'break', point: spec.point, line: spec.line, seriesMark: (_a = spec.seriesMark) !== null && _a !== void 0 ? _a : 'line', activePoint: spec.activePoint });
+	        return Object.assign(Object.assign({}, super._getDefaultSeriesSpec(spec)), { point: spec.point, line: spec.line, seriesMark: (_a = spec.seriesMark) !== null && _a !== void 0 ? _a : 'line', activePoint: spec.activePoint });
 	    }
 	    transformSpec(spec) {
 	        super.transformSpec(spec);
@@ -79403,7 +79647,7 @@
 	    }
 	    _getDefaultSeriesSpec(spec) {
 	        var _a;
-	        return Object.assign(Object.assign({}, super._getDefaultSeriesSpec(spec)), { seriesField: spec.seriesField, invalidType: spec.invalidType || 'break', line: spec.line, point: spec.point, stack: spec.stack, percent: spec.percent, area: merge$2({
+	        return Object.assign(Object.assign({}, super._getDefaultSeriesSpec(spec)), { seriesField: spec.seriesField, line: spec.line, point: spec.point, stack: spec.stack, percent: spec.percent, area: merge$2({
 	                visible: false
 	            }, spec.area), seriesMark: (_a = spec.seriesMark) !== null && _a !== void 0 ? _a : 'area', activePoint: spec.activePoint });
 	    }
@@ -80112,14 +80356,14 @@
 	        this.name = 'component';
 	        this.modelType = 'component';
 	        this._regions = [];
-	        this._delegateEvent = (component, event, type) => {
+	        this._delegateEvent = (component, event, type, item = null, datum = null) => {
 	            var _a, _b;
 	            this.event.emit(type, {
 	                model: this,
 	                node: component,
 	                event,
-	                item: null,
-	                datum: null,
+	                item: item,
+	                datum: datum,
 	                source: Event_Source_Type.chart,
 	                chart: (_b = (_a = this._option) === null || _a === void 0 ? void 0 : _a.globalInstance) === null || _b === void 0 ? void 0 : _b.getChart()
 	            }, 'model');
@@ -80144,7 +80388,7 @@
 	        };
 	    }
 	    setCurrentTheme(theme, noRender) {
-	        return __awaiter$i(this, void 0, void 0, function* () {
+	        return __awaiter$h(this, void 0, void 0, function* () {
 	            const modifyConfig = () => {
 	                this.reInit(theme);
 	                return { change: true, reMake: false };
@@ -83324,7 +83568,7 @@
 	            if (isHorizontal && !isXAxis(spec.orient)) {
 	                inverse = isValid(spec.inverse) ? !spec.inverse : true;
 	            }
-	            return new C(Object.assign(Object.assign({}, spec), { inverse }), options);
+	            return new C(Object.assign(Object.assign({}, spec), { type: axisType, inverse }), options);
 	        }
 	        options.onError(`Component ${componentName} not found`);
 	        return null;
@@ -83928,7 +84172,7 @@
 	    }
 	    niceDomain(domain) {
 	        const { min: userMin, max: userMax } = getLinearAxisSpecDomain(this._spec);
-	        if (isValid(userMin) || isValid(userMax)) {
+	        if (isValid(userMin) || isValid(userMax) || this._spec.type !== 'linear') {
 	            return domain;
 	        }
 	        if (Math.abs(minInArray(domain) - maxInArray(domain)) <= 1e-12) {
@@ -84397,7 +84641,7 @@
 	        const componentName = `${PolarAxis.type}-${axisType}`;
 	        const C = Factory.getComponentInKey(componentName);
 	        if (C) {
-	            return new C(spec, options);
+	            return new C(Object.assign(Object.assign({}, spec), { type: axisType }), options);
 	        }
 	        options.onError(`Component ${componentName} not found`);
 	        return null;
@@ -85278,10 +85522,10 @@
 	            const statisticData = s.getRawDataStatistics().latestData;
 	            const seriesMin = (_a = statisticData === null || statisticData === void 0 ? void 0 : statisticData[datumField]) === null || _a === void 0 ? void 0 : _a.min;
 	            const seriesMax = (_b = statisticData === null || statisticData === void 0 ? void 0 : statisticData[datumField]) === null || _b === void 0 ? void 0 : _b.max;
-	            if (isValidNumber(seriesMin) && seriesMin < min) {
+	            if (isValidNumber(seriesMin)) {
 	                min = seriesMin;
 	            }
-	            if (isValidNumber(seriesMax) && seriesMax > max) {
+	            if (isValidNumber(seriesMax)) {
 	                max = seriesMax;
 	            }
 	        });
@@ -85483,8 +85727,16 @@
 	        if (isEmpty(visualMappingRange)) {
 	            visualMappingRange = this._legendType === 'color' ? SINGLE_SEQUENCE : SIZE;
 	        }
+	        let min = (_a = this._legendData.getLatestData()[0]) !== null && _a !== void 0 ? _a : 0;
+	        let max = (_b = this._legendData.getLatestData()[1]) !== null && _b !== void 0 ? _b : 1;
+	        const isSame = this._legendData.getLatestData()[0] === this._legendData.getLatestData()[1];
+	        if (isSame) {
+	            min = Math.min(0, this._legendData.getLatestData()[0]);
+	            max = this._legendData.getLatestData()[0] === 0 ? 1 : Math.max(0, this._legendData.getLatestData()[0]);
+	        }
 	        const attrs = Object.assign(Object.assign({}, getContinuousLegendAttributes(this._spec)), { layout,
-	            align, zIndex: this.layoutZIndex, min: (_a = this._legendData.getLatestData()[0]) !== null && _a !== void 0 ? _a : 0, max: (_b = this._legendData.getLatestData()[1]) !== null && _b !== void 0 ? _b : 1, value: this._spec.defaultSelected, [this._legendType === 'color' ? 'colors' : 'sizeRange']: visualMappingRange });
+	            align, zIndex: this.layoutZIndex, min,
+	            max, value: this._spec.defaultSelected, [this._legendType === 'color' ? 'colors' : 'sizeRange']: visualMappingRange });
 	        this._addDefaultTitleText(attrs);
 	        return attrs;
 	    }
@@ -85836,9 +86088,12 @@
 	        return this._titleComponent;
 	    }
 	    clear() {
-	        super.clear();
-	        this._titleComponent = null;
+	        if (this._titleComponent) {
+	            this._container.removeChild(this._titleComponent);
+	            this._titleComponent = null;
+	        }
 	        this._cacheAttrs = null;
+	        super.clear();
 	    }
 	}
 	Title.type = ComponentTypeEnum.title;
@@ -85989,6 +86244,7 @@
 	        this.initProjection();
 	        this.coordinateHelper();
 	        this.initEvent();
+	        this._initCenterCache();
 	    }
 	    dispatchZoom(zoomDelta, center) {
 	        const scaleCenter = center || {
@@ -86046,14 +86302,22 @@
 	                    s.setCoordinateHelper(helper);
 	                }
 	                else {
-	                    s.setXAxisHelper(Object.assign(Object.assign({}, helper), { dataToPosition: (values) => {
-	                            return this.dataToLongitude(values[0]);
-	                        }, getAxisType: () => this.type, getAxisId: () => this.id, isInverse: () => false }));
-	                    s.setYAxisHelper(Object.assign(Object.assign({}, helper), { dataToPosition: (values) => {
-	                            return this.dataToLatitude(values[0]);
-	                        }, getAxisType: () => this.type, getAxisId: () => this.id, isInverse: () => false }));
-	                    this._longitudeField && s.setFieldX(this._longitudeField);
-	                    this._latitudeField && s.setFieldY(this._latitudeField);
+	                    s.setXAxisHelper(Object.assign(Object.assign({}, helper), { dataToPosition: (values, option) => {
+	                            let value = values[0];
+	                            if (isNil(value) && (option === null || option === void 0 ? void 0 : option.datum)) {
+	                                const nameFieldValue = option.datum[s.getDimensionField()[0]];
+	                                value = this._centerCache.get(nameFieldValue).x;
+	                            }
+	                            return this.dataToLongitude(value);
+	                        }, getFields: () => [this._longitudeField], getAxisType: () => this.type, getAxisId: () => this.id, isInverse: () => false }));
+	                    s.setYAxisHelper(Object.assign(Object.assign({}, helper), { dataToPosition: (values, option) => {
+	                            let value = values[0];
+	                            if (isNil(value) && (option === null || option === void 0 ? void 0 : option.datum)) {
+	                                const nameFieldValue = option.datum[s.getDimensionField()[0]];
+	                                value = this._centerCache.get(nameFieldValue).y;
+	                            }
+	                            return this.dataToLatitude(value);
+	                        }, getFields: () => [this._latitudeField], getAxisType: () => this.type, getAxisId: () => this.id, isInverse: () => false }));
 	                }
 	            });
 	        });
@@ -86137,26 +86401,31 @@
 	        center && (translate = [size[0] / 2, size[1] / 2]);
 	        return { translate, scale, center };
 	    }
-	    rescaleMark() {
+	    _initCenterCache() {
+	        if (!this._centerCache) {
+	            this._centerCache = new Map();
+	        }
 	        this._regions.forEach(r => {
-	            var _a;
-	            const mapMark = (_a = r.getSeriesInType(SeriesTypeEnum.map)[0]) === null || _a === void 0 ? void 0 : _a.getMarkInName('area');
-	            if (mapMark) {
-	                r.getSeries().forEach(s => {
-	                    if (s.type !== SeriesTypeEnum.map) {
-	                        s.getMarksInType('symbol').forEach((s) => {
-	                            s.setAttribute('scaleX', (datum) => {
-	                                return s.getAttribute('size', datum) * mapMark.getAttribute('scaleX', datum);
-	                            });
-	                            s.setAttribute('scaleY', (datum) => {
-	                                return s.getAttribute('size', datum) * mapMark.getAttribute('scaleY', datum);
-	                            });
-	                        });
-	                    }
-	                });
-	            }
+	            r.getSeries().forEach(s => {
+	                var _a, _b;
+	                if (s.type === 'map') {
+	                    const mapData = (_b = (_a = s.getMapViewData()) === null || _a === void 0 ? void 0 : _a.latestData) !== null && _b !== void 0 ? _b : [];
+	                    mapData.forEach((feature = {}) => {
+	                        const key = feature[s.getDimensionField()[0]] || feature[DEFAULT_MAP_LOOK_UP_KEY];
+	                        const { centroidX, centroidY } = feature;
+	                        if (key && isValid(centroidX * centroidY)) {
+	                            this._centerCache.set(key, { x: centroidX, y: centroidY });
+	                        }
+	                    });
+	                }
+	            });
 	        });
 	    }
+	    release() {
+	        super.release();
+	        this._centerCache && this._centerCache.clear();
+	        this._centerCache = null;
+	    }
 	}
 	GeoCoordinate.type = ComponentTypeEnum.geoCoordinate;
 	mixin(GeoCoordinate, Zoomable);
@@ -86305,8 +86574,9 @@
 	        return null;
 	    }
 	    _getAxisInfoByField(field) {
-	        const axesComponents = this._option.getComponentsByKey('axes');
-	        if (!axesComponents.length) {
+	        var _a, _b;
+	        const axesComponents = (_b = (_a = this._option) === null || _a === void 0 ? void 0 : _a.getComponentsByKey) === null || _b === void 0 ? void 0 : _b.call(_a, 'axes');
+	        if (!(axesComponents === null || axesComponents === void 0 ? void 0 : axesComponents.length)) {
 	            return null;
 	        }
 	        let bindingAxesIndex = get$1(this._spec, `${field}Field.bindingAxesIndex`);
@@ -86970,7 +87240,7 @@
 	            else if (type === 'rect') {
 	                crosshair = new RectCrosshair(Object.assign(Object.assign({}, attributes), { rectStyle: style, zIndex: this.gridZIndex }));
 	            }
-	            container.add(crosshair);
+	            container === null || container === void 0 ? void 0 : container.add(crosshair);
 	            if (dim === 'x') {
 	                this._xCrosshair = crosshair;
 	            }
@@ -87922,6 +88192,27 @@
 	        this._startRelativeSeries = this._getSeriesByIdOrIndex(spec.startRelativeSeriesId, spec.startRelativeSeriesIndex);
 	        this._endRelativeSeries = this._getSeriesByIdOrIndex(spec.endRelativeSeriesId, spec.endRelativeSeriesIndex);
 	    }
+	    _computeClipRange(regions) {
+	        let minX = Infinity;
+	        let maxX = -Infinity;
+	        let minY = Infinity;
+	        let maxY = -Infinity;
+	        regions.forEach((region) => {
+	            if (region.getLayoutStartPoint().x < minX) {
+	                minX = region.getLayoutStartPoint().x;
+	            }
+	            if (region.getLayoutStartPoint().x + region.getLayoutRect().width > maxX) {
+	                maxX = region.getLayoutStartPoint().x + region.getLayoutRect().width;
+	            }
+	            if (region.getLayoutStartPoint().y < minY) {
+	                minY = region.getLayoutStartPoint().y;
+	            }
+	            if (region.getLayoutStartPoint().y + region.getLayoutRect().height > maxY) {
+	                maxY = region.getLayoutStartPoint().y + region.getLayoutRect().height;
+	            }
+	        });
+	        return { minX, maxX, minY, maxY };
+	    }
 	    initEvent() {
 	    }
 	    onRender(ctx) {
@@ -88005,7 +88296,7 @@
 	        this.getContainer().add(this._markerComponent);
 	    }
 	    _markerLayout() {
-	        var _a, _b, _c, _d, _e;
+	        var _a, _b, _c, _d, _e, _f;
 	        const spec = this._spec;
 	        const data = this._markerData;
 	        const startRelativeSeries = this._startRelativeSeries;
@@ -88016,6 +88307,7 @@
 	        const isCoordinateLayout = isValid(spec.coordinates) && (!isValid(spec.process) || ('process' in spec && 'xy' in spec.process));
 	        const isPositionLayout = isValid(spec.positions);
 	        const autoRange = (_a = spec === null || spec === void 0 ? void 0 : spec.autoRange) !== null && _a !== void 0 ? _a : false;
+	        const isNeedClip = (_b = spec === null || spec === void 0 ? void 0 : spec.clip) !== null && _b !== void 0 ? _b : false;
 	        let points = [];
 	        if (isXLayout) {
 	            points = xLayout(data, startRelativeSeries, endRelativeSeries, relativeSeries, autoRange)[0];
@@ -88030,11 +88322,26 @@
 	            points = spec.positions;
 	        }
 	        const dataPoints = data.latestData[0].latestData ? data.latestData[0].latestData : data.latestData;
-	        (_b = this._markerComponent) === null || _b === void 0 ? void 0 : _b.setAttributes({
+	        let clipRange;
+	        if (isNeedClip) {
+	            const { minX, maxX, minY, maxY } = this._computeClipRange([
+	                startRelativeSeries.getRegion(),
+	                endRelativeSeries.getRegion(),
+	                relativeSeries.getRegion()
+	            ]);
+	            clipRange = {
+	                x: minX,
+	                y: minY,
+	                width: maxX - minX,
+	                height: maxY - minY
+	            };
+	        }
+	        (_c = this._markerComponent) === null || _c === void 0 ? void 0 : _c.setAttributes({
 	            points: points,
-	            label: Object.assign(Object.assign({}, (_c = this._markerComponent.attribute) === null || _c === void 0 ? void 0 : _c.label), { text: this._spec.label.formatMethod
+	            label: Object.assign(Object.assign({}, (_d = this._markerComponent.attribute) === null || _d === void 0 ? void 0 : _d.label), { text: this._spec.label.formatMethod
 	                    ? this._spec.label.formatMethod(dataPoints)
-	                    : (_e = (_d = this._markerComponent.attribute) === null || _d === void 0 ? void 0 : _d.label) === null || _e === void 0 ? void 0 : _e.text })
+	                    : (_f = (_e = this._markerComponent.attribute) === null || _e === void 0 ? void 0 : _e.label) === null || _f === void 0 ? void 0 : _f.text }),
+	            clipRange
 	        });
 	    }
 	    _initDataView() {
@@ -88156,7 +88463,7 @@
 	        this.getContainer().add(this._markerComponent);
 	    }
 	    _markerLayout() {
-	        var _a, _b, _c, _d, _e;
+	        var _a, _b, _c, _d, _e, _f;
 	        const spec = this._spec;
 	        const data = this._markerData;
 	        const startRelativeSeries = this._startRelativeSeries;
@@ -88167,6 +88474,7 @@
 	        const isCoordinateLayout = isValid(spec.coordinates);
 	        const isPositionLayout = isValid(spec.positions);
 	        const autoRange = (_a = spec === null || spec === void 0 ? void 0 : spec.autoRange) !== null && _a !== void 0 ? _a : false;
+	        const isNeedClip = (_b = spec === null || spec === void 0 ? void 0 : spec.clip) !== null && _b !== void 0 ? _b : false;
 	        let points = [];
 	        let lines = [];
 	        if (isXLayout) {
@@ -88184,11 +88492,26 @@
 	            points = spec.positions;
 	        }
 	        const dataPoints = data.latestData[0].latestData ? data.latestData[0].latestData : data.latestData;
-	        (_b = this._markerComponent) === null || _b === void 0 ? void 0 : _b.setAttributes({
+	        let clipRange;
+	        if (isNeedClip) {
+	            const { minX, maxX, minY, maxY } = this._computeClipRange([
+	                startRelativeSeries.getRegion(),
+	                endRelativeSeries.getRegion(),
+	                relativeSeries.getRegion()
+	            ]);
+	            clipRange = {
+	                x: minX,
+	                y: minY,
+	                width: maxX - minX,
+	                height: maxY - minY
+	            };
+	        }
+	        (_c = this._markerComponent) === null || _c === void 0 ? void 0 : _c.setAttributes({
 	            points: points,
-	            label: Object.assign(Object.assign({}, (_c = this._markerComponent.attribute) === null || _c === void 0 ? void 0 : _c.label), { text: this._spec.label.formatMethod
+	            label: Object.assign(Object.assign({}, (_d = this._markerComponent.attribute) === null || _d === void 0 ? void 0 : _d.label), { text: this._spec.label.formatMethod
 	                    ? this._spec.label.formatMethod(dataPoints)
-	                    : (_e = (_d = this._markerComponent.attribute) === null || _d === void 0 ? void 0 : _d.label) === null || _e === void 0 ? void 0 : _e.text })
+	                    : (_f = (_e = this._markerComponent.attribute) === null || _e === void 0 ? void 0 : _e.label) === null || _f === void 0 ? void 0 : _f.text }),
+	            clipRange
 	        });
 	    }
 	    _initDataView() {
@@ -88267,13 +88590,14 @@
 	        this.getContainer().add(this._markerComponent);
 	    }
 	    _markerLayout() {
-	        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+	        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
 	        const spec = this._spec;
 	        const data = this._markerData;
 	        const relativeSeries = this._relativeSeries;
 	        const isCoordinateLayout = 'coordinate' in spec;
 	        const isPositionLayout = 'position' in spec;
 	        const autoRange = (_a = spec === null || spec === void 0 ? void 0 : spec.autoRange) !== null && _a !== void 0 ? _a : false;
+	        const isNeedClip = (_b = spec === null || spec === void 0 ? void 0 : spec.clip) !== null && _b !== void 0 ? _b : false;
 	        let point;
 	        if (isCoordinateLayout) {
 	            point = coordinateLayout(data, relativeSeries, autoRange)[0];
@@ -88282,11 +88606,22 @@
 	            point = spec.position;
 	        }
 	        const dataPoints = data.latestData[0].latestData ? data.latestData[0].latestData : data.latestData;
-	        (_b = this._markerComponent) === null || _b === void 0 ? void 0 : _b.setAttributes({
+	        let clipRange;
+	        if (isNeedClip) {
+	            const { minX, maxX, minY, maxY } = this._computeClipRange([relativeSeries.getRegion()]);
+	            clipRange = {
+	                x: minX,
+	                y: minY,
+	                width: maxX - minX,
+	                height: maxY - minY
+	            };
+	        }
+	        (_c = this._markerComponent) === null || _c === void 0 ? void 0 : _c.setAttributes({
 	            position: point,
-	            itemContent: Object.assign(Object.assign({}, (_c = this._markerComponent.attribute) === null || _c === void 0 ? void 0 : _c.itemContent), { textStyle: Object.assign(Object.assign({}, (_e = (_d = this._markerComponent.attribute) === null || _d === void 0 ? void 0 : _d.itemContent) === null || _e === void 0 ? void 0 : _e.textStyle), { text: ((_f = this._spec.itemContent.text) === null || _f === void 0 ? void 0 : _f.formatMethod)
+	            itemContent: Object.assign(Object.assign({}, (_d = this._markerComponent.attribute) === null || _d === void 0 ? void 0 : _d.itemContent), { textStyle: Object.assign(Object.assign({}, (_f = (_e = this._markerComponent.attribute) === null || _e === void 0 ? void 0 : _e.itemContent) === null || _f === void 0 ? void 0 : _f.textStyle), { text: ((_g = this._spec.itemContent.text) === null || _g === void 0 ? void 0 : _g.formatMethod)
 	                        ? this._spec.itemContent.text.formatMethod(dataPoints)
-	                        : (_j = (_h = (_g = this._markerComponent.attribute) === null || _g === void 0 ? void 0 : _g.itemContent) === null || _h === void 0 ? void 0 : _h.textStyle) === null || _j === void 0 ? void 0 : _j.text }) })
+	                        : (_k = (_j = (_h = this._markerComponent.attribute) === null || _h === void 0 ? void 0 : _h.itemContent) === null || _j === void 0 ? void 0 : _j.textStyle) === null || _k === void 0 ? void 0 : _k.text }) }),
+	            clipRange
 	        });
 	    }
 	    _initDataView() {
@@ -88367,6 +88702,9 @@
 	    }
 	}
 	const getScale = (element, boundingClientRect) => {
+	    if (!element) {
+	        return 1;
+	    }
 	    if (!boundingClientRect) {
 	        boundingClientRect = element.getBoundingClientRect();
 	    }
@@ -88862,6 +89200,7 @@
 	    return attribute;
 	};
 	const measureTooltipText = (text, style) => {
+	    var _a;
 	    const measure = initTextMeasure(style);
 	    if (!style.multiLine) {
 	        const { width, height } = measure.fullMeasure(text);
@@ -88876,7 +89215,7 @@
 	    const { width, height } = measure.fullMeasure(textLines);
 	    if (style.maxWidth && style.maxWidth <= width) {
 	        const bound = getRichTextBounds({
-	            wordBreak: style.wordBreak,
+	            wordBreak: (_a = style.wordBreak) !== null && _a !== void 0 ? _a : 'break-word',
 	            maxWidth: style.maxWidth,
 	            width: 0,
 	            height: 0,
@@ -89010,7 +89349,7 @@
 	            return actualTooltip;
 	        };
 	        this._getActualTooltipPosition = (actualTooltip, position, params, tooltipParentElement, changePositionOnly) => {
-	            var _a, _b, _c, _d, _e;
+	            var _a, _b, _c, _d, _e, _f;
 	            const event = params.event;
 	            const { width: tooltipBoxWidth = 0, height: tooltipBoxHeight = 0 } = (_a = this._getTooltipBoxSize(actualTooltip, changePositionOnly)) !== null && _a !== void 0 ? _a : {};
 	            const { offsetX, offsetY } = this._option;
@@ -89082,9 +89421,12 @@
 	                containerSize.width = window.innerWidth;
 	                containerSize.height = window.innerHeight;
 	                if (!isCanvas) {
-	                    tooltipParentElementRect = tooltipParentElement.getBoundingClientRect();
-	                    const chartElement = ((_e = this._compiler.getCanvas()) !== null && _e !== void 0 ? _e : this._chartContainer);
-	                    const chartElementRect = chartElement.getBoundingClientRect();
+	                    tooltipParentElementRect = (_e = tooltipParentElement === null || tooltipParentElement === void 0 ? void 0 : tooltipParentElement.getBoundingClientRect()) !== null && _e !== void 0 ? _e : {
+	                        x: Infinity,
+	                        y: Infinity
+	                    };
+	                    const chartElement = ((_f = this._compiler.getCanvas()) !== null && _f !== void 0 ? _f : this._chartContainer);
+	                    const chartElementRect = chartElement === null || chartElement === void 0 ? void 0 : chartElement.getBoundingClientRect();
 	                    relativePosOffset = {
 	                        x: chartElementRect.x - tooltipParentElementRect.x,
 	                        y: chartElementRect.y - tooltipParentElementRect.y
@@ -90354,6 +90696,12 @@
 	            }
 	        };
 	        this._handleMouseMove = (params) => {
+	            if (!this.tooltipHandler) {
+	                this._initHandler();
+	            }
+	            if (!this._processor) {
+	                this._initProcessor();
+	            }
 	            if (this._alwaysShow) {
 	                return;
 	            }
@@ -90472,8 +90820,6 @@
 	    created() {
 	        super.created();
 	        this._regions = this._option.getAllRegions();
-	        this._initHandler();
-	        this._initProcessor();
 	        this._initEvent();
 	    }
 	    release() {
@@ -90531,9 +90877,13 @@
 	        this._spec.style = merge$2({}, this._theme, this._originalSpec.style);
 	    }
 	    reInit(theme) {
-	        var _a, _b;
 	        super.reInit(theme);
-	        (_b = (_a = this.tooltipHandler) === null || _a === void 0 ? void 0 : _a.reInit) === null || _b === void 0 ? void 0 : _b.call(_a);
+	        if (this.tooltipHandler) {
+	            this.tooltipHandler.reInit();
+	        }
+	        else {
+	            this._initHandler();
+	        }
 	    }
 	    setAttrFromSpec() {
 	        var _a;
@@ -90573,6 +90923,12 @@
 	    }
 	    showTooltip(datum, options) {
 	        var _a;
+	        if (!this.tooltipHandler) {
+	            this._initHandler();
+	        }
+	        if (!this._processor) {
+	            this._initProcessor();
+	        }
 	        if (!((_a = this.tooltipHandler) === null || _a === void 0 ? void 0 : _a.showTooltip)) {
 	            return false;
 	        }
@@ -90752,14 +91108,29 @@
 	    return strategy;
 	}
 
+	function pieLabel(labelInfo) {
+	    var _a, _b;
+	    const { series, baseMark } = labelInfo;
+	    const labelSpec = (_a = baseMark.getLabelSpec()) !== null && _a !== void 0 ? _a : {};
+	    const labelPosition = (_b = labelSpec.position) !== null && _b !== void 0 ? _b : 'outside';
+	    const position = labelPosition;
+	    let smartInvert;
+	    if (labelSpec.smartInvert) {
+	        smartInvert = labelSpec.smartInvert;
+	    }
+	    else {
+	        smartInvert = isString(labelPosition) && labelPosition.includes('inside');
+	    }
+	    return { position, smartInvert };
+	}
+
 	const markLabelConfigFunc = {
 	    rect: barLabel,
-	    symbol: symbolLabel
+	    symbol: symbolLabel,
+	    arc: pieLabel
 	};
-	function textAttribute(labelInfo, datum) {
-	    var _a;
-	    const { labelMark, series, baseMark } = labelInfo;
-	    const formatMethod = (_a = baseMark.getLabelSpec()) === null || _a === void 0 ? void 0 : _a.formatMethod;
+	function textAttribute(labelInfo, datum, formatMethod) {
+	    const { labelMark, series } = labelInfo;
 	    const field = series.getMeasureField()[0];
 	    const textAttribute = { text: datum[field], data: datum };
 	    const attributes = Object.keys(labelMark.stateStyle.normal);
@@ -90773,7 +91144,7 @@
 	    return textAttribute;
 	}
 
-	class Label extends BaseComponent {
+	class BaseLabelComponent extends BaseComponent {
 	    constructor(spec, options) {
 	        super(spec, options);
 	        this.type = ComponentTypeEnum.label;
@@ -90782,6 +91153,52 @@
 	        this.layoutZIndex = LayoutZIndex.Label;
 	        this._regions = options.getRegionsInIndex([options.specIndex]);
 	        this.layoutBindRegionID = this._regions.map(x => x.id);
+	    }
+	    _interactiveConfig(labelSpec) {
+	        const { interactive } = labelSpec;
+	        if (interactive !== true) {
+	            return { hover: false, select: false };
+	        }
+	        const result = { hover: false, select: false, state: labelSpec.state };
+	        const { hover, select } = this._option.getChart().getSpec();
+	        if (hover !== false || hover.enable !== false) {
+	            result.hover = true;
+	        }
+	        if (select !== false || select.enable !== false) {
+	            result.select = true;
+	        }
+	        return result;
+	    }
+	    setLayoutStartPosition() {
+	    }
+	    updateSpec(spec) {
+	        const result = super.updateSpec(spec);
+	        result.reRender = true;
+	        result.reMake = true;
+	        return result;
+	    }
+	    onRender(ctx) {
+	    }
+	    changeRegions(regions) {
+	    }
+	    clear() {
+	        super.clear();
+	        this._marks.forEach(mark => {
+	            if (mark.getProduct()) {
+	                mark.getProduct().release();
+	            }
+	        });
+	    }
+	}
+	BaseLabelComponent.type = ComponentTypeEnum.label;
+
+	class Label extends BaseLabelComponent {
+	    constructor(spec, options) {
+	        super(spec, options);
+	        this.type = ComponentTypeEnum.label;
+	        this.name = ComponentTypeEnum.label;
+	        this.layoutType = 'absolute';
+	        this.layoutZIndex = LayoutZIndex.Label;
 	        this._layoutRule = spec.labelLayout || 'series';
 	    }
 	    static createComponent(spec, options) {
@@ -90794,7 +91211,7 @@
 	                .flat();
 	            const labelVisible = marks.some(mark => { var _a; return ((_a = mark.getLabelSpec()) === null || _a === void 0 ? void 0 : _a.visible) === true; });
 	            if (labelVisible) {
-	                labelComponents.push(new Label(spec, Object.assign(Object.assign({}, options), { specIndex: i })));
+	                labelComponents.push(new Label(spec, Object.assign(Object.assign({}, options), { specIndex: i, specKey: 'label' })));
 	                continue;
 	            }
 	        }
@@ -90825,6 +91242,22 @@
 	            });
 	            this.event.off(HOOK_EVENT.AFTER_MARK_RENDER_END, enableAnimation);
 	        };
+	        this.event.on('afterElementEncode', eventParams => {
+	            var _a;
+	            const mark = eventParams.item;
+	            if (this._option.getChart().getLayoutTag() === false && ((_a = mark.context) === null || _a === void 0 ? void 0 : _a.model) === this) {
+	                this._delegateLabelEvent(mark.getGroupGraphicItem());
+	            }
+	        });
+	    }
+	    _delegateLabelEvent(component) {
+	        const textNodes = component === null || component === void 0 ? void 0 : component.findAll(node => node.type === 'text', true).filter(text => !text.__vchart_event);
+	        if (textNodes && textNodes.length > 0) {
+	            textNodes.forEach(text => {
+	                text.__vchart_event = true;
+	                text.addEventListener('*', ((event, type) => this._delegateEvent(component, event, type, text, text.attribute.data)));
+	            });
+	        }
 	    }
 	    _initTextMark() {
 	        if (!this._labelInfo) {
@@ -90879,33 +91312,18 @@
 	            }
 	        });
 	    }
-	    _interactiveConfig(labelSpec) {
-	        const { interactive } = labelSpec;
-	        if (interactive !== true) {
-	            return { hover: false, select: false };
-	        }
-	        const result = { hover: false, select: false, state: labelSpec.state };
-	        const { hover, select } = this._option.getChart().getSpec();
-	        if (hover !== false || hover.enable !== false) {
-	            result.hover = true;
-	        }
-	        if (select !== false || select.enable !== false) {
-	            result.select = true;
-	        }
-	        return result;
-	    }
-	    setLayoutStartPosition() {
-	    }
 	    updateLayoutAttribute() {
 	        super.updateLayoutAttribute();
 	        this._labelComponentMap.forEach(({ region, labelInfo }, labelComponent) => {
 	            const baseMarks = labelInfo.map(info => info.baseMark);
 	            const component = labelComponent.getProduct();
+	            const dependCmp = this._option.getAllComponents().filter(cmp => cmp.type === 'totalLabel');
 	            component
 	                .target(baseMarks.map(mark => mark.getProduct()))
 	                .configure({ interactive: false })
+	                .depend(dependCmp.map(cmp => cmp.getMarks()[0].getProduct()))
 	                .labelStyle(mark => {
-	                var _a, _b;
+	                var _a, _b, _c, _d;
 	                const markId = mark.context.markId;
 	                const baseMark = this._option.getChart().getMarkById(markId);
 	                if (baseMark) {
@@ -90913,15 +91331,23 @@
 	                    const labelSpec = (_b = baseMark.getLabelSpec()) !== null && _b !== void 0 ? _b : {};
 	                    const interactive = this._interactiveConfig(labelSpec);
 	                    const passiveLabelSpec = pickWithout(labelSpec, ['position', 'style', 'state']);
+	                    const centerOffset = (_d = (_c = this._spec) === null || _c === void 0 ? void 0 : _c.centerOffset) !== null && _d !== void 0 ? _d : 0;
 	                    return merge$2({
-	                        textStyle: { pickable: labelSpec.interactive === true }
-	                    }, configFunc(labelInfo[baseMarks.findIndex(mark => mark === baseMark)]), Object.assign(Object.assign({}, passiveLabelSpec), interactive));
+	                        textStyle: Object.assign({ pickable: labelSpec.interactive === true }, labelSpec.style),
+	                        overlap: {
+	                            avoidMarks: this._option
+	                                .getAllComponents()
+	                                .filter(cmp => cmp.type === 'totalLabel')
+	                                .map(cmp => cmp.getMarks()[0].getProductId())
+	                        }
+	                    }, configFunc(labelInfo[baseMarks.findIndex(mark => mark === baseMark)]), Object.assign(Object.assign(Object.assign({}, passiveLabelSpec), interactive), { centerOffset, pickable: false }));
 	                }
 	            })
 	                .encode((datum, element) => {
+	                var _a;
 	                const markId = element.mark.context.markId;
 	                const baseMark = this._option.getChart().getMarkById(markId);
-	                return textAttribute(labelInfo[baseMarks.findIndex(mark => mark === baseMark)], datum);
+	                return textAttribute(labelInfo[baseMarks.findIndex(mark => mark === baseMark)], datum, (_a = baseMark.getLabelSpec()) === null || _a === void 0 ? void 0 : _a.formatMethod);
 	            })
 	                .size(() => region.getLayoutRect());
 	        });
@@ -90938,16 +91364,6 @@
 	            });
 	        });
 	    }
-	    updateSpec(spec) {
-	        const result = super.updateSpec(spec);
-	        result.reRender = true;
-	        result.reMake = true;
-	        return result;
-	    }
-	    onRender(ctx) {
-	    }
-	    changeRegions(regions) {
-	    }
 	    clear() {
 	        super.clear();
 	        this._labelComponentMap.forEach((context, mark) => {
@@ -90959,6 +91375,116 @@
 	}
 	Label.type = ComponentTypeEnum.label;
 
+	class TotalLabel extends BaseLabelComponent {
+	    constructor() {
+	        super(...arguments);
+	        this.type = ComponentTypeEnum.totalLabel;
+	        this.name = ComponentTypeEnum.totalLabel;
+	        this.layoutType = 'absolute';
+	        this.layoutZIndex = LayoutZIndex.Label;
+	    }
+	    static createComponent(spec, options) {
+	        const regions = options.getAllRegions();
+	        const labelComponents = [];
+	        for (let i = 0; i < regions.length; i++) {
+	            const series = getSeries(regions);
+	            series.forEach(s => {
+	                var _a, _b;
+	                if ((_b = (_a = s.getSpec()) === null || _a === void 0 ? void 0 : _a.totalLabel) === null || _b === void 0 ? void 0 : _b.visible) {
+	                    const cmp = new TotalLabel(s.getSpec().totalLabel, Object.assign(Object.assign({}, options), { specIndex: i, specKey: 'totalLabel' }));
+	                    cmp.series = s;
+	                    labelComponents.push(cmp);
+	                }
+	            });
+	        }
+	        return labelComponents;
+	    }
+	    init(option) {
+	        super.init(option);
+	        this._initTextMark();
+	        this._initLabelComponent();
+	    }
+	    _initTextMark() {
+	        var _a;
+	        if ((_a = this.series.getSpec().totalLabel) === null || _a === void 0 ? void 0 : _a.visible) {
+	            const mark = this.series.getMarksInType([MarkTypeEnum.rect, MarkTypeEnum.symbol])[0];
+	            const textMark = this._createMark({ type: MarkTypeEnum.text, name: `${mark.name}-total-label` });
+	            this._baseMark = mark;
+	            this._textMark = textMark;
+	            this._initTextMarkStyle();
+	        }
+	    }
+	    _initTextMarkStyle() {
+	        super.initMarkStyleWithSpec(this._textMark, this._spec);
+	        this.setMarkStyle(this._textMark, {
+	            text: datum => {
+	                return datum[STACK_FIELD_TOTAL];
+	            }
+	        }, 'normal', AttributeLevel.Default);
+	    }
+	    _initLabelComponent() {
+	        const component = this._createMark({ type: MarkTypeEnum.component, name: `${this.series.name}-total-label-component` }, {
+	            componentType: 'label',
+	            support3d: this._spec.support3d
+	        });
+	        if (component) {
+	            this._marks.addMark(component);
+	        }
+	    }
+	    updateLayoutAttribute() {
+	        super.updateLayoutAttribute();
+	        this._marks.forEach((componentMark, index) => {
+	            const component = componentMark.getProduct();
+	            component
+	                .target(this._baseMark.getProduct())
+	                .configure({ interactive: false })
+	                .labelStyle(() => {
+	                if (this._baseMark) {
+	                    const { offset, animation, overlap } = this._spec;
+	                    const interactive = this._interactiveConfig(this._spec);
+	                    return merge$2({
+	                        textStyle: { pickable: this._spec.interactive === true },
+	                        position: totalLabelPosition(this.series, this._baseMark.type)
+	                    }, Object.assign({ offset,
+	                        animation,
+	                        overlap, dataFilter: (data) => {
+	                            return data.filter((d) => d.data[STACK_FIELD_TOTAL_TOP]);
+	                        } }, interactive));
+	                }
+	            })
+	                .encode((datum, element) => {
+	                return textAttribute({ baseMark: this._baseMark, labelMark: this._textMark, series: this.series }, datum, this._spec.formatMethod);
+	            })
+	                .size(() => this._regions[0].getLayoutRect());
+	        });
+	    }
+	    compileMarks() {
+	        this.getMarks().forEach(m => {
+	            var _a;
+	            const group = this._regions[0].getGroupMark().getProduct();
+	            m.compile({ group });
+	            (_a = m.getProduct()) === null || _a === void 0 ? void 0 : _a.configure({
+	                context: {
+	                    model: this
+	                }
+	            });
+	        });
+	    }
+	}
+	TotalLabel.type = ComponentTypeEnum.totalLabel;
+	function totalLabelPosition(series, type) {
+	    let position;
+	    switch (type) {
+	        case 'rect':
+	            position = series.direction === 'horizontal' ? 'right' : 'top';
+	            break;
+	        case 'symbol':
+	        default:
+	            position = 'top';
+	    }
+	    return position;
+	}
+
 	class GridLayout {
 	    constructor(gridInfo, ctx) {
 	        this._chartLayoutRect = { x: 0, y: 0, width: 1, height: 1 };
@@ -91468,6 +91994,7 @@
 	    Title,
 	    MarkArea,
 	    Player,
+	    TotalLabel,
 	    Label,
 	    MarkPoint,
 	    Brush,
@@ -91590,6 +92117,7 @@
 	exports.ThemeManager = ThemeManager;
 	exports.Title = Title;
 	exports.Tooltip = Tooltip;
+	exports.TotalLabel = TotalLabel;
 	exports.TreeMapChart = TreeMapChart;
 	exports.TreeMapSeries = TreeMapSeries;
 	exports.VChart = VChart;