@visactor/vrender-components 0.23.0-alpha.3 → 1.0.0-alpha.2

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, Point, PointService, abs, max, min, atan2, epsilon, Matrix, pi2, Logger, pi, isArray, isNumberClose, TextMeasure, EventEmitter, isBoolean, isObject, isFunction, Color, isNumber, cos, sin, isString, pointAt, sqrt, OBBBounds, isNil, has, normalTransform, isValidUrl, isBase64, acos, transformBoundsWithMatrix, getContextFont, rotatePoint, clampAngleByRadian, asin, arrayEqual, Bounds, getRectIntersect, isRectIntersect, isPlainObject, merge, clamp, clampRange, normalizePadding, debounce, throttle, hexToRgb, crossProduct, isValid, isEmpty, rectInsideAnotherRect, radianToDegree, getAngleByPoint, polarToCartesian, normalizeAngle, isValidNumber, flattenArray, array, isRotateAABBIntersect, isLess, isGreater, cloneDeep, get, last, mixin, isEqual, interpolateString, minInArray, maxInArray, binaryFuzzySearchInNumberRange, calculateAnchorOfBounds, computeQuadrant, polygonContainPoint } from '@visactor/vutils';
+import { tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, Point, PointService, abs, max, min, atan2, epsilon, Matrix, pi2, Logger, pi, isArray, isNumberClose, TextMeasure, EventEmitter, isBoolean, isObject, isFunction, cos, sin, isString, pointAt, isNumber, sqrt, OBBBounds, isNil, normalTransform, isValidUrl, isBase64, acos, Color, transformBoundsWithMatrix, getContextFont, rotatePoint, clampAngleByRadian, asin, arrayEqual, Bounds, getRectIntersect, isRectIntersect, isEqual, isPlainObject, merge, clamp, clampRange, normalizePadding, debounce, throttle, hexToRgb, crossProduct, isValid, isEmpty, array, rectInsideAnotherRect, radianToDegree, getAngleByPoint, polarToCartesian, normalizeAngle, isValidNumber, flattenArray, isRotateAABBIntersect, isLess, isGreater, cloneDeep, get, last, mixin, interpolateString, minInArray, maxInArray, binaryFuzzySearchInNumberRange, pointInRect, calculateAnchorOfBounds, computeQuadrant, polygonContainPoint } from '@visactor/vutils';
 import { isContinuous, isDiscrete, LinearScale } from '@visactor/vscale';
 
 class Generator {
@@ -825,6 +825,20 @@ var MeasureModeEnum;
   MeasureModeEnum[MeasureModeEnum.estimate = 0] = "estimate", MeasureModeEnum[MeasureModeEnum.actualBounding = 1] = "actualBounding", MeasureModeEnum[MeasureModeEnum.fontBounding = 2] = "fontBounding";
 }(MeasureModeEnum || (MeasureModeEnum = {}));
 
+var AnimateMode;
+!function (AnimateMode) {
+  AnimateMode[AnimateMode.NORMAL = 0] = "NORMAL", AnimateMode[AnimateMode.SET_ATTR_IMMEDIATELY = 1] = "SET_ATTR_IMMEDIATELY";
+}(AnimateMode || (AnimateMode = {}));
+
+var AnimateStepType;
+!function (AnimateStepType) {
+  AnimateStepType.wait = "wait", AnimateStepType.from = "from", AnimateStepType.to = "to", AnimateStepType.customAnimate = "customAnimate";
+}(AnimateStepType || (AnimateStepType = {}));
+var AnimateStatus;
+!function (AnimateStatus) {
+  AnimateStatus[AnimateStatus.INITIAL = 0] = "INITIAL", AnimateStatus[AnimateStatus.RUNNING = 1] = "RUNNING", AnimateStatus[AnimateStatus.PAUSED = 2] = "PAUSED", AnimateStatus[AnimateStatus.END = 3] = "END";
+}(AnimateStatus || (AnimateStatus = {}));
+
 const circleThreshold = tau - 1e-8;
 class BoundsContext {
   constructor(bounds) {
@@ -967,18 +981,6 @@ var AttributeUpdateType;
 !function (AttributeUpdateType) {
   AttributeUpdateType[AttributeUpdateType.INIT = 0] = "INIT", AttributeUpdateType[AttributeUpdateType.DEFAULT = 1] = "DEFAULT", AttributeUpdateType[AttributeUpdateType.STATE = 2] = "STATE", AttributeUpdateType[AttributeUpdateType.ANIMATE_BIND = 10] = "ANIMATE_BIND", AttributeUpdateType[AttributeUpdateType.ANIMATE_PLAY = 11] = "ANIMATE_PLAY", AttributeUpdateType[AttributeUpdateType.ANIMATE_START = 12] = "ANIMATE_START", AttributeUpdateType[AttributeUpdateType.ANIMATE_UPDATE = 13] = "ANIMATE_UPDATE", AttributeUpdateType[AttributeUpdateType.ANIMATE_END = 14] = "ANIMATE_END", AttributeUpdateType[AttributeUpdateType.TRANSLATE = 20] = "TRANSLATE", AttributeUpdateType[AttributeUpdateType.TRANSLATE_TO = 21] = "TRANSLATE_TO", AttributeUpdateType[AttributeUpdateType.SCALE = 22] = "SCALE", AttributeUpdateType[AttributeUpdateType.SCALE_TO = 23] = "SCALE_TO", AttributeUpdateType[AttributeUpdateType.ROTATE = 24] = "ROTATE", AttributeUpdateType[AttributeUpdateType.ROTATE_TO = 25] = "ROTATE_TO";
 }(AttributeUpdateType || (AttributeUpdateType = {}));
-var AnimateStatus$1;
-!function (AnimateStatus) {
-  AnimateStatus[AnimateStatus.INITIAL = 0] = "INITIAL", AnimateStatus[AnimateStatus.RUNNING = 1] = "RUNNING", AnimateStatus[AnimateStatus.PAUSED = 2] = "PAUSED", AnimateStatus[AnimateStatus.END = 3] = "END";
-}(AnimateStatus$1 || (AnimateStatus$1 = {}));
-var AnimateMode$1;
-!function (AnimateMode) {
-  AnimateMode[AnimateMode.NORMAL = 0] = "NORMAL", AnimateMode[AnimateMode.SET_ATTR_IMMEDIATELY = 1] = "SET_ATTR_IMMEDIATELY";
-}(AnimateMode$1 || (AnimateMode$1 = {}));
-var AnimateStepType$1;
-!function (AnimateStepType) {
-  AnimateStepType.wait = "wait", AnimateStepType.from = "from", AnimateStepType.to = "to", AnimateStepType.customAnimate = "customAnimate";
-}(AnimateStepType$1 || (AnimateStepType$1 = {}));
 var Direction;
 !function (Direction) {
   Direction[Direction.ROW = 1] = "ROW", Direction[Direction.COLUMN = 2] = "COLUMN";
@@ -2864,6 +2866,7 @@ function applyStrokeStyle(ctx, character) {
   ctx.globalAlpha = strokeOpacity * opacity, ctx.lineWidth = character && "number" == typeof character.lineWidth ? character.lineWidth : 1, ctx.strokeStyle = strokeStyle, setTextStyle(ctx, character);
 }
 function getStrByWithCanvas(desc, width, character, guessIndex, needTestLetter) {
+  if (desc.length <= 1) return 0;
   if (!width || width <= 0) return 0;
   const textMeasure = application.graphicUtil.textMeasure;
   let index = guessIndex,
@@ -2897,6 +2900,13 @@ function testLetter2(string, index) {
 }
 function measureTextCanvas(text, character) {
   let mode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "actual";
+  var _a;
+  if ("" === text) return {
+    ascent: 0,
+    height: 0,
+    descent: 0,
+    width: 0
+  };
   const measurement = application.graphicUtil.textMeasure.measureText(text, character),
     result = {
       ascent: 0,
@@ -2906,7 +2916,9 @@ function measureTextCanvas(text, character) {
     },
     ascent = "actual" === mode ? measurement.actualBoundingBoxAscent : measurement.fontBoundingBoxAscent,
     descent = "actual" === mode ? measurement.actualBoundingBoxDescent : measurement.fontBoundingBoxDescent;
-  return "number" != typeof ascent || "number" != typeof descent ? (result.width = Math.floor(measurement.width), result.height = character.fontSize || 0, result.ascent = result.height, result.descent = 0) : (result.width = Math.floor(measurement.width), result.height = Math.floor(ascent + descent), result.ascent = Math.floor(ascent), result.descent = result.height - result.ascent), result;
+  "number" != typeof ascent || "number" != typeof descent ? (result.width = Math.floor(measurement.width), result.height = character.fontSize || 0, result.ascent = result.height, result.descent = 0) : (result.width = Math.floor(measurement.width), result.height = Math.floor(ascent + descent), result.ascent = Math.floor(ascent), result.descent = result.height - result.ascent);
+  const space = null !== (_a = character.space) && void 0 !== _a ? _a : 0;
+  return result.width += space, result;
 }
 
 var __decorate$O = undefined && undefined.__decorate || function (decorators, target, key, desc) {
@@ -4191,7 +4203,7 @@ class FederatedEvent {
   }
   _composedDetailPath(params) {
     if (params && params.graphic) {
-      const g = this.pickParams.graphic;
+      const g = params.graphic;
       if (g.stage) {
         const path = g.stage.eventSystem.manager.propagationPath(g);
         this.detailPath.push(path), this._composedDetailPath(params.params);
@@ -4241,142 +4253,6 @@ const EventTarget = {
   }
 };
 
-var ColorType;
-!function (ColorType) {
-  ColorType[ColorType.Color255 = 0] = "Color255", ColorType[ColorType.Color1 = 1] = "Color1";
-}(ColorType || (ColorType = {}));
-class ColorStore {
-  static Get(str) {
-    let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ColorType.Color1;
-    let arr = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [0, 0, 0, 1];
-    if (size === ColorType.Color1) {
-      const color = ColorStore.store1[str];
-      if (color) return arr[0] = color[0], arr[1] = color[1], arr[2] = color[2], arr[3] = color[3], arr;
-      const c = Color.parseColorString(str);
-      if (c) {
-        const data = [c.r / 255, c.g / 255, c.b / 255, c.opacity];
-        ColorStore.store1[str] = data, ColorStore.store255[str] = [c.r, c.g, c.b, c.opacity], arr[0] = data[0], arr[1] = data[1], arr[2] = data[2], arr[3] = data[3];
-      }
-      return arr;
-    }
-    const color = ColorStore.store255[str];
-    if (color) return arr[0] = color[0], arr[1] = color[1], arr[2] = color[2], arr[3] = color[3], arr;
-    const c = Color.parseColorString(str);
-    return c && (ColorStore.store1[str] = [c.r / 255, c.g / 255, c.b / 255, c.opacity], ColorStore.store255[str] = [c.r, c.g, c.b, c.opacity], arr[0] = c.r, arr[1] = c.g, arr[2] = c.b, arr[3] = c.opacity), arr;
-  }
-  static Set(str, size, arr) {
-    if (size === ColorType.Color1) {
-      if (ColorStore.store1[str]) return;
-      ColorStore.store1[str] = arr, ColorStore.store255[str] = [Math.floor(255 * arr[0]), Math.floor(255 * arr[1]), Math.floor(255 * arr[2]), Math.floor(255 * arr[3])];
-    } else {
-      if (ColorStore.store255[str]) return;
-      ColorStore.store255[str] = arr, ColorStore.store1[str] = [arr[0] / 255, arr[1] / 255, arr[2] / 255, arr[3]];
-    }
-  }
-}
-ColorStore.store255 = {}, ColorStore.store1 = {};
-
-function colorArrayToString(color) {
-  let alphaChannel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
-  return Array.isArray(color) && isNumber(color[0]) ? alphaChannel ? `rgb(${Math.round(color[0])},${Math.round(color[1])},${Math.round(color[2])},${color[3].toFixed(2)})` : `rgb(${Math.round(color[0])},${Math.round(color[1])},${Math.round(color[2])})` : color;
-}
-function interpolateColor(from, to, ratio, alphaChannel, cb) {
-  if (Array.isArray(from) && !isNumber(from[0]) || Array.isArray(to) && !isNumber(to[0])) {
-    return new Array(4).fill(0).map((_, index) => _interpolateColor(isArray(from) ? from[index] : from, isArray(to) ? to[index] : to, ratio, alphaChannel));
-  }
-  return _interpolateColor(from, to, ratio, alphaChannel, cb);
-}
-function _interpolateColor(from, to, ratio, alphaChannel, cb) {
-  if (!from || !to) return from && colorArrayToString(from) || to && colorArrayToString(to) || !1;
-  let fromArray,
-    toArray,
-    fromGradient = !1,
-    toGradient = !1;
-  if (Array.isArray(from) ? fromArray = from : "string" == typeof from ? fromArray = ColorStore.Get(from, ColorType.Color255) : fromGradient = !0, Array.isArray(to) ? toArray = to : "string" == typeof to ? toArray = ColorStore.Get(to, ColorType.Color255) : toGradient = !0, fromGradient !== toGradient) {
-    const gradient = fromGradient ? from : to,
-      pure = fromGradient ? to : from,
-      gradientFromPure = Object.assign(Object.assign({}, gradient), {
-        stops: gradient.stops.map(v => Object.assign(Object.assign({}, v), {
-          color: colorArrayToString(pure)
-        }))
-      });
-    return fromGradient ? interpolateColor(gradient, gradientFromPure, ratio, alphaChannel, cb) : interpolateColor(gradientFromPure, gradient, ratio, alphaChannel, cb);
-  }
-  if (fromGradient) {
-    if (from.gradient === to.gradient) {
-      const fc = from,
-        tc = to,
-        fromStops = fc.stops,
-        toStops = tc.stops;
-      if (fromStops.length !== toStops.length) return !1;
-      if ("linear" === fc.gradient) return interpolateGradientLinearColor(fc, tc, ratio);
-      if ("radial" === fc.gradient) return interpolateGradientRadialColor(fc, tc, ratio);
-      if ("conical" === fc.gradient) return interpolateGradientConicalColor(fc, tc, ratio);
-    }
-    return !1;
-  }
-  cb && cb(fromArray, toArray);
-  return colorArrayToString(interpolatePureColorArray(fromArray, toArray, ratio), alphaChannel);
-}
-function interpolateGradientLinearColor(fc, tc, ratio) {
-  const fStops = fc.stops,
-    tStops = tc.stops;
-  return {
-    gradient: "linear",
-    x0: fc.x0 + (tc.x0 - fc.x0) * ratio,
-    x1: fc.x1 + (tc.x1 - fc.x1) * ratio,
-    y0: fc.y0 + (tc.y0 - fc.y0) * ratio,
-    y1: fc.y1 + (tc.y1 - fc.y1) * ratio,
-    stops: new Array(fStops.length).fill(0).map((_, i) => ({
-      color: colorStringInterpolationToStr(fStops[i].color, tStops[i].color, ratio),
-      offset: fStops[i].offset + (tStops[i].offset - fStops[i].offset) * ratio
-    }))
-  };
-}
-function interpolateGradientRadialColor(fc, tc, ratio) {
-  const fStops = fc.stops,
-    tStops = tc.stops;
-  return {
-    gradient: "radial",
-    x0: fc.x0 + (tc.x0 - fc.x0) * ratio,
-    x1: fc.x1 + (tc.x1 - fc.x1) * ratio,
-    y0: fc.y0 + (tc.y0 - fc.y0) * ratio,
-    y1: fc.y1 + (tc.y1 - fc.y1) * ratio,
-    r0: fc.r0 + (tc.r0 - fc.r0) * ratio,
-    r1: fc.r1 + (tc.r1 - fc.r1) * ratio,
-    stops: new Array(fStops.length).fill(0).map((_, i) => ({
-      color: colorStringInterpolationToStr(fStops[i].color, tStops[i].color, ratio),
-      offset: fStops[i].offset + (tStops[i].offset - fStops[i].offset) * ratio
-    }))
-  };
-}
-function interpolateGradientConicalColor(fc, tc, ratio) {
-  const fStops = fc.stops,
-    tStops = tc.stops;
-  return {
-    gradient: "conical",
-    startAngle: fc.startAngle + (tc.startAngle - fc.startAngle) * ratio,
-    endAngle: fc.endAngle + (tc.endAngle - fc.endAngle) * ratio,
-    x: fc.x + (tc.x - fc.x) * ratio,
-    y: fc.y + (tc.y - fc.y) * ratio,
-    stops: new Array(fStops.length).fill(0).map((_, i) => ({
-      color: colorStringInterpolationToStr(fStops[i].color, tStops[i].color, ratio),
-      offset: fStops[i].offset + (tStops[i].offset - fStops[i].offset) * ratio
-    }))
-  };
-}
-function interpolatePureColorArray(from, to, ratio) {
-  return [from[0] + (to[0] - from[0]) * ratio, from[1] + (to[1] - from[1]) * ratio, from[2] + (to[2] - from[2]) * ratio, from[3] + (to[3] - from[3]) * ratio];
-}
-function interpolatePureColorArrayToStr(from, to, ratio) {
-  return `rgba(${from[0] + (to[0] - from[0]) * ratio},${from[1] + (to[1] - from[1]) * ratio},${from[2] + (to[2] - from[2]) * ratio},${from[3] + (to[3] - from[3]) * ratio})`;
-}
-const _fromColorRGB = [0, 0, 0, 0],
-  _toColorRGB = [0, 0, 0, 0];
-function colorStringInterpolationToStr(fromColor, toColor, ratio) {
-  return ColorStore.Get(fromColor, ColorType.Color255, _fromColorRGB), ColorStore.Get(toColor, ColorType.Color255, _toColorRGB), `rgba(${Math.round(_fromColorRGB[0] + (_toColorRGB[0] - _fromColorRGB[0]) * ratio)},${Math.round(_fromColorRGB[1] + (_toColorRGB[1] - _fromColorRGB[1]) * ratio)},${Math.round(_fromColorRGB[2] + (_toColorRGB[2] - _fromColorRGB[2]) * ratio)},${_fromColorRGB[3] + (_toColorRGB[3] - _fromColorRGB[3]) * ratio})`;
-}
-
 class ResourceLoader {
   static GetImage(url, mark) {
     var _a;
@@ -5623,6 +5499,15 @@ class Graphic extends Node {
       y: y
     });
   }
+  setAttributesAndPreventAnimate(params) {
+    let forceUpdateTag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+    let context = arguments.length > 2 ? arguments[2] : undefined;
+    this.setAttributes(params, forceUpdateTag, context), this.animates && this.animates.forEach(animate => {
+      Object.keys(params).forEach(key => {
+        animate.preventAttr(key);
+      });
+    });
+  }
   setAttributes(params) {
     let forceUpdateTag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
     let context = arguments.length > 2 ? arguments[2] : undefined;
@@ -5790,10 +5675,10 @@ class Graphic extends Node {
           duration: stateAnimateConfig.duration,
           easing: stateAnimateConfig.easing
         }
-      }]), noAnimateAttrs && this.setAttributes(noAnimateAttrs, !1, {
+      }]), noAnimateAttrs && this.setAttributesAndPreventAnimate(noAnimateAttrs, !1, {
         type: AttributeUpdateType.STATE
       });
-    } else this.stopStateAnimates(), this.setAttributes(attrs, !1, {
+    } else this.stopStateAnimates(), this.setAttributesAndPreventAnimate(attrs, !1, {
       type: AttributeUpdateType.STATE
     });
   }
@@ -5814,13 +5699,9 @@ class Graphic extends Node {
     });
   }
   getNormalAttribute(key) {
-    let value = this.attribute[key];
-    return this.animates && this.animates.forEach(animate => {
-      if (animate.stateNames) {
-        const endProps = animate.getEndProps();
-        has(endProps, key) && (value = endProps[key]);
-      }
-    }), value;
+    var _a, _b;
+    const value = this.attribute[key];
+    return this.animates ? null === (_a = this.finalAttribute) || void 0 === _a ? void 0 : _a[key] : null != value ? value : null === (_b = this.finalAttribute) || void 0 === _b ? void 0 : _b[key];
   }
   clearStates(hasAnimation) {
     this.hasState() && this.normalAttrs ? (this.currentStates = [], this.applyStateAttrs(this.normalAttrs, this.currentStates, hasAnimation, !0)) : this.currentStates = [], this.normalAttrs = null;
@@ -5981,80 +5862,6 @@ class Graphic extends Node {
       type: AttributeUpdateType.ANIMATE_END
     });
   }
-  onStep(subAnimate, animate, step, ratio, end) {
-    const nextAttributes = {};
-    if (step.customAnimate) step.customAnimate.update(end, ratio, nextAttributes);else {
-      const nextProps = step.props,
-        nextParsedProps = step.parsedProps,
-        propKeys = step.propKeys;
-      this.stepInterpolate(subAnimate, animate, nextAttributes, step, ratio, end, nextProps, void 0, nextParsedProps, propKeys);
-    }
-    this.setAttributes(nextAttributes, !1, {
-      type: AttributeUpdateType.ANIMATE_UPDATE,
-      animationState: {
-        ratio: ratio,
-        end: end,
-        step: step,
-        isFirstFrameOfStep: subAnimate.getLastStep() !== step
-      }
-    }), this.stage && this.stage.renderNextFrame();
-  }
-  stepInterpolate(subAnimate, animate, nextAttributes, step, ratio, end, nextProps, lastProps, nextParsedProps, propKeys) {
-    propKeys || (propKeys = Object.keys(nextProps), step.propKeys = propKeys), end ? step.propKeys.forEach(key => {
-      animate.validAttr(key) && (nextAttributes[key] = nextProps[key]);
-    }) : propKeys.forEach(key => {
-      var _a;
-      if (!animate.validAttr(key)) return;
-      const nextStepVal = nextProps[key],
-        lastStepVal = null !== (_a = lastProps && lastProps[key]) && void 0 !== _a ? _a : subAnimate.getLastPropByName(key, step);
-      if (null == nextStepVal || null == lastStepVal || nextStepVal === lastStepVal) return void (nextAttributes[key] = nextStepVal);
-      let match;
-      match = animate.interpolateFunc && animate.interpolateFunc(key, ratio, lastStepVal, nextStepVal, nextAttributes), match || (match = animate.customInterpolate(key, ratio, lastStepVal, nextStepVal, this, nextAttributes), match || this.defaultInterpolate(nextStepVal, lastStepVal, key, nextAttributes, nextParsedProps, ratio) || this._interpolate(key, ratio, lastStepVal, nextStepVal, nextAttributes));
-    }), step.parsedProps = nextParsedProps;
-  }
-  defaultInterpolate(nextStepVal, lastStepVal, key, nextAttributes, nextParsedProps, ratio) {
-    if (Number.isFinite(nextStepVal) && Number.isFinite(lastStepVal)) return nextAttributes[key] = lastStepVal + (nextStepVal - lastStepVal) * ratio, !0;
-    if ("fill" === key) {
-      nextParsedProps || (nextParsedProps = {});
-      const fillColorArray = nextParsedProps.fillColorArray,
-        color = interpolateColor(lastStepVal, null != fillColorArray ? fillColorArray : nextStepVal, ratio, !1, (fArray, tArray) => {
-          nextParsedProps.fillColorArray = tArray;
-        });
-      return color && (nextAttributes[key] = color), !0;
-    }
-    if ("stroke" === key) {
-      nextParsedProps || (nextParsedProps = {});
-      const strokeColorArray = nextParsedProps.strokeColorArray,
-        color = interpolateColor(lastStepVal, null != strokeColorArray ? strokeColorArray : nextStepVal, ratio, !1, (fArray, tArray) => {
-          nextParsedProps.strokeColorArray = tArray;
-        });
-      return color && (nextAttributes[key] = color), !0;
-    }
-    if ("shadowColor" === key) {
-      nextParsedProps || (nextParsedProps = {});
-      const shadowColorArray = nextParsedProps.shadowColorArray,
-        color = interpolateColor(lastStepVal, null != shadowColorArray ? shadowColorArray : nextStepVal, ratio, !0, (fArray, tArray) => {
-          nextParsedProps.shadowColorArray = tArray;
-        });
-      return color && (nextAttributes[key] = color), !0;
-    }
-    if (Array.isArray(nextStepVal) && nextStepVal.length === lastStepVal.length) {
-      const nextList = [];
-      let valid = !0;
-      for (let i = 0; i < nextStepVal.length; i++) {
-        const v = lastStepVal[i],
-          val = v + (nextStepVal[i] - v) * ratio;
-        if (!Number.isFinite(val)) {
-          valid = !1;
-          break;
-        }
-        nextList.push(val);
-      }
-      valid && (nextAttributes[key] = nextList);
-    }
-    return !1;
-  }
-  _interpolate(key, ratio, lastStepVal, nextStepVal, nextAttributes) {}
   getDefaultAttribute(name) {
     return this.getGraphicTheme()[name];
   }
@@ -6708,48 +6515,184 @@ function drawArcPath(arc, context, cx, cy, outerRadius, innerRadius, partStroke)
   return partStroke ? partStroke[3] && context.lineTo(cx + outerRadius * cos(startAngle), cy + outerRadius * sin(startAngle)) : context.closePath(), collapsedToLine;
 }
 
-function getConicGradientAt(x, y, angle, color) {
-  const {
-    stops: stops,
-    startAngle: startAngle,
-    endAngle: endAngle
-  } = color;
-  for (; angle < 0;) angle += pi2;
-  for (; angle > pi2;) angle -= pi2;
-  if (angle < startAngle) return stops[0].color;
-  if (angle > endAngle) return stops[0].color;
-  let startStop,
-    endStop,
-    percent = (angle - startAngle) / (endAngle - startAngle);
-  for (let i = 0; i < stops.length; i++) if (stops[i].offset >= percent) {
-    startStop = stops[i - 1], endStop = stops[i];
-    break;
+var ColorType;
+!function (ColorType) {
+  ColorType[ColorType.Color255 = 0] = "Color255", ColorType[ColorType.Color1 = 1] = "Color1";
+}(ColorType || (ColorType = {}));
+class ColorStore {
+  static Get(str) {
+    let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ColorType.Color1;
+    let arr = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [0, 0, 0, 1];
+    if (size === ColorType.Color1) {
+      const color = ColorStore.store1[str];
+      if (color) return arr[0] = color[0], arr[1] = color[1], arr[2] = color[2], arr[3] = color[3], arr;
+      const c = Color.parseColorString(str);
+      if (c) {
+        const data = [c.r / 255, c.g / 255, c.b / 255, c.opacity];
+        ColorStore.store1[str] = data, ColorStore.store255[str] = [c.r, c.g, c.b, c.opacity], arr[0] = data[0], arr[1] = data[1], arr[2] = data[2], arr[3] = data[3];
+      }
+      return arr;
+    }
+    const color = ColorStore.store255[str];
+    if (color) return arr[0] = color[0], arr[1] = color[1], arr[2] = color[2], arr[3] = color[3], arr;
+    const c = Color.parseColorString(str);
+    return c && (ColorStore.store1[str] = [c.r / 255, c.g / 255, c.b / 255, c.opacity], ColorStore.store255[str] = [c.r, c.g, c.b, c.opacity], arr[0] = c.r, arr[1] = c.g, arr[2] = c.b, arr[3] = c.opacity), arr;
+  }
+  static Set(str, size, arr) {
+    if (size === ColorType.Color1) {
+      if (ColorStore.store1[str]) return;
+      ColorStore.store1[str] = arr, ColorStore.store255[str] = [Math.floor(255 * arr[0]), Math.floor(255 * arr[1]), Math.floor(255 * arr[2]), Math.floor(255 * arr[3])];
+    } else {
+      if (ColorStore.store255[str]) return;
+      ColorStore.store255[str] = arr, ColorStore.store1[str] = [arr[0] / 255, arr[1] / 255, arr[2] / 255, arr[3]];
+    }
   }
-  return percent = (percent - startStop.offset) / (endStop.offset - startStop.offset), interpolateColor(startStop.color, endStop.color, percent, !1);
 }
+ColorStore.store255 = {}, ColorStore.store1 = {};
 
-const ArcRenderContribution = Symbol.for("ArcRenderContribution");
-const AreaRenderContribution = Symbol.for("AreaRenderContribution");
-const CircleRenderContribution = Symbol.for("CircleRenderContribution");
-const GroupRenderContribution = Symbol.for("GroupRenderContribution");
-const ImageRenderContribution = Symbol.for("ImageRenderContribution");
-const PathRenderContribution = Symbol.for("PathRenderContribution");
-const PolygonRenderContribution = Symbol.for("PolygonRenderContribution");
-const RectRenderContribution = Symbol.for("RectRenderContribution");
-const SymbolRenderContribution = Symbol.for("SymbolRenderContribution");
-const TextRenderContribution = Symbol.for("TextRenderContribution");
-const InteractiveSubRenderContribution = Symbol.for("InteractiveSubRenderContribution");
-
-function textDrawOffsetX(textAlign, width) {
-  return "end" === textAlign || "right" === textAlign ? -width : "center" === textAlign ? -width / 2 : 0;
+function colorArrayToString(color) {
+  let alphaChannel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+  return Array.isArray(color) && isNumber(color[0]) ? alphaChannel ? `rgb(${Math.round(color[0])},${Math.round(color[1])},${Math.round(color[2])},${color[3].toFixed(2)})` : `rgb(${Math.round(color[0])},${Math.round(color[1])},${Math.round(color[2])})` : color;
 }
-function textLayoutOffsetY(baseline, lineHeight, fontSize) {
-  let buf = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-  return "middle" === baseline ? -lineHeight / 2 : "top" === baseline ? 0 : "bottom" === baseline ? buf - lineHeight : baseline && "alphabetic" !== baseline ? 0 : (fontSize || (fontSize = lineHeight), -(lineHeight - fontSize) / 2 - .79 * fontSize);
+function interpolateColor(from, to, ratio, alphaChannel, cb) {
+  if (Array.isArray(from) && !isNumber(from[0]) || Array.isArray(to) && !isNumber(to[0])) {
+    return new Array(4).fill(0).map((_, index) => _interpolateColor(isArray(from) ? from[index] : from, isArray(to) ? to[index] : to, ratio, alphaChannel));
+  }
+  return _interpolateColor(from, to, ratio, alphaChannel, cb);
 }
-
-function identityMat4(out) {
-  return out[0] = 1, out[1] = 0, out[2] = 0, out[3] = 0, out[4] = 0, out[5] = 1, out[6] = 0, out[7] = 0, out[8] = 0, out[9] = 0, out[10] = 1, out[11] = 0, out[12] = 0, out[13] = 0, out[14] = 0, out[15] = 1, out;
+function _interpolateColor(from, to, ratio, alphaChannel, cb) {
+  if (!from || !to) return from && colorArrayToString(from) || to && colorArrayToString(to) || !1;
+  let fromArray,
+    toArray,
+    fromGradient = !1,
+    toGradient = !1;
+  if (Array.isArray(from) ? fromArray = from : "string" == typeof from ? fromArray = ColorStore.Get(from, ColorType.Color255) : fromGradient = !0, Array.isArray(to) ? toArray = to : "string" == typeof to ? toArray = ColorStore.Get(to, ColorType.Color255) : toGradient = !0, fromGradient !== toGradient) {
+    const gradient = fromGradient ? from : to,
+      pure = fromGradient ? to : from,
+      gradientFromPure = Object.assign(Object.assign({}, gradient), {
+        stops: gradient.stops.map(v => Object.assign(Object.assign({}, v), {
+          color: colorArrayToString(pure)
+        }))
+      });
+    return fromGradient ? interpolateColor(gradient, gradientFromPure, ratio, alphaChannel, cb) : interpolateColor(gradientFromPure, gradient, ratio, alphaChannel, cb);
+  }
+  if (fromGradient) {
+    if (from.gradient === to.gradient) {
+      const fc = from,
+        tc = to,
+        fromStops = fc.stops,
+        toStops = tc.stops;
+      if (fromStops.length !== toStops.length) return !1;
+      if ("linear" === fc.gradient) return interpolateGradientLinearColor(fc, tc, ratio);
+      if ("radial" === fc.gradient) return interpolateGradientRadialColor(fc, tc, ratio);
+      if ("conical" === fc.gradient) return interpolateGradientConicalColor(fc, tc, ratio);
+    }
+    return !1;
+  }
+  cb && cb(fromArray, toArray);
+  return colorArrayToString(interpolatePureColorArray(fromArray, toArray, ratio), alphaChannel);
+}
+function interpolateGradientLinearColor(fc, tc, ratio) {
+  const fStops = fc.stops,
+    tStops = tc.stops;
+  return {
+    gradient: "linear",
+    x0: fc.x0 + (tc.x0 - fc.x0) * ratio,
+    x1: fc.x1 + (tc.x1 - fc.x1) * ratio,
+    y0: fc.y0 + (tc.y0 - fc.y0) * ratio,
+    y1: fc.y1 + (tc.y1 - fc.y1) * ratio,
+    stops: new Array(fStops.length).fill(0).map((_, i) => ({
+      color: colorStringInterpolationToStr(fStops[i].color, tStops[i].color, ratio),
+      offset: fStops[i].offset + (tStops[i].offset - fStops[i].offset) * ratio
+    }))
+  };
+}
+function interpolateGradientRadialColor(fc, tc, ratio) {
+  const fStops = fc.stops,
+    tStops = tc.stops;
+  return {
+    gradient: "radial",
+    x0: fc.x0 + (tc.x0 - fc.x0) * ratio,
+    x1: fc.x1 + (tc.x1 - fc.x1) * ratio,
+    y0: fc.y0 + (tc.y0 - fc.y0) * ratio,
+    y1: fc.y1 + (tc.y1 - fc.y1) * ratio,
+    r0: fc.r0 + (tc.r0 - fc.r0) * ratio,
+    r1: fc.r1 + (tc.r1 - fc.r1) * ratio,
+    stops: new Array(fStops.length).fill(0).map((_, i) => ({
+      color: colorStringInterpolationToStr(fStops[i].color, tStops[i].color, ratio),
+      offset: fStops[i].offset + (tStops[i].offset - fStops[i].offset) * ratio
+    }))
+  };
+}
+function interpolateGradientConicalColor(fc, tc, ratio) {
+  const fStops = fc.stops,
+    tStops = tc.stops;
+  return {
+    gradient: "conical",
+    startAngle: fc.startAngle + (tc.startAngle - fc.startAngle) * ratio,
+    endAngle: fc.endAngle + (tc.endAngle - fc.endAngle) * ratio,
+    x: fc.x + (tc.x - fc.x) * ratio,
+    y: fc.y + (tc.y - fc.y) * ratio,
+    stops: new Array(fStops.length).fill(0).map((_, i) => ({
+      color: colorStringInterpolationToStr(fStops[i].color, tStops[i].color, ratio),
+      offset: fStops[i].offset + (tStops[i].offset - fStops[i].offset) * ratio
+    }))
+  };
+}
+function interpolatePureColorArray(from, to, ratio) {
+  return [from[0] + (to[0] - from[0]) * ratio, from[1] + (to[1] - from[1]) * ratio, from[2] + (to[2] - from[2]) * ratio, from[3] + (to[3] - from[3]) * ratio];
+}
+function interpolatePureColorArrayToStr(from, to, ratio) {
+  return `rgba(${from[0] + (to[0] - from[0]) * ratio},${from[1] + (to[1] - from[1]) * ratio},${from[2] + (to[2] - from[2]) * ratio},${from[3] + (to[3] - from[3]) * ratio})`;
+}
+const _fromColorRGB = [0, 0, 0, 0],
+  _toColorRGB = [0, 0, 0, 0];
+function colorStringInterpolationToStr(fromColor, toColor, ratio) {
+  return ColorStore.Get(fromColor, ColorType.Color255, _fromColorRGB), ColorStore.Get(toColor, ColorType.Color255, _toColorRGB), `rgba(${Math.round(_fromColorRGB[0] + (_toColorRGB[0] - _fromColorRGB[0]) * ratio)},${Math.round(_fromColorRGB[1] + (_toColorRGB[1] - _fromColorRGB[1]) * ratio)},${Math.round(_fromColorRGB[2] + (_toColorRGB[2] - _fromColorRGB[2]) * ratio)},${_fromColorRGB[3] + (_toColorRGB[3] - _fromColorRGB[3]) * ratio})`;
+}
+
+function getConicGradientAt(x, y, angle, color) {
+  const {
+    stops: stops,
+    startAngle: startAngle,
+    endAngle: endAngle
+  } = color;
+  for (; angle < 0;) angle += pi2;
+  for (; angle > pi2;) angle -= pi2;
+  if (angle < startAngle) return stops[0].color;
+  if (angle > endAngle) return stops[0].color;
+  let startStop,
+    endStop,
+    percent = (angle - startAngle) / (endAngle - startAngle);
+  for (let i = 0; i < stops.length; i++) if (stops[i].offset >= percent) {
+    startStop = stops[i - 1], endStop = stops[i];
+    break;
+  }
+  return percent = (percent - startStop.offset) / (endStop.offset - startStop.offset), interpolateColor(startStop.color, endStop.color, percent, !1);
+}
+
+const ArcRenderContribution = Symbol.for("ArcRenderContribution");
+const AreaRenderContribution = Symbol.for("AreaRenderContribution");
+const CircleRenderContribution = Symbol.for("CircleRenderContribution");
+const GroupRenderContribution = Symbol.for("GroupRenderContribution");
+const ImageRenderContribution = Symbol.for("ImageRenderContribution");
+const PathRenderContribution = Symbol.for("PathRenderContribution");
+const PolygonRenderContribution = Symbol.for("PolygonRenderContribution");
+const RectRenderContribution = Symbol.for("RectRenderContribution");
+const SymbolRenderContribution = Symbol.for("SymbolRenderContribution");
+const TextRenderContribution = Symbol.for("TextRenderContribution");
+const InteractiveSubRenderContribution = Symbol.for("InteractiveSubRenderContribution");
+
+function textDrawOffsetX(textAlign, width) {
+  return "end" === textAlign || "right" === textAlign ? -width : "center" === textAlign ? -width / 2 : 0;
+}
+function textLayoutOffsetY(baseline, lineHeight, fontSize) {
+  let buf = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  return "middle" === baseline ? -lineHeight / 2 : "top" === baseline ? 0 : "bottom" === baseline ? buf - lineHeight : baseline && "alphabetic" !== baseline ? 0 : (fontSize || (fontSize = lineHeight), -(lineHeight - fontSize) / 2 - .79 * fontSize);
+}
+
+function identityMat4(out) {
+  return out[0] = 1, out[1] = 0, out[2] = 0, out[3] = 0, out[4] = 0, out[5] = 1, out[6] = 0, out[7] = 0, out[8] = 0, out[9] = 0, out[10] = 1, out[11] = 0, out[12] = 0, out[13] = 0, out[14] = 0, out[15] = 1, out;
 }
 function rotateX(out, a, rad) {
   const s = Math.sin(rad),
@@ -8279,6 +8222,7 @@ function getFixedLRTB(left, right, top, bottom) {
 }
 class Paragraph {
   constructor(text, newLine, character, ascentDescentMode) {
+    var _a, _b;
     this.fontSize = character.fontSize || 16, this.textBaseline = character.textBaseline || "alphabetic", this.ascentDescentMode = ascentDescentMode;
     const lineHeight = calculateLineHeight(character.lineHeight, this.fontSize);
     this.lineHeight = "number" == typeof lineHeight ? lineHeight > this.fontSize ? lineHeight : this.fontSize : Math.floor(1.2 * this.fontSize), this.height = this.lineHeight;
@@ -8291,7 +8235,7 @@ class Paragraph {
     let halfDetaHeight = 0,
       deltaAscent = 0,
       deltaDescent = 0;
-    this.height > height && (halfDetaHeight = (this.height - height) / 2, deltaAscent = Math.ceil(halfDetaHeight), deltaDescent = Math.floor(halfDetaHeight)), "top" === this.textBaseline ? (this.ascent = halfDetaHeight, this.descent = height - halfDetaHeight) : "bottom" === this.textBaseline ? (this.ascent = height - halfDetaHeight, this.descent = halfDetaHeight) : "middle" === this.textBaseline ? (this.ascent = this.height / 2, this.descent = this.height / 2) : (this.ascent = ascent + deltaAscent, this.descent = descent + deltaDescent), this.length = text.length, this.width = width || 0, this.text = text || "", this.newLine = newLine || !1, this.character = character, this.left = 0, this.top = 0, this.ellipsis = "normal", this.ellipsisWidth = 0, this.ellipsisOtherParagraphWidth = 0, "vertical" === character.direction && (this.direction = character.direction, this.widthOrigin = this.width, this.heightOrigin = this.height, this.width = this.heightOrigin, this.height = this.widthOrigin, this.lineHeight = this.height), this.ellipsisStr = "...";
+    this.height > height && (halfDetaHeight = (this.height - height) / 2, deltaAscent = Math.ceil(halfDetaHeight), deltaDescent = Math.floor(halfDetaHeight)), "top" === this.textBaseline ? (this.ascent = halfDetaHeight, this.descent = height - halfDetaHeight) : "bottom" === this.textBaseline ? (this.ascent = height - halfDetaHeight, this.descent = halfDetaHeight) : "middle" === this.textBaseline ? (this.ascent = this.height / 2, this.descent = this.height / 2) : (this.ascent = ascent + deltaAscent, this.descent = descent + deltaDescent), this.length = text.length, this.width = width || 0, this.text = text || "", this.newLine = newLine || !1, this.character = character, this.left = 0, this.top = 0, this.ellipsis = "normal", this.ellipsisWidth = 0, this.ellipsisOtherParagraphWidth = 0, this.space = character.space, this.dx = null !== (_a = character.dx) && void 0 !== _a ? _a : 0, this.dy = null !== (_b = character.dy) && void 0 !== _b ? _b : 0, "vertical" === character.direction && (this.direction = character.direction, this.widthOrigin = this.width, this.heightOrigin = this.height, this.width = this.heightOrigin, this.height = this.widthOrigin, this.lineHeight = this.height), this.ellipsisStr = "...";
   }
   updateWidth() {
     const {
@@ -8310,11 +8254,11 @@ class Paragraph {
       if ("hide" === this.ellipsis) return;
       if ("add" === this.ellipsis) text += this.ellipsisStr, "right" !== textAlign && "end" !== textAlign || (left -= this.ellipsisWidth);else if ("replace" === this.ellipsis) {
         const index = getStrByWithCanvas(text, ("vertical" === direction ? this.height : this.width) - this.ellipsisWidth + this.ellipsisOtherParagraphWidth, this.character, text.length - 1);
-        if (text = text.slice(0, index), text += this.ellipsisStr, "right" === textAlign || "end" === textAlign) {
+        if (text = text.slice(0, index), text += this.ellipsisStr, "right" === textAlign || "end" === textAlign) if ("vertical" === direction) ;else {
           const {
             width: width
           } = measureTextCanvas(this.text.slice(index), this.character, this.ascentDescentMode);
-          "vertical" === direction || (left -= this.ellipsisWidth - width);
+          left -= this.ellipsisWidth - width;
         }
       }
     }
@@ -8325,20 +8269,21 @@ class Paragraph {
     });
   }
   draw(ctx, top, ascent, deltaLeft, isLineFirst, textAlign, lineHeight) {
+    var _a;
     let baseline = top + ascent,
       text = this.text,
-      left = this.left + deltaLeft;
+      left = this.left + deltaLeft + (null !== (_a = this.space) && void 0 !== _a ? _a : 0) / 2;
     baseline += this.top;
     let direction = this.direction;
     if (this.verticalEllipsis) text = this.ellipsisStr, direction = "vertical", baseline -= this.ellipsisWidth / 2;else {
       if ("hide" === this.ellipsis) return;
       if ("add" === this.ellipsis) text += this.ellipsisStr, "right" !== textAlign && "end" !== textAlign || (left -= this.ellipsisWidth);else if ("replace" === this.ellipsis) {
         const index = getStrByWithCanvas(text, ("vertical" === direction ? this.height : this.width) - this.ellipsisWidth + this.ellipsisOtherParagraphWidth, this.character, text.length - 1);
-        if (text = text.slice(0, index), text += this.ellipsisStr, "right" === textAlign || "end" === textAlign) {
+        if (text = text.slice(0, index), text += this.ellipsisStr, "right" === textAlign || "end" === textAlign) if ("vertical" === direction) ;else {
           const {
             width: width
           } = measureTextCanvas(this.text.slice(index), this.character, this.ascentDescentMode);
-          "vertical" === direction || (left -= this.ellipsisWidth - width);
+          left -= this.ellipsisWidth - width;
         }
       }
     }
@@ -8353,7 +8298,7 @@ class Paragraph {
     const {
       lineWidth = 1
     } = this.character;
-    if (this.character.stroke && lineWidth && ctx.strokeText(text, left, baseline), this.character.fill && ctx.fillText(text, left, baseline), this.character.fill) if (this.character.lineThrough || this.character.underline) {
+    if (this.character.stroke && lineWidth && ctx.strokeText(text, left + this.dx, baseline + this.dy), this.character.fill && ctx.fillText(text, left + this.dx, baseline + this.dy), this.character.fill) if (this.character.lineThrough || this.character.underline) {
       if (this.character.underline) {
         const top = 1 + baseline,
           lrtb = getFixedLRTB(left, left + (this.widthOrigin || this.width), top, top + (this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1));
@@ -13158,6 +13103,16 @@ function flatten_simplify(points, tolerance, highestQuality) {
   return points = highestQuality ? points : simplifyRadialDist(points, void 0 !== tolerance ? tolerance * tolerance : 1);
 }
 
+function diff(oldAttrs, newAttrs, getAttr) {
+  const diffObj = {};
+  for (const key in newAttrs) key in oldAttrs && isEqual(oldAttrs[key], newAttrs[key]) || (diffObj[key] = newAttrs[key]);
+  if (getAttr) for (const key in oldAttrs) if (!(key in newAttrs)) {
+    const value = getAttr(key);
+    void 0 !== value && (diffObj[key] = value);
+  }
+  return diffObj;
+}
+
 let loadArcModule = !1;
 const arcModule = new ContainerModule(bind => {
   loadArcModule || (loadArcModule = !0, bind(DefaultCanvasArcRender).toSelf().inSingletonScope(), bind(ArcRender).to(DefaultCanvasArcRender).inSingletonScope(), bind(GraphicRender).toService(ArcRender), bind(ArcRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, ArcRenderContribution));
@@ -15400,14 +15355,17 @@ class Tag extends AbstractComponent {
         tagWidth += symbolPlaceWidth;
         textX += symbolPlaceWidth;
         let textShape;
+        let textWidth;
+        let textHeight;
         const isRich = isRichText({ text }) || type === 'rich';
         if (isRich) {
             const richTextAttrs = Object.assign(Object.assign(Object.assign({}, richTextAttributeTransform(Object.assign({ type, text }, textStyle))), textStyle), { visible: isValid(text) && visible !== false, x: textX, y: 0 });
+            if (isNil(richTextAttrs.lineHeight)) {
+                richTextAttrs.lineHeight = textStyle.fontSize;
+            }
             textShape = group.createOrUpdateChild('tag-text', richTextAttrs, 'richtext');
-            tagWidth += textShape.AABBBounds.width();
-            tagHeight += textShape.AABBBounds.height();
-            tagX += textShape.AABBBounds.x1;
-            tagY += textShape.AABBBounds.y1;
+            textWidth = textShape.AABBBounds.width();
+            textHeight = textShape.AABBBounds.height();
         }
         else {
             const textAttrs = Object.assign(Object.assign({ text: isObject(text) && 'type' in text && text.type === 'text' ? text.text : text, visible: isValid(text) && visible !== false, lineHeight: textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize }, textStyle), { x: textX, y: 0 });
@@ -15415,126 +15373,134 @@ class Tag extends AbstractComponent {
                 textAttrs.lineHeight = textStyle.fontSize;
             }
             textShape = group.createOrUpdateChild('tag-text', textAttrs, 'text');
-            if (!isEmpty(state === null || state === void 0 ? void 0 : state.text)) {
-                textShape.states = state.text;
-            }
             const textBounds = measureTextSize(textAttrs.text, textStyle, (_b = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.getTheme()) === null || _b === void 0 ? void 0 : _b.text);
-            const textWidth = textBounds.width;
-            const textHeight = textBounds.height;
-            tagWidth += textWidth;
-            const size = (_c = shape.size) !== null && _c !== void 0 ? _c : 10;
-            const maxSize = (isNumber(size) ? size : Math.max(size[0], size[1]));
-            tagHeight += Math.max(textHeight, shape.visible ? maxSize : 0);
-            const { textAlign, textBaseline } = textStyle;
-            if (isValid(minWidth) || isValid(maxWidth)) {
-                if (isValid(minWidth) && tagWidth < minWidth) {
-                    tagWidth = minWidth;
-                }
-                if (isValid(maxWidth) && tagWidth > maxWidth) {
-                    tagWidth = maxWidth;
-                    textShape.setAttribute('maxLineWidth', maxWidth - parsedPadding[1] - parsedPadding[2]);
-                }
-            }
-            tagX = 0;
-            tagY = 0;
-            let flag = 0;
-            if (textAlign === 'left' || textAlign === 'start') {
-                flag = 1;
+            textWidth = textBounds.width;
+            textHeight = textBounds.height;
+        }
+        tagWidth += textWidth;
+        const size = (_c = shape.size) !== null && _c !== void 0 ? _c : 10;
+        const maxSize = (isNumber(size) ? size : Math.max(size[0], size[1]));
+        tagHeight += Math.max(textHeight, shape.visible ? maxSize : 0);
+        const { textAlign, textBaseline } = textStyle;
+        if (isValid(minWidth) || isValid(maxWidth)) {
+            if (isValid(minWidth) && tagWidth < minWidth) {
+                tagWidth = minWidth;
             }
-            else if (textAlign === 'right' || textAlign === 'end') {
-                flag = -1;
+            if (isValid(maxWidth) && tagWidth > maxWidth) {
+                tagWidth = maxWidth;
+                textShape.setAttribute('maxLineWidth', maxWidth - parsedPadding[1] - parsedPadding[2]);
             }
-            else if (textAlign === 'center') {
-                flag = 0;
+        }
+        tagX = 0;
+        tagY = 0;
+        let flag = 0;
+        if (textAlign === 'left' || textAlign === 'start') {
+            flag = 1;
+        }
+        else if (textAlign === 'right' || textAlign === 'end') {
+            flag = -1;
+        }
+        else if (textAlign === 'center') {
+            flag = 0;
+        }
+        if (!flag) {
+            tagX -= tagWidth / 2;
+            if (symbol) {
+                symbol.setAttribute('x', (symbol.attribute.x || 0) - textWidth / 2);
             }
-            if (!flag) {
-                tagX -= tagWidth / 2;
-                if (symbol) {
-                    symbol.setAttribute('x', (symbol.attribute.x || 0) - textWidth / 2);
-                }
-                group.setAttribute('x', -symbolPlaceWidth / 2);
+            group.setAttribute('x', -symbolPlaceWidth / 2);
+        }
+        else if (flag < 0) {
+            tagX -= tagWidth;
+            if (symbol) {
+                symbol.setAttribute('x', (symbol.attribute.x || 0) - textWidth);
             }
-            else if (flag < 0) {
-                tagX -= tagWidth;
-                if (symbol) {
-                    symbol.setAttribute('x', (symbol.attribute.x || 0) - textWidth);
-                }
-                group.setAttribute('x', -parsedPadding[1] - symbolPlaceWidth);
-            }
-            else if (flag > 0) {
-                group.setAttribute('x', parsedPadding[3]);
-            }
-            const shouldCenter = containerTextAlign ? containerTextAlign === 'center' : textAlwaysCenter;
-            const shouldRight = containerTextAlign === 'right' || containerTextAlign === 'end';
-            const shouldLeft = containerTextAlign === 'left' || containerTextAlign === 'start';
-            if (shouldCenter && flag) {
-                const containerWidth = tagWidth - parsedPadding[1] - parsedPadding[3];
-                const tsWidth = textWidth + symbolPlaceWidth;
-                const textX = flag === 1
-                    ? (containerWidth - tsWidth) / 2 + symbolPlaceWidth + textWidth / 2
-                    : parsedPadding[0] + symbolPlaceWidth - (tagWidth / 2 + tsWidth / 2 - symbolPlaceWidth) + textWidth / 2;
+            group.setAttribute('x', -parsedPadding[1] - symbolPlaceWidth);
+        }
+        else if (flag > 0) {
+            group.setAttribute('x', parsedPadding[3]);
+        }
+        const shouldCenter = containerTextAlign ? containerTextAlign === 'center' : textAlwaysCenter;
+        const shouldRight = containerTextAlign === 'right' || containerTextAlign === 'end';
+        const shouldLeft = containerTextAlign === 'left' || containerTextAlign === 'start';
+        const updateTextAttrs = (textX, textAlign) => {
+            if (textShape.type === 'richtext') {
                 textShape.setAttributes({
                     x: textX,
-                    textAlign: 'center'
+                    textAlign,
+                    textConfig: array(textShape.attribute.textConfig).map(t => {
+                        return Object.assign(Object.assign({}, t), { textAlign });
+                    })
                 });
-                if (symbol) {
-                    const symbolX = textX - textWidth / 2 - symbolPlaceWidth + maxSize / 2;
-                    symbol.setAttributes({
-                        x: symbolX
-                    });
-                }
             }
-            if (shouldLeft && flag !== 1) {
-                const containerWidth = tagWidth - parsedPadding[1] - parsedPadding[3];
-                const offset = flag === 0
-                    ? -containerWidth / 2 + symbolPlaceWidth / 2
-                    : -tagWidth + parsedPadding[3] + parsedPadding[1] + symbolPlaceWidth;
-                const textX = offset + symbolPlaceWidth;
+            else {
                 textShape.setAttributes({
                     x: textX,
-                    textAlign: 'left'
+                    textAlign
                 });
-                if (symbol) {
-                    const symbolX = offset + maxSize / 2;
-                    symbol.setAttributes({
-                        x: symbolX
-                    });
-                }
             }
-            if (shouldRight && flag !== -1) {
-                const containerWidth = tagWidth - parsedPadding[1] - parsedPadding[3];
-                const textX = flag === 0 ? containerWidth / 2 + symbolPlaceWidth / 2 : containerWidth;
-                textShape.setAttributes({
-                    x: textX,
-                    textAlign: 'right'
+        };
+        if (shouldCenter && flag) {
+            const containerWidth = tagWidth - parsedPadding[1] - parsedPadding[3];
+            const tsWidth = textWidth + symbolPlaceWidth;
+            const textX = flag === 1
+                ? (containerWidth - tsWidth) / 2 + symbolPlaceWidth + textWidth / 2
+                : parsedPadding[0] + symbolPlaceWidth - (tagWidth / 2 + tsWidth / 2 - symbolPlaceWidth) + textWidth / 2;
+            updateTextAttrs(textX, 'center');
+            if (symbol) {
+                const symbolX = textX - textWidth / 2 - symbolPlaceWidth + maxSize / 2;
+                symbol.setAttributes({
+                    x: symbolX
                 });
-                if (symbol) {
-                    const symbolX = textX - textWidth - symbolPlaceWidth + maxSize / 2;
-                    symbol.setAttributes({
-                        x: symbolX
-                    });
-                }
             }
-            if (textBaseline === 'middle') {
-                tagY -= tagHeight / 2;
-                if (symbol) {
-                    symbol.setAttribute('y', 0);
-                }
+        }
+        if (shouldLeft && flag !== 1) {
+            const containerWidth = tagWidth - parsedPadding[1] - parsedPadding[3];
+            const offset = flag === 0
+                ? -containerWidth / 2 + symbolPlaceWidth / 2
+                : -tagWidth + parsedPadding[3] + parsedPadding[1] + symbolPlaceWidth;
+            const textX = offset + symbolPlaceWidth;
+            updateTextAttrs(textX, 'left');
+            if (symbol) {
+                const symbolX = offset + maxSize / 2;
+                symbol.setAttributes({
+                    x: symbolX
+                });
             }
-            else if (textBaseline === 'bottom') {
-                tagY -= tagHeight;
-                if (symbol) {
-                    symbol.setAttribute('y', -textHeight / 2);
-                }
-                group.setAttribute('y', -parsedPadding[2]);
+        }
+        if (shouldRight && flag !== -1) {
+            const containerWidth = tagWidth - parsedPadding[1] - parsedPadding[3];
+            const textX = flag === 0 ? containerWidth / 2 + symbolPlaceWidth / 2 : containerWidth;
+            updateTextAttrs(textX, 'right');
+            if (symbol) {
+                const symbolX = textX - textWidth - symbolPlaceWidth + maxSize / 2;
+                symbol.setAttributes({
+                    x: symbolX
+                });
             }
-            else if (textBaseline === 'top') {
-                group.setAttribute('y', parsedPadding[0]);
-                if (symbol) {
-                    symbol.setAttribute('y', textHeight / 2);
-                }
+        }
+        if (textBaseline === 'middle') {
+            tagY -= tagHeight / 2;
+            if (symbol) {
+                symbol.setAttribute('y', 0);
+            }
+        }
+        else if (textBaseline === 'bottom') {
+            tagY -= tagHeight;
+            if (symbol) {
+                symbol.setAttribute('y', -textHeight / 2);
+            }
+            group.setAttribute('y', -parsedPadding[2]);
+        }
+        else if (textBaseline === 'top') {
+            group.setAttribute('y', parsedPadding[0]);
+            if (symbol) {
+                symbol.setAttribute('y', textHeight / 2);
             }
         }
+        if (!isEmpty(state === null || state === void 0 ? void 0 : state.text)) {
+            textShape.states = state.text;
+        }
         const { visible: bgVisible } = panel, backgroundStyle = __rest(panel, ["visible"]);
         if (visible && isBoolean(bgVisible)) {
             const bgRect = this.createOrUpdateChild('tag-panel', Object.assign(Object.assign({}, backgroundStyle), { visible: bgVisible && !!text, width: tagWidth, height: tagHeight, x: tagX, y: tagY }), 'rect');
@@ -15675,7 +15641,7 @@ class PopTip extends AbstractComponent {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        const { titleStyle = {}, position, contentStyle = {}, panel, logoSymbol, logoText, logoTextStyle = {}, triangleMode = 'default', space = 4, minWidth = 0, maxWidth = Infinity, padding = 4, maxWidthPercent, visible, state, dx = 0, dy = 0 } = this.attribute;
+        const { titleStyle = {}, position, contentStyle = {}, panel, logoSymbol, poptipAnchor = 'position', logoText, logoTextStyle = {}, triangleMode = 'default', space = 4, minWidth = 0, maxWidth = Infinity, padding = 4, maxWidthPercent, visible, state, dx = 0, dy = 0, positionBounds } = this.attribute;
         let { title = '', content = '' } = this.attribute;
         title = this.attribute.titleFormatMethod ? this.attribute.titleFormatMethod(title) : title;
         content = this.attribute.contentFormatMethod ? this.attribute.contentFormatMethod(content) : content;
@@ -15757,11 +15723,12 @@ class PopTip extends AbstractComponent {
                 poptipHeight += contentShape.AABBBounds.height();
             }
         }
-        const layout = position === 'auto';
+        const layout = position === 'auto' || isArray(position);
+        const positionList = isArray(position) ? position : this.positionList;
         let maxBBoxI;
         let maxBBoxSize = -Infinity;
-        for (let i = 0; i < this.positionList.length + 1; i++) {
-            const p = layout ? this.positionList[i === this.positionList.length ? maxBBoxI : i] : position;
+        for (let i = 0; i < positionList.length + 1; i++) {
+            const p = layout ? positionList[i === positionList.length ? maxBBoxI : i] : position;
             let symbolType = 'arrow2Left';
             let offsetX = (isArray(symbolSize) ? symbolSize[0] : symbolSize) / 4;
             let offsetY = 0;
@@ -15770,16 +15737,21 @@ class PopTip extends AbstractComponent {
             }
             else if (triangleMode === 'concise') {
                 symbolType = conciseSymbolMap[p];
-                offsetX = ['tl', 'bl', 'rt', 'rb'].includes(position)
+                offsetX = ['tl', 'bl', 'rt', 'rb'].includes(p)
                     ? (isArray(symbolSize) ? symbolSize[0] : symbolSize) / 2
                     : -(isArray(symbolSize) ? symbolSize[0] : symbolSize) / 2;
-                offsetY = ['tl', 'tr', 'lb', 'rb'].includes(position)
+                offsetY = ['tl', 'tr', 'lb', 'rb'].includes(p)
                     ? -(isArray(symbolSize) ? symbolSize[1] : symbolSize) / 2
                     : (isArray(symbolSize) ? symbolSize[1] : symbolSize) / 2;
             }
             const { angle, offset } = this.getAngleAndOffset(p, popTipWidth, poptipHeight, isArray(spaceSize) ? spaceSize : [spaceSize, spaceSize - lineWidth], symbolType);
+            let anchorPoint = { x: 0, y: 0 };
+            if (poptipAnchor === 'bounds' && positionBounds) {
+                anchorPoint = this.calculateAnchorPoint(p, positionBounds);
+            }
+            let bgSymbol;
             if (isBoolean(bgVisible)) {
-                const bgSymbol = group.createOrUpdateChild('poptip-symbol-panel', Object.assign(Object.assign({}, backgroundStyle), { visible: bgVisible && (contentVisible || titleVisible), x: offsetX, y: offsetY, strokeBoundsBuffer: -1, boundsPadding: -2, anchor: [0, 0], symbolType, angle: angle, dx: offset[0], dy: offset[1] - ((_j = backgroundStyle.space) !== null && _j !== void 0 ? _j : 0), size: symbolSize, zIndex: 9 }), 'symbol');
+                bgSymbol = group.createOrUpdateChild('poptip-symbol-panel', Object.assign(Object.assign({}, backgroundStyle), { visible: bgVisible && (contentVisible || titleVisible), x: offsetX, y: offsetY, strokeBoundsBuffer: -1, boundsPadding: -2, anchor: [0, 0], symbolType, angle: angle, dx: offset[0], dy: offset[1] - ((_j = backgroundStyle.space) !== null && _j !== void 0 ? _j : 0), size: symbolSize, zIndex: 9 }), 'symbol');
                 if (!isEmpty(state === null || state === void 0 ? void 0 : state.panel)) {
                     bgSymbol.states = state.panel;
                 }
@@ -15795,8 +15767,8 @@ class PopTip extends AbstractComponent {
                 }
             }
             group.setAttributes({
-                x: -offset[0] + dx,
-                y: -offset[1] + dy,
+                x: -offset[0] + dx + anchorPoint.x,
+                y: -offset[1] + dy + anchorPoint.y,
                 anchor: [offsetX, offsetY]
             });
             if (logoSymbol) {
@@ -15818,27 +15790,97 @@ class PopTip extends AbstractComponent {
                     group.createOrUpdateChild('poptip-logo-text', Object.assign(Object.assign({}, logoTextStyle), { x: 0, y: poptipHeight / 2, visible: bgVisible && (contentVisible || titleVisible), text: logoText, textAlign: 'center', textBaseline: 'middle', zIndex: 10 }), 'text');
                 }
             }
-            if (layout && range) {
+            if (range) {
                 _tBounds.setValue(0, 0, popTipWidth, poptipHeight).transformWithMatrix(group.globalTransMatrix);
                 const b = _tBounds;
                 const stageBounds = new Bounds().setValue(0, 0, range[0], range[1]);
-                if (rectInsideAnotherRect(b, stageBounds, false)) {
-                    break;
+                if (layout) {
+                    if (rectInsideAnotherRect(b, stageBounds, false)) {
+                        break;
+                    }
+                    else {
+                        const bbox = getRectIntersect(b, stageBounds, false);
+                        const size = (bbox.x2 - bbox.x1) * (bbox.y2 - bbox.y1);
+                        if (size > maxBBoxSize) {
+                            maxBBoxSize = size;
+                            maxBBoxI = i;
+                        }
+                    }
                 }
-                else {
-                    const bbox = getRectIntersect(b, stageBounds, false);
-                    const size = (bbox.x2 - bbox.x1) * (bbox.y2 - bbox.y1);
-                    if (size > maxBBoxSize) {
-                        maxBBoxSize = size;
-                        maxBBoxI = i;
+                if (['top', 'bottom', 'left', 'right'].includes(p)) {
+                    const isVerticalPosition = p === 'top' || p === 'bottom';
+                    const isHorizontalPosition = p === 'left' || p === 'right';
+                    let mainDirectionOverlap = false;
+                    if (isVerticalPosition) {
+                        mainDirectionOverlap = (p === 'top' && b.y1 < 0) || (p === 'bottom' && b.y2 > stageBounds.y2);
+                    }
+                    else if (isHorizontalPosition) {
+                        mainDirectionOverlap = (p === 'left' && b.x1 < 0) || (p === 'right' && b.x2 > stageBounds.x2);
+                    }
+                    if (!mainDirectionOverlap) {
+                        let secondaryOffset = 0;
+                        const szNumber = (isArray(symbolSize) ? symbolSize[1] : symbolSize) / 2;
+                        if (isVerticalPosition) {
+                            if (b.x1 < 0) {
+                                secondaryOffset = -b.x1;
+                            }
+                            else if (b.x2 > stageBounds.x2) {
+                                secondaryOffset = stageBounds.x2 - b.x2;
+                            }
+                            group.setAttribute('x', group.attribute.x + secondaryOffset);
+                            bgSymbol.setAttribute('dx', min(max(bgSymbol.attribute.dx - secondaryOffset, szNumber), b.width() - szNumber));
+                        }
+                        else if (isHorizontalPosition) {
+                            if (b.y1 < 0) {
+                                secondaryOffset = -b.y1;
+                            }
+                            else if (b.y2 > stageBounds.y2) {
+                                secondaryOffset = stageBounds.y2 - b.y2;
+                            }
+                            group.setAttribute('y', group.attribute.y + secondaryOffset);
+                            bgSymbol.setAttribute('dy', min(max(bgSymbol.attribute.dy - secondaryOffset, szNumber), b.height() - szNumber));
+                        }
+                        break;
                     }
                 }
+                if (!layout) {
+                    break;
+                }
             }
             else {
                 break;
             }
         }
     }
+    calculateAnchorPoint(position, positionBounds) {
+        if (!positionBounds) {
+            return { x: 0, y: 0 };
+        }
+        const { x, y } = this.attribute;
+        const { x1, y1, x2, y2 } = positionBounds;
+        const width = x2 - x1;
+        const height = y2 - y1;
+        switch (position) {
+            case 'top':
+            case 'tl':
+            case 'tr':
+                return { x: x1 + width / 2 - x, y: y1 - y };
+            case 'bottom':
+            case 'bl':
+            case 'br':
+                return { x: x1 + width / 2 - x, y: y2 - y };
+            case 'left':
+            case 'lt':
+            case 'lb':
+                return { x: x1 - x, y: y1 + height / 2 - y };
+            case 'right':
+            case 'rt':
+            case 'rb':
+                return { x: x2 - x, y: y1 + height / 2 - y };
+            default:
+                return { x: 0, y: 0 };
+        }
+    }
     getAngleAndOffset(position, width, height, size, symbolType) {
         const sizeH = symbolType === 'arrow2Left' ? size[1] / 2 : size[1];
         switch (position) {
@@ -15944,7 +15986,7 @@ let PopTipRenderContribution = class PopTipRenderContribution {
                 poptip.content = (_a = poptip.content) !== null && _a !== void 0 ? _a : graphic.attribute.text;
             }
             const matrix = graphic.globalTransMatrix;
-            this.poptipComponent.setAttributes(Object.assign(Object.assign({ visibleAll: true, pickable: false, childrenPickable: false }, poptip), { x: matrix.e, y: matrix.f }));
+            this.poptipComponent.setAttributes(Object.assign(Object.assign({ visibleAll: true, pickable: false, childrenPickable: false, poptipAnchor: 'bounds' }, poptip), { x: matrix.e, y: matrix.f, positionBounds: graphic.globalAABBBounds }));
             drawContext.stage.tryInitInteractiveLayer();
             const interactiveLayer = drawContext.stage.getLayer('_builtin_interactive');
             if (interactiveLayer) {
@@ -16896,7 +16938,38 @@ const dispatchClickState = (e, container, lastSelect) => {
     return lastSelect;
 };
 
-class AxisBase extends AbstractComponent {
+class AnimateComponent extends AbstractComponent {
+    _prepareAnimate(defaultAnimation) {
+        if (this.attribute.animation !== false) {
+            const { animation, animationEnter, animationExit, animationUpdate } = this.attribute;
+            const animationCfg = isObject(animation) ? animation : {};
+            this._animationConfig = {
+                enter: animationEnter !== false ? merge({}, defaultAnimation, animationCfg, animationEnter !== null && animationEnter !== void 0 ? animationEnter : {}) : false,
+                exit: animationExit !== false ? merge({}, defaultAnimation, animationCfg, animationExit !== null && animationExit !== void 0 ? animationExit : {}) : false,
+                update: animationUpdate !== false
+                    ? isArray(animationUpdate)
+                        ? animationUpdate
+                        : merge({}, defaultAnimation, animationCfg, animationUpdate !== null && animationUpdate !== void 0 ? animationUpdate : {})
+                    : false
+            };
+        }
+        else {
+            this._animationConfig = {
+                enter: false,
+                exit: false,
+                update: false
+            };
+        }
+    }
+}
+
+const DefaultAxisAnimation = {
+    type: 'default',
+    duration: 300,
+    easing: 'linear'
+};
+
+class AxisBase extends AnimateComponent {
     constructor() {
         super(...arguments);
         this.name = 'axis';
@@ -16923,6 +16996,7 @@ class AxisBase extends AbstractComponent {
     }
     getBoundsWithoutRender(attributes) {
         const currentAttribute = cloneDeep(this.attribute);
+        currentAttribute.scale = this.attribute.scale;
         merge(this.attribute, attributes);
         const offscreenGroup = graphicCreator.group({
             x: this.attribute.x,
@@ -16935,12 +17009,17 @@ class AxisBase extends AbstractComponent {
         return offscreenGroup.AABBBounds;
     }
     render() {
+        this._prepare();
         this._prevInnerView = this._innerView && getElMap(this._innerView);
         this.removeAllChild(true);
         this._innerView = graphicCreator.group({ x: 0, y: 0, pickable: false });
         this.add(this._innerView);
         this._renderInner(this._innerView);
         this._bindEvent();
+        this.runAnimation();
+    }
+    _prepare() {
+        this._prepareAnimate(DefaultAxisAnimation);
     }
     _bindEvent() {
         if (this.attribute.disableTriggerEvent) {
@@ -17262,18 +17341,89 @@ class AxisBase extends AbstractComponent {
         });
         return data;
     }
-    release() {
-        super.release();
-        this._prevInnerView = null;
-        this._innerView = null;
-    }
-}
-
-const methods$1 = {
-    parity: function (items) {
-        return items.filter((item, i) => (i % 2 ? item.setAttribute('opacity', 0) : 1));
-    },
-    greedy: function (items, sep) {
+    runAnimation() {
+        const lastScale = this.lastScale;
+        if (this.attribute.scale) {
+            const scale = this.attribute.scale;
+            this.lastScale = scale.clone();
+            this.lastScale.range([0, 1]);
+        }
+        if (this.attribute.animation && this.applyAnimationState) {
+            const currentInnerView = this.getInnerView();
+            const prevInnerView = this.getPrevInnerView();
+            if (!prevInnerView) {
+                return;
+            }
+            const animationConfig = this._animationConfig;
+            this._newElementAttrMap = {};
+            traverseGroup(currentInnerView, (el) => {
+                var _a;
+                if (el.type !== 'group' && el.id) {
+                    const oldEl = prevInnerView[el.id];
+                    el.setFinalAttribute(el.attribute);
+                    if (oldEl) {
+                        oldEl.release();
+                        const oldAttrs = oldEl.attribute;
+                        const finalAttrs = el.getFinalAttribute();
+                        const diffAttrs = diff(oldAttrs, finalAttrs);
+                        let hasDiff = Object.keys(diffAttrs).length > 0;
+                        if ('opacity' in oldAttrs && finalAttrs.opacity !== oldAttrs.opacity) {
+                            diffAttrs.opacity = (_a = finalAttrs.opacity) !== null && _a !== void 0 ? _a : 1;
+                            hasDiff = true;
+                        }
+                        if (animationConfig.update && hasDiff) {
+                            this._newElementAttrMap[el.id] = {
+                                state: 'update',
+                                node: el,
+                                attrs: el.attribute
+                            };
+                            const oldAttrs = oldEl.attribute;
+                            el.setAttributes(oldAttrs);
+                            el.applyAnimationState(['update'], [
+                                {
+                                    name: 'update',
+                                    animation: Object.assign(Object.assign({ selfOnly: true }, animationConfig.update), { type: 'axisUpdate', customParameters: {
+                                            config: animationConfig.update,
+                                            diffAttrs,
+                                            lastScale
+                                        } })
+                                }
+                            ]);
+                        }
+                    }
+                    else if (animationConfig.enter) {
+                        this._newElementAttrMap[el.id] = {
+                            state: 'enter',
+                            node: el,
+                            attrs: el.attribute
+                        };
+                        el.applyAnimationState(['enter'], [
+                            {
+                                name: 'enter',
+                                animation: Object.assign(Object.assign({}, animationConfig.enter), { type: 'axisEnter', selfOnly: true, customParameters: {
+                                        config: animationConfig.enter,
+                                        lastScale,
+                                        getTickCoord: this.getTickCoord.bind(this)
+                                    } })
+                            }
+                        ]);
+                    }
+                }
+            });
+        }
+    }
+    release() {
+        super.release();
+        this._prevInnerView = null;
+        this._innerView = null;
+    }
+}
+
+const methods$1 = {
+    parity: function (items) {
+        return items.filter((item, i) => (i % 2 ? item.setAttribute('opacity', 0) : 1));
+    },
+    greedy: function (items, sep) {
         let a;
         return items.filter((b, i) => {
             if (!i || !textIntersect(a, b, sep)) {
@@ -17733,666 +17883,1179 @@ class LineAxisMixin {
     }
 }
 
-function loadBasicAxis() {
-    registerGroup();
-    registerLine();
-    registerRichtext();
-    registerText();
+class Easing {
+  constructor() {}
+  static linear(t) {
+    return t;
+  }
+  static none() {
+    return this.linear;
+  }
+  static get(amount) {
+    return amount < -1 ? amount = -1 : amount > 1 && (amount = 1), function (t) {
+      return 0 === amount ? t : amount < 0 ? t * (t * -amount + 1 + amount) : t * ((2 - t) * amount + (1 - amount));
+    };
+  }
+  static getPowIn(pow) {
+    return function (t) {
+      return Math.pow(t, pow);
+    };
+  }
+  static getPowOut(pow) {
+    return function (t) {
+      return 1 - Math.pow(1 - t, pow);
+    };
+  }
+  static getPowInOut(pow) {
+    return function (t) {
+      return (t *= 2) < 1 ? .5 * Math.pow(t, pow) : 1 - .5 * Math.abs(Math.pow(2 - t, pow));
+    };
+  }
+  static getBackIn(amount) {
+    return function (t) {
+      return t * t * ((amount + 1) * t - amount);
+    };
+  }
+  static getBackOut(amount) {
+    return function (t) {
+      return --t * t * ((amount + 1) * t + amount) + 1;
+    };
+  }
+  static getBackInOut(amount) {
+    return amount *= 1.525, function (t) {
+      return (t *= 2) < 1 ? t * t * ((amount + 1) * t - amount) * .5 : .5 * ((t -= 2) * t * ((amount + 1) * t + amount) + 2);
+    };
+  }
+  static sineIn(t) {
+    return 1 - Math.cos(t * Math.PI / 2);
+  }
+  static sineOut(t) {
+    return Math.sin(t * Math.PI / 2);
+  }
+  static sineInOut(t) {
+    return -(Math.cos(Math.PI * t) - 1) / 2;
+  }
+  static expoIn(t) {
+    return 0 === t ? 0 : Math.pow(2, 10 * t - 10);
+  }
+  static expoOut(t) {
+    return 1 === t ? 1 : 1 - Math.pow(2, -10 * t);
+  }
+  static expoInOut(t) {
+    return 0 === t ? 0 : 1 === t ? 1 : t < .5 ? Math.pow(2, 20 * t - 10) / 2 : (2 - Math.pow(2, -20 * t + 10)) / 2;
+  }
+  static circIn(t) {
+    return -(Math.sqrt(1 - t * t) - 1);
+  }
+  static circOut(t) {
+    return Math.sqrt(1 - --t * t);
+  }
+  static circInOut(t) {
+    return (t *= 2) < 1 ? -.5 * (Math.sqrt(1 - t * t) - 1) : .5 * (Math.sqrt(1 - (t -= 2) * t) + 1);
+  }
+  static bounceOut(t) {
+    return t < 1 / 2.75 ? 7.5625 * t * t : t < 2 / 2.75 ? 7.5625 * (t -= 1.5 / 2.75) * t + .75 : t < 2.5 / 2.75 ? 7.5625 * (t -= 2.25 / 2.75) * t + .9375 : 7.5625 * (t -= 2.625 / 2.75) * t + .984375;
+  }
+  static bounceIn(t) {
+    return 1 - Easing.bounceOut(1 - t);
+  }
+  static bounceInOut(t) {
+    return t < .5 ? .5 * Easing.bounceIn(2 * t) : .5 * Easing.bounceOut(2 * t - 1) + .5;
+  }
+  static getElasticIn(amplitude, period) {
+    return function (t) {
+      if (0 === t || 1 === t) return t;
+      const s = period / pi2 * Math.asin(1 / amplitude);
+      return -amplitude * Math.pow(2, 10 * (t -= 1)) * Math.sin((t - s) * pi2 / period);
+    };
+  }
+  static getElasticOut(amplitude, period) {
+    return function (t) {
+      if (0 === t || 1 === t) return t;
+      const s = period / pi2 * Math.asin(1 / amplitude);
+      return amplitude * Math.pow(2, -10 * t) * Math.sin((t - s) * pi2 / period) + 1;
+    };
+  }
+  static getElasticInOut(amplitude, period) {
+    return function (t) {
+      const s = period / pi2 * Math.asin(1 / amplitude);
+      return (t *= 2) < 1 ? amplitude * Math.pow(2, 10 * (t -= 1)) * Math.sin((t - s) * pi2 / period) * -.5 : amplitude * Math.pow(2, -10 * (t -= 1)) * Math.sin((t - s) * pi2 / period) * .5 + 1;
+    };
+  }
+  static registerFunc(name, func) {
+    Easing[name] = func;
+  }
 }
-function loadLineAxisComponent() {
-    loadBasicAxis();
-    registerRect();
+function flicker(t, n) {
+  const step = 1 / n;
+  let flag = 1;
+  for (; t > step;) t -= step, flag *= -1;
+  const v = flag * t / step;
+  return v > 0 ? v : 1 + v;
 }
-function loadCircleAxisComponent() {
-    loadBasicAxis();
-    registerCircle();
+Easing.quadIn = Easing.getPowIn(2), Easing.quadOut = Easing.getPowOut(2), Easing.quadInOut = Easing.getPowInOut(2), Easing.cubicIn = Easing.getPowIn(3), Easing.cubicOut = Easing.getPowOut(3), Easing.cubicInOut = Easing.getPowInOut(3), Easing.quartIn = Easing.getPowIn(4), Easing.quartOut = Easing.getPowOut(4), Easing.quartInOut = Easing.getPowInOut(4), Easing.quintIn = Easing.getPowIn(5), Easing.quintOut = Easing.getPowOut(5), Easing.quintInOut = Easing.getPowInOut(5), Easing.backIn = Easing.getBackIn(1.7), Easing.backOut = Easing.getBackOut(1.7), Easing.backInOut = Easing.getBackInOut(1.7), Easing.elasticIn = Easing.getElasticIn(1, .3), Easing.elasticOut = Easing.getElasticOut(1, .3), Easing.elasticInOut = Easing.getElasticInOut(1, .3 * 1.5), Easing.easeInOutQuad = t => (t /= .5) < 1 ? .5 * Math.pow(t, 2) : -.5 * ((t -= 2) * t - 2), Easing.easeOutElastic = x => {
+  const c4 = 2 * Math.PI / 3;
+  return 0 === x ? 0 : 1 === x ? 1 : Math.pow(2, -10 * x) * Math.sin((10 * x - .75) * c4) + 1;
+}, Easing.easeInOutElastic = x => {
+  const c5 = 2 * Math.PI / 4.5;
+  return 0 === x ? 0 : 1 === x ? 1 : x < .5 ? -Math.pow(2, 20 * x - 10) * Math.sin((20 * x - 11.125) * c5) / 2 : Math.pow(2, -20 * x + 10) * Math.sin((20 * x - 11.125) * c5) / 2 + 1;
+};
+for (let i = 0; i < 10; i++) Easing[`flicker${i}`] = t => flicker(t, i);
+for (let i = 2; i < 10; i++) Easing[`aIn${i}`] = t => i * t * t + (1 - i) * t;
+
+function interpolateNumber(from, to, ratio) {
+  return from + (to - from) * ratio;
 }
-function loadLineAxisGridComponent() {
-    registerGroup();
-    registerPath();
+
+class InterpolateUpdateStore {
+  constructor() {
+    this.opacity = (key, from, to, ratio, step, target) => {
+      target.attribute.opacity = interpolateNumber(from, to, ratio);
+    }, this.baseOpacity = (key, from, to, ratio, step, target) => {
+      target.attribute.baseOpacity = interpolateNumber(from, to, ratio);
+    }, this.fillOpacity = (key, from, to, ratio, step, target) => {
+      target.attribute.fillOpacity = interpolateNumber(from, to, ratio);
+    }, this.strokeOpacity = (key, from, to, ratio, step, target) => {
+      target.attribute.strokeOpacity = interpolateNumber(from, to, ratio);
+    }, this.zIndex = (key, from, to, ratio, step, target) => {
+      target.attribute.zIndex = interpolateNumber(from, to, ratio);
+    }, this.backgroundOpacity = (key, from, to, ratio, step, target) => {
+      target.attribute.backgroundOpacity = interpolateNumber(from, to, ratio);
+    }, this.shadowOffsetX = (key, from, to, ratio, step, target) => {
+      target.attribute.shadowOffsetX = interpolateNumber(from, to, ratio);
+    }, this.shadowOffsetY = (key, from, to, ratio, step, target) => {
+      target.attribute.shadowOffsetY = interpolateNumber(from, to, ratio);
+    }, this.shadowBlur = (key, from, to, ratio, step, target) => {
+      target.attribute.shadowBlur = interpolateNumber(from, to, ratio);
+    }, this.fill = (key, from, to, ratio, step, target) => {
+      target.attribute.fill = interpolateColor(from, to, ratio, !1);
+    }, this.fillPure = (key, from, to, ratio, step, target) => {
+      target.attribute.fill = step.fromParsedProps.fill ? interpolatePureColorArrayToStr(step.fromParsedProps.fill, step.toParsedProps.fill, ratio) : step.toParsedProps.fill;
+    }, this.stroke = (key, from, to, ratio, step, target) => {
+      target.attribute.stroke = interpolateColor(from, to, ratio, !1);
+    }, this.strokePure = (key, from, to, ratio, step, target) => {
+      target.attribute.stroke = step.fromParsedProps.stroke ? interpolatePureColorArrayToStr(step.fromParsedProps.stroke, step.toParsedProps.stroke, ratio) : step.toParsedProps.stroke;
+    }, this.width = (key, from, to, ratio, step, target) => {
+      target.attribute.width = interpolateNumber(from, to, ratio), target.addUpdateBoundTag();
+    }, this.height = (key, from, to, ratio, step, target) => {
+      target.attribute.height = interpolateNumber(from, to, ratio), target.addUpdateBoundTag();
+    }, this.x = (key, from, to, ratio, step, target) => {
+      target.attribute.x = interpolateNumber(from, to, ratio), target.addUpdateBoundTag(), target.addUpdatePositionTag();
+    }, this.y = (key, from, to, ratio, step, target) => {
+      target.attribute.y = interpolateNumber(from, to, ratio), target.addUpdateBoundTag(), target.addUpdatePositionTag();
+    }, this.angle = (key, from, to, ratio, step, target) => {
+      target.attribute.angle = interpolateNumber(from, to, ratio), target.addUpdateBoundTag(), target.addUpdatePositionTag();
+    }, this.scaleX = (key, from, to, ratio, step, target) => {
+      target.attribute.scaleX = interpolateNumber(from, to, ratio), target.addUpdateBoundTag(), target.addUpdatePositionTag();
+    }, this.scaleY = (key, from, to, ratio, step, target) => {
+      target.attribute.scaleY = interpolateNumber(from, to, ratio), target.addUpdateBoundTag(), target.addUpdatePositionTag();
+    }, this.lineWidth = (key, from, to, ratio, step, target) => {
+      target.attribute.lineWidth = interpolateNumber(from, to, ratio), target.addUpdateBoundTag();
+    }, this.startAngle = (key, from, to, ratio, step, target) => {
+      target.attribute.startAngle = interpolateNumber(from, to, ratio), target.addUpdateBoundTag();
+    }, this.endAngle = (key, from, to, ratio, step, target) => {
+      target.attribute.endAngle = interpolateNumber(from, to, ratio), target.addUpdateBoundTag();
+    }, this.radius = (key, from, to, ratio, step, target) => {
+      target.attribute.radius = interpolateNumber(from, to, ratio), target.addUpdateBoundTag();
+    }, this.outerRadius = (key, from, to, ratio, step, target) => {
+      target.attribute.outerRadius = interpolateNumber(from, to, ratio), target.addUpdateBoundTag();
+    }, this.innerRadius = (key, from, to, ratio, step, target) => {
+      target.attribute.innerRadius = interpolateNumber(from, to, ratio), target.addUpdateBoundTag();
+    }, this.size = (key, from, to, ratio, step, target) => {
+      target.attribute.size = interpolateNumber(from, to, ratio), target.addUpdateBoundTag();
+    }, this.points = (key, from, to, ratio, step, target) => {
+      target.attribute.points = pointsInterpolation(from, to, ratio), target.addUpdateBoundTag();
+    };
+  }
 }
-function loadCircleAxisGridComponent() {
-    registerGroup();
-    registerPath();
+const interpolateUpdateStore = new InterpolateUpdateStore();
+function commonInterpolateUpdate(key, from, to, ratio, step, target) {
+  if (Number.isFinite(to) && Number.isFinite(from)) return target.attribute[key] = from + (to - from) * ratio, !0;
+  if (Array.isArray(to) && Array.isArray(from) && to.length === from.length) {
+    const nextList = [];
+    let valid = !0;
+    for (let i = 0; i < to.length; i++) {
+      const v = from[i],
+        val = v + (to[i] - v) * ratio;
+      if (!Number.isFinite(val)) {
+        valid = !1;
+        break;
+      }
+      nextList.push(val);
+    }
+    return valid && (target.attribute[key] = nextList), !0;
+  }
+  return !1;
 }
 
-loadLineAxisComponent();
-class LineAxis extends AxisBase {
-    constructor(attributes, options) {
-        super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, LineAxis.defaultAttributes, attributes), options);
-    }
-    _renderInner(container) {
-        var _a;
-        this._breaks = null;
-        if (this.attribute.breaks && this.attribute.breaks.length) {
-            const transformedBreaks = [];
-            for (let index = 0; index < this.attribute.breaks.length; index++) {
-                const aBreak = this.attribute.breaks[index];
-                const { range, breakSymbol, rawRange } = aBreak;
-                transformedBreaks.push({
-                    startPoint: this.getTickCoord(range[0]),
-                    endPoint: this.getTickCoord(range[1]),
-                    range,
-                    breakSymbol,
-                    rawRange
-                });
-            }
-            this._breaks = transformedBreaks;
-        }
-        super._renderInner(container);
-        if (this._breaks && this._breaks.length) {
-            this._breaks.forEach((b, index) => {
-                const { startPoint, endPoint, breakSymbol, rawRange } = b;
-                if ((breakSymbol === null || breakSymbol === void 0 ? void 0 : breakSymbol.visible) !== false) {
-                    const axisBreakGroup = graphicCreator.group({
-                        zIndex: TopZIndex
-                    });
-                    axisBreakGroup.name = AXIS_ELEMENT_NAME.axisBreak;
-                    axisBreakGroup.id = this._getNodeId(`${AXIS_ELEMENT_NAME.axisBreak}-${index}`);
-                    axisBreakGroup.data = rawRange;
-                    const symbolStyle = getAxisBreakSymbolAttrs(breakSymbol);
-                    const shape1 = graphicCreator.symbol(Object.assign({ x: startPoint.x, y: startPoint.y }, symbolStyle));
-                    shape1.name = AXIS_ELEMENT_NAME.axisBreakSymbol;
-                    const shape2 = graphicCreator.symbol(Object.assign({ x: endPoint.x, y: endPoint.y }, symbolStyle));
-                    shape2.name = AXIS_ELEMENT_NAME.axisBreakSymbol;
-                    axisBreakGroup.add(shape1);
-                    axisBreakGroup.add(shape2);
-                    container.add(axisBreakGroup);
-                }
-            });
-        }
-        const { panel } = this.attribute;
-        if (panel && panel.visible) {
-            const axisContainer = this.axisContainer;
-            const axisContainerBounds = axisContainer.AABBBounds;
-            const bgRect = graphicCreator.rect(Object.assign({ x: axisContainerBounds.x1, y: axisContainerBounds.y1, width: axisContainerBounds.width(), height: axisContainerBounds.height() }, panel.style));
-            bgRect.name = AXIS_ELEMENT_NAME.background;
-            bgRect.id = this._getNodeId('background');
-            bgRect.states = merge({}, DEFAULT_STATES$1, (_a = panel.state) !== null && _a !== void 0 ? _a : {});
-            axisContainer.insertBefore(bgRect, axisContainer.firstChild);
-        }
-    }
-    renderLine(container) {
-        const { start, end, line } = this.attribute;
-        const _a = line, { startSymbol, endSymbol, style, state } = _a, restLineAttrs = __rest(_a, ["startSymbol", "endSymbol", "style", "state"]);
-        const lineAttrs = Object.assign({ startSymbol,
-            endSymbol, lineStyle: style }, restLineAttrs);
-        if (this._breaks && this._breaks.length) {
-            const linePoints = [];
-            let lastStartPoint = start;
-            this._breaks.forEach(b => {
-                const { startPoint, endPoint } = b;
-                linePoints.push([lastStartPoint, startPoint]);
-                lastStartPoint = endPoint;
-            });
-            linePoints.push([lastStartPoint, end]);
-            lineAttrs.points = linePoints;
-            lineAttrs.multiSegment = true;
-        }
-        else {
-            lineAttrs.points = [start, end];
-        }
-        if (!isEmpty(state)) {
-            lineAttrs.state = {
-                line: merge({}, DEFAULT_STATES$1, state),
-                symbol: merge({}, DEFAULT_STATES$1, state)
-            };
-        }
-        const axisLineGroup = new Segment(lineAttrs);
-        axisLineGroup.name = AXIS_ELEMENT_NAME.line;
-        axisLineGroup.id = this._getNodeId('line');
-        container.add(axisLineGroup);
-    }
-    getTextAlign(vector) {
-        let align = 'center';
-        if (isNumberClose(vector[0], 0)) {
-            if (isNumberClose(vector[1], 0)) {
-                if (Object.is(vector[1], -0)) {
-                    align = 'start';
-                }
-                else if (Object.is(vector[0], -0)) {
-                    align = 'end';
-                }
-            }
-            else {
-                align = 'center';
-            }
-        }
-        else if (vector[0] > 0) {
-            align = 'start';
-        }
-        else if (vector[0] < 0) {
-            align = 'end';
-        }
-        return align;
+function noop() {}
+class Step {
+  constructor(type, props, duration, easing) {
+    this._startTime = 0, this._hasFirstRun = !1, this._syncAttributeUpdate = () => {
+      this.target.setAttributes(this.target.attribute);
+    }, this.type = type, this.props = props, this.duration = duration, this.easing = easing ? "function" == typeof easing ? easing : Easing[easing] : Easing.linear, "wait" === type && (this.onUpdate = noop), this.id = Generator.GenAutoIncrementId(), this.syncAttributeUpdate = noop;
+  }
+  bind(target, animate) {
+    this.target = target, this.animate = animate, this.onBind(), this.syncAttributeUpdate();
+  }
+  append(step) {
+    this.next = step, step.prev = this, step.setStartTime(this.getStartTime() + this.duration, !1);
+  }
+  updateDownstreamStartTimes() {
+    let currentStep = this.next,
+      currentStartTime = this._startTime + this.duration;
+    for (; currentStep;) currentStep.setStartTime(currentStartTime, !1), currentStartTime += currentStep.duration, currentStep = currentStep.next;
+    this.animate.updateDuration();
+  }
+  getLastProps() {
+    return this.prev ? this.prev.props || {} : this.animate.getStartProps();
+  }
+  setDuration(duration) {
+    let updateDownstream = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
+    this.duration = duration, updateDownstream && this.updateDownstreamStartTimes();
+  }
+  getDuration() {
+    return this.duration;
+  }
+  determineInterpolateUpdateFunction() {
+    if (!this.props) return;
+    const funcs = [];
+    this.propKeys.forEach(key => {
+      if ("fill" === key || "stroke" === key) {
+        const from = this.fromProps[key],
+          to = this.props[key];
+        if (isString(from) && isString(to)) {
+          const fromArray = ColorStore.Get(from, ColorType.Color255),
+            toArray = ColorStore.Get(to, ColorType.Color255);
+          this.fromParsedProps || (this.fromParsedProps = {}), this.toParsedProps || (this.toParsedProps = {}), this.fromParsedProps[key] = fromArray, this.toParsedProps[key] = toArray, funcs.push(interpolateUpdateStore["fill" === key ? "fillPure" : "strokePure"]);
+        } else interpolateUpdateStore[key] ? funcs.push(interpolateUpdateStore[key]) : funcs.push(commonInterpolateUpdate);
+      } else interpolateUpdateStore[key] ? funcs.push(interpolateUpdateStore[key]) : funcs.push(commonInterpolateUpdate);
+    }), this.interpolateUpdateFunctions = funcs;
+  }
+  setStartTime(time) {
+    let updateDownstream = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
+    this._startTime = time, updateDownstream && this.updateDownstreamStartTimes();
+  }
+  getStartTime() {
+    return this._startTime;
+  }
+  onBind() {
+    "glyph" === this.target.type && (this.syncAttributeUpdate = this._syncAttributeUpdate);
+  }
+  onFirstRun() {}
+  onStart() {
+    if (!this._hasFirstRun) {
+      this._hasFirstRun = !0, this.fromProps = this.getLastProps();
+      const startProps = this.animate.getStartProps();
+      this.propKeys && this.propKeys.forEach(key => {
+        var _a;
+        this.fromProps[key] = null !== (_a = this.fromProps[key]) && void 0 !== _a ? _a : startProps[key];
+      }), this.determineInterpolateUpdateFunction(), this.tryPreventConflict(), this.trySyncStartProps(), this.onFirstRun();
     }
-    getTitleAttribute() {
-        var _a, _b, _c;
-        const _d = this.attribute.title, { position = 'middle', space = 4, textStyle = {}, autoRotate = true, shape, background, state = {}, maxWidth } = _d, restAttrs = __rest(_d, ["position", "space", "textStyle", "autoRotate", "shape", "background", "state", "maxWidth"]);
-        let percent = 0.5;
-        if (position === 'start') {
-            percent = 0;
-        }
-        else if (position === 'end') {
-            percent = 1;
-        }
-        const { verticalFactor = 1 } = this.attribute;
-        const factor = -1 * verticalFactor;
-        const point = this.getTickCoord(percent);
-        const axisVector = this.getRelativeVector();
-        let labelLength = 0;
-        if (((_a = this.attribute.label) === null || _a === void 0 ? void 0 : _a.visible) && this.attribute.label.inside === false) {
-            const space = +get(this.attribute, 'label.space', 4);
-            labelLength += space;
-            const layerCount = Object.keys(this.axisLabelLayerSize).length;
-            if (axisVector[1] === 0) {
-                const labelBoundsHeight = this.axisLabelsContainer ? this.axisLabelsContainer.AABBBounds.height() : 0;
-                if (isFinite(labelBoundsHeight)) {
-                    labelLength += labelBoundsHeight + (layerCount - 1) * space;
-                }
-                else {
-                    labelLength = 0;
-                }
-            }
-            else {
-                if (axisVector[0] === 0) {
-                    if (this.axisLabelsContainer &&
-                        this.axisLabelsContainer.AABBBounds &&
-                        !this.axisLabelsContainer.AABBBounds.empty()) {
-                        const baseX = this.axisLabelLayerSize[0].labelPos;
-                        const bounds = this.axisLabelsContainer.AABBBounds;
-                        labelLength +=
-                            (factor === 1
-                                ? bounds.x2 > baseX
-                                    ? Math.min(bounds.x2 - baseX, bounds.width())
-                                    : 0
-                                : bounds.x1 < baseX
-                                    ? Math.min(baseX - bounds.x1, bounds.width())
-                                    : 0) +
-                                (layerCount - 1) * space;
-                    }
-                    else {
-                        labelLength = 0;
-                    }
-                }
-                else {
-                    Object.keys(this.axisLabelLayerSize).forEach((layer, index) => {
-                        labelLength += this.axisLabelLayerSize[layer].width + (index > 0 ? space : 0);
-                    });
-                }
-            }
-        }
-        let tickLength = 0;
-        if (((_b = this.attribute.tick) === null || _b === void 0 ? void 0 : _b.visible) && this.attribute.tick.inside === false) {
-            tickLength = this.attribute.tick.length || 4;
-        }
-        if (((_c = this.attribute.subTick) === null || _c === void 0 ? void 0 : _c.visible) && this.attribute.subTick.inside === false) {
-            tickLength = Math.max(tickLength, this.attribute.subTick.length || 2);
-        }
-        const offset = tickLength + labelLength + space;
-        const titlePoint = this.getVerticalCoord(point, offset, false);
-        const vector = this.getVerticalVector(offset, false, { x: 0, y: 0 });
-        let { angle } = restAttrs;
-        let textAlign;
-        if (position === 'start') {
-            textAlign = 'start';
-        }
-        else if (position === 'end') {
-            textAlign = 'end';
-        }
-        else {
-            textAlign = 'center';
-        }
-        let textBaseline;
-        if (isNil(angle) && autoRotate) {
-            const v1 = [1, 0];
-            const radian = angleTo(axisVector, v1, true);
-            angle = radian;
-            const { verticalFactor = 1 } = this.attribute;
-            const factor = -1 * verticalFactor;
-            if (factor === 1) {
-                textBaseline = 'bottom';
-            }
-            else {
-                textBaseline = 'top';
-            }
-        }
-        else {
-            textAlign = this.getTextAlign(vector);
-            textBaseline = this.getTextBaseline(vector, false);
-        }
-        let maxTagWidth = maxWidth;
-        if (isNil(maxTagWidth)) {
-            const { verticalLimitSize, verticalMinSize, orient } = this.attribute;
-            const limitSize = Math.min(verticalLimitSize || Infinity, verticalMinSize || Infinity);
-            if (isValidNumber(limitSize)) {
-                const isX = orient === 'bottom' || orient === 'top';
-                if (isX) {
-                    if (angle !== Math.PI / 2) {
-                        const cosValue = Math.abs(Math.cos(angle !== null && angle !== void 0 ? angle : 0));
-                        maxTagWidth = cosValue < 1e-6 ? Infinity : this.attribute.end.x / cosValue;
-                    }
-                    else {
-                        maxTagWidth = limitSize - offset;
-                    }
-                }
-                else {
-                    if (angle && angle !== 0) {
-                        const sinValue = Math.abs(Math.sin(angle));
-                        maxTagWidth = sinValue < 1e-6 ? Infinity : this.attribute.end.y / sinValue;
-                    }
-                    else {
-                        maxTagWidth = limitSize - offset;
-                    }
-                }
-            }
-        }
-        const attrs = Object.assign(Object.assign(Object.assign({}, titlePoint), restAttrs), { maxWidth: maxTagWidth, textStyle: Object.assign({ textAlign,
-                textBaseline }, textStyle), state: {
-                text: merge({}, DEFAULT_STATES$1, state.text),
-                shape: merge({}, DEFAULT_STATES$1, state.shape),
-                panel: merge({}, DEFAULT_STATES$1, state.background)
-            } });
-        attrs.angle = angle;
-        if (shape && shape.visible) {
-            attrs.shape = Object.assign({ visible: true }, shape.style);
-            if (shape.space) {
-                attrs.space = shape.space;
-            }
-        }
-        if (background && background.visible) {
-            attrs.panel = Object.assign({ visible: true }, background.style);
-        }
-        return attrs;
-    }
-    getTextBaseline(vector, inside) {
-        let base = 'middle';
-        const { verticalFactor = 1 } = this.attribute;
-        const factor = (inside ? 1 : -1) * verticalFactor;
-        if (isNumberClose(vector[1], 0)) {
-            if (isNumberClose(vector[0], 0) && !Object.is(vector[0], -0) && !Object.is(vector[1], -0)) {
-                base = factor === 1 ? 'bottom' : 'top';
-            }
-            else {
-                base = 'middle';
-            }
-        }
-        else if (vector[1] > 0) {
-            base = 'top';
-        }
-        else if (vector[1] < 0) {
-            base = 'bottom';
-        }
-        return base;
-    }
-    getLabelAlign(vector, inside, angle) {
-        const orient = this.attribute.orient;
-        const isCartesian = ['top', 'bottom', 'right', 'left'].includes(orient);
-        if (isCartesian || (vector[0] === 0 && vector[1] === 0)) {
-            if (orient === 'top' || orient === 'bottom') {
-                return getXAxisLabelAlign(inside ? (orient === 'bottom' ? 'top' : 'bottom') : orient, angle);
-            }
-            if (orient === 'left' || orient === 'right') {
-                return getYAxisLabelAlign(inside ? (orient === 'left' ? 'right' : 'left') : orient, angle);
-            }
-        }
-        return {
-            textAlign: this.getTextAlign(vector),
-            textBaseline: this.getTextBaseline(vector, inside)
-        };
-    }
-    beforeLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
-        var _a, _b, _c, _d;
-        const { flush = false } = this.attribute.label || {};
-        if (flush && labelShapes.length) {
-            const { orient, start: axisStart, end: axisEnd } = this.attribute;
-            const isX = orient === 'bottom' || orient === 'top';
-            const first = labelShapes[0];
-            const last$1 = last(labelShapes);
-            const isInverse = isX ? first.attribute.x > last$1.attribute.x : first.attribute.y < last$1.attribute.y;
-            if (isX) {
-                const leftMostLabel = isInverse ? last$1 : first;
-                const rightMostLabel = isInverse ? first : last$1;
-                const left = axisStart.x;
-                const right = axisEnd.x;
-                const leftBound = leftMostLabel.AABBBounds.x1;
-                const rightBound = rightMostLabel.AABBBounds.x2;
-                if (leftBound < left) {
-                    const angle = leftMostLabel.attribute.angle;
-                    if (angle) {
-                        leftMostLabel.setAttributes({ dx: ((_a = leftMostLabel.attribute.dx) !== null && _a !== void 0 ? _a : 0) + left - leftBound });
-                    }
-                    else {
-                        leftMostLabel.setAttributes({
-                            x: left,
-                            textAlign: 'left'
-                        });
-                    }
-                }
-                if (rightBound > right) {
-                    const angle = rightMostLabel.attribute.angle;
-                    if (angle) {
-                        rightMostLabel.setAttributes({ dx: ((_b = rightMostLabel.attribute.dx) !== null && _b !== void 0 ? _b : 0) + right - rightBound });
-                    }
-                    else {
-                        rightMostLabel.setAttributes({
-                            x: right,
-                            textAlign: 'right'
-                        });
-                    }
-                }
-            }
-            else {
-                const bottomMostLabel = isInverse ? last$1 : first;
-                const topMostLabel = isInverse ? first : last$1;
-                const bottomBound = bottomMostLabel.AABBBounds.y2;
-                const topBound = topMostLabel.AABBBounds.y1;
-                const top = axisStart.y;
-                const bottom = axisEnd.y;
-                if (topBound < top) {
-                    const angle = topMostLabel.attribute.angle;
-                    if (angle) {
-                        topMostLabel.setAttributes({
-                            dy: ((_c = topMostLabel.attribute.dy) !== null && _c !== void 0 ? _c : 0) + top - topBound
-                        });
-                    }
-                    else {
-                        topMostLabel.setAttributes({
-                            y: top,
-                            textBaseline: 'top'
-                        });
-                    }
-                }
-                if (bottomBound > bottom) {
-                    const angle = bottomMostLabel.attribute.angle;
-                    if (angle) {
-                        bottomMostLabel.setAttributes({
-                            dy: ((_d = bottomMostLabel.attribute.dy) !== null && _d !== void 0 ? _d : 0) + bottom - bottomBound
-                        });
-                    }
-                    else {
-                        bottomMostLabel.setAttributes({
-                            y: bottom,
-                            textBaseline: 'bottom'
-                        });
-                    }
-                }
-            }
-        }
-        return;
-    }
-    handleLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
-        if (isEmpty(labelShapes)) {
-            return;
-        }
-        const { verticalLimitSize, label, orient } = this.attribute;
-        const limitLength = this._getAxisLabelLimitLength(verticalLimitSize, layerCount);
-        const { layoutFunc, autoRotate: autoRotate$1, autoRotateAngle, autoLimit: autoLimit$1, limitEllipsis, autoHide: autoHide$1, autoHideMethod, autoHideSeparation, lastVisible, firstVisible, autoWrap: autoWrap$1, overflowLimitLength } = label;
-        if (isFunction(layoutFunc)) {
-            layoutFunc(labelShapes, labelData, layer, this);
-        }
-        else {
-            if (autoRotate$1) {
-                autoRotate(labelShapes, {
-                    labelRotateAngle: autoRotateAngle,
-                    orient
-                });
-            }
-            else if (autoWrap$1) {
-                const isVertical = orient === 'left' || orient === 'right';
-                const axisLength = isVertical
-                    ? Math.abs(this.attribute.start.y - this.attribute.end.y)
-                    : Math.abs(this.attribute.start.x - this.attribute.end.x);
-                autoWrap(labelShapes, { orient, limitLength, axisLength, ellipsis: limitEllipsis });
-            }
-            if (!autoWrap$1 && autoLimit$1 && isValidNumber(limitLength) && limitLength > 0) {
-                const isVertical = orient === 'left' || orient === 'right';
-                const axisLength = isVertical
-                    ? Math.abs(this.attribute.start.y - this.attribute.end.y)
-                    : Math.abs(this.attribute.start.x - this.attribute.end.x);
-                const verticalLimitLength = isVertical
-                    ? axisLength / labelShapes.length
-                    : !autoHide$1 && !autoRotate$1
-                        ? axisLength / labelShapes.length
-                        : Infinity;
-                autoLimit(labelShapes, {
-                    limitLength,
-                    verticalLimitLength,
-                    ellipsis: limitEllipsis,
-                    orient,
-                    axisLength,
-                    overflowLimitLength
-                });
-            }
-            if (autoHide$1) {
-                autoHide(labelShapes, {
-                    orient,
-                    method: autoHideMethod,
-                    separation: autoHideSeparation,
-                    lastVisible,
-                    firstVisible
-                });
-            }
-        }
-    }
-    afterLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
-        const { verticalLimitSize, orient } = this.attribute;
-        const isHorizontal = orient === 'bottom' || orient === 'top';
-        const axisLabelContainerBounds = labelContainer.AABBBounds;
-        let axisLabelContainerSize = isHorizontal ? axisLabelContainerBounds.height() : axisLabelContainerBounds.width();
-        const { verticalMinSize } = this.attribute;
-        if (isValidNumber(verticalMinSize) && (!isValidNumber(verticalLimitSize) || verticalMinSize <= verticalLimitSize)) {
-            const minSize = this._getAxisLabelLimitLength(verticalMinSize, layerCount);
-            axisLabelContainerSize = Math.max(axisLabelContainerSize, minSize);
-            let x;
-            let y;
-            if (orient === 'left') {
-                x = axisLabelContainerBounds.x2 - axisLabelContainerSize;
-                y = axisLabelContainerBounds.y1;
-            }
-            else if (orient === 'right') {
-                x = axisLabelContainerBounds.x1;
-                y = axisLabelContainerBounds.y1;
-            }
-            else if (orient === 'top') {
-                x = axisLabelContainerBounds.x1;
-                y = axisLabelContainerBounds.y2 - axisLabelContainerSize;
-            }
-            else if (orient === 'bottom') {
-                x = axisLabelContainerBounds.x1;
-                y = axisLabelContainerBounds.y1;
-            }
-            const bgRect = graphicCreator.rect({
-                x,
-                y,
-                width: isHorizontal ? axisLabelContainerBounds.width() : axisLabelContainerSize,
-                height: isHorizontal ? axisLabelContainerSize : axisLabelContainerBounds.height(),
-                pickable: false
-            });
-            bgRect.name = AXIS_ELEMENT_NAME.axisLabelBackground;
-            bgRect.id = this._getNodeId('axis-label-background');
-            labelContainer.insertBefore(bgRect, labelContainer.firstChild);
-        }
-        if (isValid(this.attribute.label.containerAlign)) {
-            let start;
-            if (orient === 'left') {
-                start = axisLabelContainerBounds.x2 - axisLabelContainerSize;
-            }
-            else if (orient === 'right') {
-                start = axisLabelContainerBounds.x1;
-            }
-            else if (orient === 'top') {
-                start = axisLabelContainerBounds.y2 - axisLabelContainerSize;
-            }
-            else if (orient === 'bottom') {
-                start = axisLabelContainerBounds.y1;
-            }
-            alignAxisLabels(labelShapes, start, axisLabelContainerSize, orient, this.attribute.label.containerAlign);
-        }
+  }
+  tryPreventConflict() {
+    const animate = this.animate;
+    this.target.animates.forEach(a => {
+      if (a === animate || a.priority > animate.priority) return;
+      const fromProps = a.getStartProps();
+      this.propKeys.forEach(key => {
+        null != fromProps[key] && a.preventAttr(key);
+      });
+    });
+  }
+  deleteSelfAttr(key) {
+    var _a;
+    delete this.props[key], this.fromProps && delete this.fromProps[key];
+    const index = this.propKeys.indexOf(key);
+    -1 !== index && (this.propKeys.splice(index, 1), null === (_a = this.interpolateUpdateFunctions) || void 0 === _a || _a.splice(index, 1));
+  }
+  trySyncStartProps() {
+    this.propKeys.forEach(key => {
+      this.fromProps[key] = this.animate.target.getComputedAttribute(key);
+    });
+  }
+  update(end, ratio, out) {
+    if (this.onStart(), !this.props || !this.propKeys) return;
+    const easedRatio = this.easing(ratio);
+    this.animate.interpolateUpdateFunction ? this.animate.interpolateUpdateFunction(this.fromProps, this.props, easedRatio, this, this.target) : this.interpolateUpdateFunctions.forEach((func, index) => {
+      if (!this.animate.validAttr(this.propKeys[index])) return;
+      const key = this.propKeys[index];
+      func(key, this.fromProps[key], this.props[key], easedRatio, this, this.target);
+    }), this.onUpdate(end, easedRatio, out), this.syncAttributeUpdate();
+  }
+  onUpdate(end, ratio, out) {}
+  onEnd(cb) {
+    this.target.setAttributes(this.props), cb ? this._endCb = cb : this._endCb && this._endCb(this.animate, this);
+  }
+  getEndProps() {
+    return this.props;
+  }
+  getFromProps() {
+    return this.fromProps;
+  }
+  getMergedEndProps() {
+    return this.getEndProps();
+  }
+  stop() {}
+}
+class WaitStep extends Step {
+  constructor(type, props, duration, easing) {
+    super(type, props, duration, easing);
+  }
+  update(end, ratio, out) {
+    this.onStart();
+  }
+  determineInterpolateUpdateFunction() {}
+}
+
+class DefaultTimeline {
+  get animateCount() {
+    return this.animates.length;
+  }
+  constructor() {
+    this.animates = [], this._playSpeed = 1, this._totalDuration = 0, this._startTime = 0, this._currentTime = 0, this._endAnimatePtr = -1, this.id = Generator.GenAutoIncrementId(), this.animates = [], this.paused = !1;
+  }
+  isRunning() {
+    return !this.paused && this._endAnimatePtr >= 0;
+  }
+  forEachAccessAnimate(cb) {
+    for (let i = 0; i <= this._endAnimatePtr; i++) cb(this.animates[i], i);
+  }
+  addAnimate(animate) {
+    this.animates.push(animate), this._endAnimatePtr++, this.animates[this.animates.length - 1] = this.animates[this._endAnimatePtr], this.animates[this._endAnimatePtr] = animate, this._totalDuration = Math.max(this._totalDuration, animate.getStartTime() + animate.getDuration());
+  }
+  pause() {
+    this.paused = !0;
+  }
+  resume() {
+    this.paused = !1;
+  }
+  tick(delta) {
+    if (this.paused) return;
+    const scaledDelta = delta * this._playSpeed;
+    this._currentTime += scaledDelta, this.forEachAccessAnimate((animate, i) => {
+      animate.status === AnimateStatus.END ? this.removeAnimate(animate, !0, i) : animate.status !== AnimateStatus.RUNNING && animate.status !== AnimateStatus.INITIAL || animate.advance(scaledDelta);
+    });
+  }
+  clear() {
+    this.forEachAccessAnimate(animate => {
+      animate.release();
+    }), this.animates = [], this._totalDuration = 0;
+  }
+  removeAnimate(animate) {
+    let release = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
+    let index = arguments.length > 2 ? arguments[2] : undefined;
+    this._endAnimatePtr < 0 || (release && (animate._onRemove && animate._onRemove.forEach(cb => cb()), animate.release()), index = null != index ? index : this.animates.indexOf(animate), this.animates[index] = this.animates[this._endAnimatePtr], this._endAnimatePtr--);
+  }
+  recalculateTotalDuration() {
+    this._totalDuration = 0, this.animates.forEach(animate => {
+      this._totalDuration = Math.max(this._totalDuration, animate.getStartTime() + animate.getDuration());
+    });
+  }
+  getTotalDuration() {
+    return this._totalDuration;
+  }
+  getPlaySpeed() {
+    return this._playSpeed;
+  }
+  setPlaySpeed(speed) {
+    this._playSpeed = speed;
+  }
+  getPlayState() {
+    return this.paused ? "paused" : 0 === this.animateCount ? "stopped" : "playing";
+  }
+  setStartTime(time) {
+    this._startTime = time;
+  }
+  getStartTime() {
+    return this._startTime;
+  }
+  getCurrentTime() {
+    return this._currentTime;
+  }
+  setCurrentTime(time) {
+    this._currentTime = time;
+  }
+}
+const defaultTimeline = new DefaultTimeline();
+defaultTimeline.isGlobal = !0;
+
+class Animate {
+  constructor() {
+    let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Generator.GenAutoIncrementId();
+    let timeline = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultTimeline;
+    let slience = arguments.length > 2 ? arguments[2] : undefined;
+    this.id = id, this.status = AnimateStatus.INITIAL, this._timeline = timeline, timeline.addAnimate(this), this.slience = slience, this._startTime = 0, this._duration = 0, this._totalDuration = 0, this._loopCount = 0, this._currentLoop = 0, this._bounce = !1, this._firstStep = null, this._lastStep = null, this._startProps = {}, this._endProps = {}, this._preventAttrs = new Set(), this.currentTime = 0, this.interpolateUpdateFunction = null, this.priority = 0;
+  }
+  getStartProps() {
+    return this._startProps;
+  }
+  getEndProps() {
+    return this._endProps;
+  }
+  setTimeline(timeline) {
+    this._timeline = timeline;
+  }
+  getTimeline() {
+    return this._timeline;
+  }
+  get timeline() {
+    return this._timeline;
+  }
+  bind(target) {
+    return this.target = target, this.target.onAnimateBind && !this.slience && this.target.onAnimateBind(this), this.target.animationAttribute || (this.target.animationAttribute = {}), this;
+  }
+  to(props) {
+    let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 300;
+    let easing = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "linear";
+    const step = new Step(AnimateStepType.to, props, duration, easing);
+    return step.bind(this.target, this), this.updateStepAfterAppend(step), this;
+  }
+  wait(delay) {
+    const step = new WaitStep(AnimateStepType.wait, {}, delay, "linear");
+    return step.bind(this.target, this), this.updateStepAfterAppend(step), this;
+  }
+  updateStepAfterAppend(step) {
+    this._firstStep ? (this._lastStep.append(step), this._lastStep = step) : (this._firstStep = step, this._lastStep = step), this.parseStepProps(step), this.updateDuration();
+  }
+  parseStepProps(step) {
+    this._lastStep && (step.propKeys = step.propKeys || Object.keys(step.props), Object.keys(this._endProps).forEach(key => {
+      var _a;
+      step.props[key] = null !== (_a = step.props[key]) && void 0 !== _a ? _a : this._endProps[key];
+    }), step.propKeys.forEach(key => {
+      this._endProps[key] = step.props[key];
+    }));
+  }
+  reSyncProps() {
+    if (!this._lastStep) return;
+    this._endProps = {};
+    let currentStep = this._firstStep;
+    for (; currentStep;) Object.keys(this._endProps).forEach(key => {
+      var _a;
+      currentStep.props[key] = null !== (_a = currentStep.props[key]) && void 0 !== _a ? _a : this._endProps[key];
+    }), currentStep.propKeys.forEach(key => {
+      this._endProps[key] = currentStep.props[key];
+    }), currentStep = currentStep.next;
+  }
+  from(props) {
+    let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 300;
+    let easing = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "linear";
+    const step = new Step(AnimateStepType.from, props, duration, easing);
+    return this._firstStep ? (this._lastStep.append(step), this._lastStep = step) : (this._firstStep = step, this._lastStep = step), this.updateDuration(), this;
+  }
+  play(customAnimate) {
+    return customAnimate.bind(this.target, this), this.updateStepAfterAppend(customAnimate), this;
+  }
+  pause() {
+    this.status === AnimateStatus.RUNNING && (this.status = AnimateStatus.PAUSED);
+  }
+  resume() {
+    this.status === AnimateStatus.PAUSED && (this.status = AnimateStatus.RUNNING);
+  }
+  onStart(cb) {
+    var _a;
+    cb ? (this._onStart || (this._onStart = []), this._onStart.push(cb)) : (null === (_a = this._onStart) || void 0 === _a || _a.forEach(cb => cb()), Object.keys(this._endProps).forEach(key => {
+      this._startProps[key] = this.target.getComputedAttribute(key);
+    }));
+  }
+  onEnd(cb) {
+    var _a;
+    cb ? (this._onEnd || (this._onEnd = []), this._onEnd.push(cb)) : null === (_a = this._onEnd) || void 0 === _a || _a.forEach(cb => cb());
+  }
+  onFrame(cb) {
+    cb && (this._onFrame || (this._onFrame = []), this._onFrame.push(cb));
+  }
+  onRemove(cb) {
+    var _a;
+    cb ? (this._onRemove || (this._onRemove = []), this._onRemove.push(cb)) : null === (_a = this._onRemove) || void 0 === _a || _a.forEach(cb => cb());
+  }
+  preventAttr(key) {
+    this._preventAttrs.add(key), delete this._startProps[key], delete this._endProps[key];
+    let step = this._firstStep;
+    for (; step;) step.deleteSelfAttr(key), step = step.next;
+  }
+  preventAttrs(keys) {
+    keys.forEach(key => this._preventAttrs.add(key));
+  }
+  validAttr(key) {
+    return !this._preventAttrs.has(key);
+  }
+  runCb(cb) {
+    var _a;
+    return null === (_a = this._lastStep) || void 0 === _a || _a.onEnd(cb), this;
+  }
+  startAt(t) {
+    return this._startTime = t, this;
+  }
+  customInterpolate(key, ratio, from, to, target, ret) {
+    return !1;
+  }
+  getFromValue() {
+    return this._startProps;
+  }
+  getToValue() {
+    return this._endProps;
+  }
+  stop(type) {
+    let step = this._firstStep;
+    for (; step;) step.stop(), step = step.next;
+    this.status = AnimateStatus.END, this.onEnd(), this.target && ("start" === type ? this.target.setAttributes(this._startProps) : "end" === type ? this.target.setAttributes(this._endProps) : type && this.target.setAttributes(type));
+  }
+  release() {
+    this.status = AnimateStatus.END, this._onRemove && this._onRemove.forEach(cb => cb()), this._onStart = [], this._onFrame = [], this._onEnd = [], this._onRemove = [];
+  }
+  getDuration() {
+    return this._duration;
+  }
+  getStartTime() {
+    return this._startTime;
+  }
+  afterAll(list) {
+    if (!list || 0 === list.length) return this;
+    let maxEndTime = 0;
+    return list.forEach(animate => {
+      const endTime = animate.getStartTime() + animate.getTotalDuration();
+      maxEndTime = Math.max(maxEndTime, endTime);
+    }), this.startAt(maxEndTime);
+  }
+  after(animate) {
+    if (!animate) return this;
+    const endTime = animate.getStartTime() + animate.getTotalDuration();
+    return this.startAt(endTime);
+  }
+  parallel(animate) {
+    return animate ? (this.startAt(animate.getStartTime()), this) : this;
+  }
+  loop(n) {
+    return !0 === n ? n = 1 / 0 : !1 === n && (n = 0), this._loopCount = n, this.updateDuration(), this;
+  }
+  bounce(b) {
+    return this._bounce = b, this;
+  }
+  advance(delta) {
+    var _a;
+    if (this.status === AnimateStatus.END) return void console.warn("aaa 动画已经结束，不能推进");
+    const nextTime = this.currentTime + delta;
+    if (nextTime < this._startTime) return void (this.currentTime = nextTime);
+    if (nextTime >= this._startTime + this._totalDuration) return null === (_a = this._lastStep) || void 0 === _a || _a.onEnd(), this.onEnd(), void (this.status = AnimateStatus.END);
+    this.status = AnimateStatus.RUNNING, this.currentTime <= this._startTime && this.onStart(), this.currentTime = nextTime;
+    let cycleTime = nextTime - this._startTime,
+      newLoop = !1,
+      bounceTime = !1;
+    if (this._loopCount > 0) {
+      cycleTime = (nextTime - this._startTime) % this._duration;
+      const currentLoop = Math.floor((nextTime - this._startTime) / this._duration);
+      newLoop = currentLoop > this._currentLoop, this._currentLoop = currentLoop, bounceTime = this._bounce && currentLoop % 2 == 1, bounceTime && (cycleTime = this._duration - cycleTime);
     }
-    _getAxisLabelLimitLength(limitSize, layerCount) {
-        var _a, _b, _c, _d, _e;
-        const { label, title, line, tick } = this.attribute;
-        const labelSpace = (_a = label.space) !== null && _a !== void 0 ? _a : 4;
-        let limitLength = limitSize;
-        let titleHeight = 0;
-        let titleSpacing = 0;
-        const axisLineWidth = line && line.visible ? (_b = line.style.lineWidth) !== null && _b !== void 0 ? _b : 1 : 0;
-        const tickLength = tick && tick.visible ? (_c = tick.length) !== null && _c !== void 0 ? _c : 4 : 0;
-        if (title && title.visible && typeof title.text === 'string') {
-            titleHeight = measureTextSize(title.text, title.textStyle, (_e = (_d = this.stage) === null || _d === void 0 ? void 0 : _d.getTheme()) === null || _e === void 0 ? void 0 : _e.text).height;
-            const padding = normalizePadding(title.padding);
-            titleSpacing = title.space + padding[0] + padding[2];
-        }
-        if (limitLength) {
-            limitLength = (limitLength - labelSpace - titleSpacing - titleHeight - axisLineWidth - tickLength) / layerCount;
+    newLoop && !bounceTime && this.target.setAttributes(this._startProps);
+    let targetStep = null;
+    if (this._lastStep === this._firstStep) targetStep = this._firstStep;else {
+      let currentStep = this._firstStep;
+      for (; currentStep;) {
+        const stepStartTime = currentStep.getStartTime(),
+          stepDuration = currentStep.getDuration();
+        if (cycleTime >= stepStartTime && cycleTime <= stepStartTime + stepDuration) {
+          targetStep = currentStep;
+          break;
         }
-        return limitLength;
-    }
-    release() {
-        super.release();
-        this._breaks = null;
+        currentStep = currentStep.next;
+      }
     }
+    if (!targetStep) return;
+    const ratio = (cycleTime - targetStep.getStartTime()) / targetStep.getDuration(),
+      isEnd = ratio >= 1;
+    targetStep.update(isEnd, ratio, {}), isEnd && targetStep.onEnd();
+  }
+  updateDuration() {
+    this._lastStep ? (this._duration = this._lastStep.getStartTime() + this._lastStep.getDuration(), this._totalDuration = this._duration * (this._loopCount + 1)) : this._duration = 0;
+  }
+  getTotalDuration() {
+    return this._totalDuration;
+  }
+  getLoop() {
+    return this._loopCount;
+  }
 }
-LineAxis.defaultAttributes = DEFAULT_AXIS_THEME;
-mixin(LineAxis, LineAxisMixin);
 
-class CircleAxisMixin {
-    isInValidValue(value) {
-        const { startAngle = POLAR_START_ANGLE, endAngle = POLAR_END_ANGLE } = this.attribute;
-        if (Math.abs(endAngle - startAngle) % (Math.PI * 2) === 0) {
-            return value > 1;
-        }
-        return value < 0 || value > 1;
-    }
-    getTickCoord(tickValue) {
-        const { startAngle = POLAR_START_ANGLE, endAngle = POLAR_END_ANGLE, center, radius, inside = false, innerRadius = 0 } = this.attribute;
-        const angle = startAngle + (endAngle - startAngle) * tickValue;
-        return polarToCartesian(center, inside && innerRadius > 0 ? innerRadius : radius, angle);
-    }
-    getVerticalVector(offset, inside = false, point) {
-        return getCircleVerticalVector(offset, point, this.attribute.center, inside, this.attribute.inside);
+class AnimateExecutor {
+  static registerBuiltInAnimate(name, animate) {
+    AnimateExecutor.builtInAnimateMap[name] = animate;
+  }
+  constructor(target) {
+    this._animates = [], this._startCallbacks = [], this._endCallbacks = [], this._started = !1, this._activeCount = 0, this._target = target;
+  }
+  onStart(cb) {
+    cb ? (this._startCallbacks.push(cb), this._started && this._activeCount > 0 && cb()) : this._startCallbacks.forEach(cb => {
+      cb();
+    });
+  }
+  onEnd(cb) {
+    cb ? this._endCallbacks.push(cb) : this._endCallbacks.forEach(cb => {
+      cb();
+    });
+  }
+  _trackAnimation(animate) {
+    this._animates.push(animate), this._activeCount++, 1 !== this._activeCount || this._started || (this._started = !0, this.onStart()), animate.onEnd(() => {
+      this._activeCount--;
+      const index = this._animates.indexOf(animate);
+      index >= 0 && this._animates.splice(index, 1), 0 === this._activeCount && this._started && (this._started = !1, this.onEnd());
+    });
+  }
+  parseParams(params, isTimeline) {
+    var _a, _b;
+    const totalTime = this.resolveValue(params.totalTime, void 0, void 0),
+      startTime = this.resolveValue(params.startTime, void 0, 0),
+      parsedParams = Object.assign({}, params);
+    parsedParams.oneByOneDelay = 0, parsedParams.startTime = startTime, parsedParams.totalTime = totalTime;
+    const oneByOne = this.resolveValue(params.oneByOne, void 0, !1);
+    if (isTimeline) {
+      const timeSlices = parsedParams.timeSlices;
+      isArray(timeSlices) || (parsedParams.timeSlices = [timeSlices]);
+      let sliceTime = 0;
+      parsedParams.timeSlices.forEach(slice => {
+        slice.delay = this.resolveValue(slice.delay, void 0, 0), slice.delayAfter = this.resolveValue(slice.delayAfter, void 0, 0), slice.duration = this.resolveValue(slice.duration, void 0, 300), sliceTime += slice.delay + slice.duration + slice.delayAfter;
+      });
+      let oneByOneDelay = 0,
+        oneByOneTime = 0;
+      if (oneByOne && (oneByOneTime = Number(oneByOne), oneByOneDelay = oneByOneTime), parsedParams.oneByOne = oneByOneTime, parsedParams.oneByOneDelay = oneByOneDelay, totalTime) {
+        const _totalTime = sliceTime + oneByOneDelay * (this._target.count - 2),
+          scale = totalTime ? totalTime / _totalTime : 1;
+        parsedParams.timeSlices = parsedParams.timeSlices.map(slice => {
+          let effects = slice.effects;
+          return Array.isArray(effects) || (effects = [effects]), Object.assign(Object.assign({}, slice), {
+            delay: slice.delay * scale,
+            delayAfter: slice.delayAfter * scale,
+            duration: slice.duration * scale,
+            effects: effects.map(effect => {
+              var _a, _b;
+              const custom = null !== (_a = effect.custom) && void 0 !== _a ? _a : AnimateExecutor.builtInAnimateMap[null !== (_b = effect.type) && void 0 !== _b ? _b : "fromTo"],
+                customType = custom && isFunction(custom) ? /^class\s/.test(Function.prototype.toString.call(custom)) ? 1 : 2 : 0;
+              return Object.assign(Object.assign({}, effect), {
+                custom: custom,
+                customType: customType
+              });
+            })
+          });
+        }), parsedParams.oneByOne = oneByOneTime * scale, parsedParams.oneByOneDelay = oneByOneDelay * scale, parsedParams.startTime = startTime * scale;
+      }
+    } else {
+      const delay = this.resolveValue(params.delay, void 0, 0),
+        delayAfter = this.resolveValue(params.delayAfter, void 0, 0),
+        duration = this.resolveValue(params.duration, void 0, 300);
+      let oneByOneDelay = 0,
+        oneByOneTime = 0;
+      oneByOne && (oneByOneTime = Number(oneByOne), oneByOneDelay = duration + oneByOneTime), parsedParams.oneByOne = oneByOneTime, parsedParams.oneByOneDelay = oneByOneDelay, parsedParams.custom = null !== (_a = params.custom) && void 0 !== _a ? _a : AnimateExecutor.builtInAnimateMap[null !== (_b = params.type) && void 0 !== _b ? _b : "fromTo"];
+      const customType = parsedParams.custom && isFunction(parsedParams.custom) ? /^class\s/.test(Function.prototype.toString.call(parsedParams.custom)) ? 1 : 2 : 0;
+      if (parsedParams.customType = customType, totalTime) {
+        const _totalTime = delay + delayAfter + duration + oneByOneDelay * (this._target.count - 2),
+          scale = totalTime ? totalTime / _totalTime : 1;
+        parsedParams.delay = delay * scale, parsedParams.delayAfter = delayAfter * scale, parsedParams.duration = duration * scale, parsedParams.oneByOne = oneByOneTime * scale, parsedParams.oneByOneDelay = oneByOneDelay * scale, parsedParams.startTime = startTime;
+      }
     }
-    getRelativeVector(point) {
-        const { center } = this.attribute;
-        return [point.y - center.y, -1 * (point.x - center.x)];
+    return parsedParams;
+  }
+  execute(params) {
+    Array.isArray(params) ? params.forEach(param => this._execute(param)) : this._execute(params);
+  }
+  _execute(params) {
+    if (params.selfOnly) return this._executeItem(params, this._target, 0, 1);
+    const isTimeline = ("timeSlices" in params);
+    let filteredChildren;
+    isTimeline && params.partitioner && (filteredChildren = (null != filteredChildren ? filteredChildren : this._target.getChildren()).filter(child => {
+      var _a;
+      return params.partitioner(null === (_a = child.context) || void 0 === _a ? void 0 : _a.data, child, {});
+    })), isTimeline && params.sort && (filteredChildren = null != filteredChildren ? filteredChildren : this._target.getChildren(), filteredChildren.sort((a, b) => {
+      var _a, _b;
+      return params.sort(null === (_a = a.context) || void 0 === _a ? void 0 : _a.data, null === (_b = b.context) || void 0 === _b ? void 0 : _b.data, a, b, {});
+    }));
+    const parsedParams = this.parseParams(params, isTimeline),
+      cb = isTimeline ? (child, index, count) => {
+        const animate = this.executeTimelineItem(parsedParams, child, index, count);
+        animate && this._trackAnimation(animate);
+      } : (child, index, count) => {
+        const animate = this.executeTypeConfigItem(parsedParams, child, index, count);
+        animate && this._trackAnimation(animate);
+      };
+    filteredChildren ? filteredChildren.forEach((child, index) => cb(child, index, filteredChildren.length)) : this._target.count <= 1 ? cb(this._target, 0, 1) : this._target.forEachChildren((child, index) => cb(child, index, this._target.count - 1));
+  }
+  executeTypeConfigItem(params, graphic, index, count) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const {
+        type = "fromTo",
+        channel: channel,
+        customParameters: customParameters,
+        easing = "linear",
+        delay = 0,
+        delayAfter = 0,
+        duration = 300,
+        startTime = 0,
+        oneByOneDelay = 0,
+        loop: loop,
+        bounce: bounce,
+        priority = 0,
+        options: options,
+        custom: custom,
+        customType: customType,
+        controlOptions: controlOptions
+      } = params,
+      animate = graphic.animate();
+    animate.priority = priority;
+    const delayValue = isFunction(delay) ? delay(null === (_b = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.data) || void 0 === _b ? void 0 : _b[0], graphic, {}) : delay,
+      datum = null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0],
+      indexKey = null === (_e = graphic.context) || void 0 === _e ? void 0 : _e.indexKey;
+    datum && indexKey && (index = null !== (_f = datum[indexKey]) && void 0 !== _f ? _f : index), animate.startAt(startTime + delayValue);
+    const wait = index * oneByOneDelay;
+    wait > 0 && animate.wait(wait);
+    let parsedFromProps = null,
+      props = params.to,
+      from = params.from;
+    props || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), props = parsedFromProps.props), from || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), from = parsedFromProps.from), this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, options, type, graphic), oneByOneDelay && animate.wait(oneByOneDelay * (count - index - 1));
+    const delayAfterValue = isFunction(delayAfter) ? delayAfter(null === (_h = null === (_g = graphic.context) || void 0 === _g ? void 0 : _g.data) || void 0 === _h ? void 0 : _h[0], graphic, {}) : delayAfter;
+    return delayAfterValue > 0 && animate.wait(delayAfterValue), loop && loop > 0 && animate.loop(loop), bounce && animate.bounce(!0), animate;
+  }
+  _handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, options, type, graphic) {
+    var _a, _b, _c, _d;
+    if (custom && customType) {
+      const customParams = this.resolveValue(customParameters, graphic, {}),
+        objOptions = isFunction(options) ? options.call(null, null !== (_b = customParameters && (null === (_a = customParameters.data) || void 0 === _a ? void 0 : _a[0])) && void 0 !== _b ? _b : null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], graphic, customParameters) : options;
+      customParams.options = objOptions, 1 === customType ? this.createCustomAnimation(animate, custom, from, props, duration, easing, customParams) : 2 === customType && this.createCustomInterpolatorAnimation(animate, custom, props, duration, easing, customParams);
+    } else "to" === type ? animate.to(props, duration, easing) : "from" === type && animate.from(props, duration, easing);
+  }
+  executeTimelineItem(params, graphic, index, count) {
+    var _a, _b, _c, _d;
+    const {
+        timeSlices: timeSlices,
+        startTime = 0,
+        loop: loop,
+        bounce: bounce,
+        oneByOneDelay: oneByOneDelay,
+        priority: priority,
+        controlOptions: controlOptions
+      } = params,
+      datum = null === (_b = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.data) || void 0 === _b ? void 0 : _b[0],
+      indexKey = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.indexKey;
+    datum && indexKey && (index = null !== (_d = datum[indexKey]) && void 0 !== _d ? _d : index);
+    const animate = graphic.animate();
+    animate.priority = priority, animate.startAt(startTime), animate.wait(index * oneByOneDelay), loop && loop > 0 && animate.loop(loop), bounce && animate.bounce(!0);
+    return (Array.isArray(timeSlices) ? timeSlices : [timeSlices]).forEach(slice => {
+      this.applyTimeSliceToAnimate(slice, animate, graphic);
+    }), oneByOneDelay && animate.wait(oneByOneDelay * (count - index - 1)), animate;
+  }
+  applyTimeSliceToAnimate(slice, animate, graphic) {
+    var _a, _b, _c, _d;
+    const {
+        effects: effects,
+        duration = 300,
+        delay = 0,
+        delayAfter = 0
+      } = slice,
+      delayValue = isFunction(delay) ? delay(null === (_b = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.data) || void 0 === _b ? void 0 : _b[0], graphic, {}) : delay,
+      delayAfterValue = isFunction(delayAfter) ? delayAfter(null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], graphic, {}) : delayAfter;
+    delayValue > 0 && animate.wait(delayValue);
+    (Array.isArray(effects) ? effects : [effects]).forEach(effect => {
+      var _a, _b;
+      const {
+        type = "fromTo",
+        channel: channel,
+        customParameters: customParameters,
+        easing = "linear",
+        options: options
+      } = effect;
+      let parsedFromProps = null,
+        props = effect.to,
+        from = effect.from;
+      props || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), props = parsedFromProps.props), from || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), from = parsedFromProps.from);
+      const custom = null !== (_a = effect.custom) && void 0 !== _a ? _a : AnimateExecutor.builtInAnimateMap[type],
+        customType = null !== (_b = effect.customType) && void 0 !== _b ? _b : custom && isFunction(custom) ? /^class\s/.test(Function.prototype.toString.call(custom)) ? 1 : 2 : 0;
+      this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, options, type, graphic);
+    }), delayAfterValue > 0 && animate.wait(delayAfterValue);
+  }
+  createCustomInterpolatorAnimation(animate, interpolator, props, duration, easing, customParams) {
+    const to = props;
+    Object.keys(to).forEach(key => {
+      animate.target.getComputedAttribute(key);
+    }), animate.interpolateUpdateFunction = (from, to, ratio, step, target) => {
+      interpolator(ratio, from, to, step, target, animate.target, customParams);
+    }, animate.to(props, duration, easing);
+  }
+  createCustomAnimation(animate, CustomAnimateConstructor, from, props, duration, easing, customParams) {
+    const customAnimate = new CustomAnimateConstructor(from, props, duration, easing, customParams);
+    animate.play(customAnimate);
+  }
+  createPropsFromChannel(channel, graphic) {
+    const props = {};
+    let from = null;
+    return channel ? (Array.isArray(channel) ? channel.forEach(key => {
+      var _a, _b;
+      const value = null === (_b = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.diffAttrs) || void 0 === _b ? void 0 : _b[key];
+      void 0 !== value && (props[key] = value);
+    }) : Object.entries(channel).forEach(_ref => {
+      let [key, config] = _ref;
+      var _a, _b;
+      void 0 !== config.to && ("function" == typeof config.to ? props[key] = config.to(null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.data, graphic, {}) : props[key] = config.to), void 0 !== config.from && (from || (from = {}), "function" == typeof config.from ? from[key] = config.from(null === (_b = graphic.context) || void 0 === _b ? void 0 : _b.data, graphic, {}) : from[key] = config.from);
+    }), {
+      from: from,
+      props: props
+    }) : {
+      from: from,
+      props: props
+    };
+  }
+  resolveValue(value, graphic, defaultValue) {
+    var _a;
+    return void 0 === value ? defaultValue : "function" == typeof value && graphic ? value(null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.data, graphic, {}) : value;
+  }
+  executeItem(params, graphic) {
+    let index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    let count = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+    return Array.isArray(params) ? params.map(param => this._executeItem(param, graphic, index, count)).filter(Boolean) : [this._executeItem(params, graphic, index, count)].filter(Boolean);
+  }
+  _executeItem(params, graphic) {
+    let index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    let count = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+    if (!graphic) return null;
+    const isTimeline = ("timeSlices" in params);
+    let animate = null;
+    const parsedParams = this.parseParams(params, isTimeline);
+    return animate = isTimeline ? this.executeTimelineItem(parsedParams, graphic, index, count) : this.executeTypeConfigItem(parsedParams, graphic, index, count), animate && this._trackAnimation(animate), animate;
+  }
+  stop(type) {
+    for (; this._animates.length > 0;) {
+      const animate = this._animates.pop();
+      null == animate || animate.stop(type);
     }
+    this._animates = [], this._activeCount = 0, this._started && (this._started = !1, this.onEnd());
+  }
 }
+AnimateExecutor.builtInAnimateMap = {};
 
-function findSiblingLabels(labels, selfIndex) {
-    const len = labels.length;
-    const prevLabel = selfIndex >= 1 ? labels[selfIndex - 1] : labels[len - 1];
-    const nextLabel = selfIndex < len - 1 ? labels[selfIndex + 1] : labels[0];
-    return { prevLabel, nextLabel };
+class ACustomAnimate extends Step {
+  constructor(customFrom, customTo, duration, easing, params) {
+    super("customAnimate", customTo, duration, easing), this.type = "customAnimate", this.customFrom = customFrom, this.params = params;
+  }
+  update(end, ratio, out) {
+    if (this.onStart(), !this.props || !this.propKeys) return;
+    const easedRatio = this.easing(ratio);
+    this.onUpdate(end, easedRatio, out), this.syncAttributeUpdate();
+  }
+  setProps(props) {
+    this.props = props, this.propKeys = Object.keys(props), this.animate.reSyncProps();
+  }
 }
-function adjustMaxLineWidth(label, maxLineWidth, ellipsis) {
-    var _a;
-    label.setAttributes({
-        maxLineWidth,
-        ellipsis: (_a = label.attribute.ellipsis) !== null && _a !== void 0 ? _a : ellipsis
-    });
+class AComponentAnimate extends ACustomAnimate {
+  completeBind(animator) {
+    this.setStartTime(0), this._animator && this._animator.start(), this.setDuration(animator.getDuration());
+  }
+  stop() {
+    this._animator && this._animator.stop();
+  }
 }
-function adjustMaxHeight(labels, selfIndex, bounds) {
-    const siblings = [];
-    if (labels.length >= 3) {
-        const { prevLabel, nextLabel } = findSiblingLabels(labels, selfIndex);
-        siblings.push(prevLabel, nextLabel);
-    }
-    else if (labels.length === 2) {
-        siblings.push(labels[selfIndex === 0 ? 1 : 0]);
-    }
-    const label = labels[selfIndex];
-    let heightLimit = Math.min(Math.abs(label.attribute.y - bounds.y1), Math.abs(label.attribute.y - bounds.y2));
-    siblings.forEach(sibling => {
-        heightLimit = Math.min(heightLimit, Math.abs(sibling.attribute.y - label.attribute.y));
+
+class ComponentAnimator {
+  constructor(component) {
+    this.tasks = [], this.started = !1, this.completed = 0, this.totalDuration = 0, this.onStartCallbacks = [], this.onEndCallbacks = [], this.onUpdateCallbacks = [], this.component = component;
+  }
+  animate(graphic, config) {
+    return this.started ? (console.warn("Cannot add animations after animation has started"), this) : (this.tasks.push({
+      graphic: graphic,
+      config: config
+    }), this);
+  }
+  onStart(callback) {
+    return this.onStartCallbacks.push(callback), this;
+  }
+  onEnd(callback) {
+    return this.onEndCallbacks.push(callback), this;
+  }
+  onUpdate(callback) {
+    return this.onUpdateCallbacks.push(callback), this;
+  }
+  start() {
+    return this.started ? (console.warn("Animation has already started"), this) : (this.started = !0, this.completed = 0, this.onStartCallbacks.forEach(callback => callback()), 0 === this.tasks.length ? (setTimeout(() => {
+      this.onEndCallbacks.forEach(callback => callback());
+    }, 0), this) : (this.tasks.forEach(task => {
+      const executor = new AnimateExecutor(task.graphic);
+      executor.onEnd(() => {
+        this.completed++, this.completed === this.tasks.length && this.onEndCallbacks.forEach(callback => callback());
+      });
+      const animate = executor.executeItem(task.config, task.graphic);
+      task.animate = animate, animate.forEach(animate => {
+        this.totalDuration = Math.max(this.totalDuration, animate.getStartTime() + animate.getDuration());
+      });
+    }), this));
+  }
+  deleteSelfAttr(key) {
+    this.tasks.forEach(task => {
+      task.animate && task.animate.forEach(animate => animate.preventAttr(key));
     });
-    if (heightLimit > 0) {
-        label.setAttributes({ whiteSpace: 'normal', heightLimit });
-    }
+  }
+  stop(type) {
+    return this.tasks.forEach(task => {
+      task.animate && task.animate.forEach(animate => animate.stop(type));
+    }), this.started && this.completed !== this.tasks.length && (this.onEndCallbacks.forEach(callback => callback()), this.completed = this.tasks.length), this;
+  }
+  getDuration() {
+    return this.totalDuration;
+  }
 }
-function circleAutoLimit(labels, config) {
-    const { ellipsis, inside, bounds, autoWrap, center } = config;
-    if (!inside) {
-        labels.forEach((label, index) => {
-            const { x, y } = label.attribute;
-            const b = label.AABBBounds;
-            if (isNumberClose(x, center.x)) {
-                if (y > bounds.y2 || y < bounds.y1) {
-                    adjustMaxLineWidth(label, 0, ellipsis);
-                    return;
-                }
-                const boxWidth = bounds.x2 - bounds.x1;
-                if (labels.length >= 3) {
-                    const { prevLabel, nextLabel } = findSiblingLabels(labels, index);
-                    let leftX = prevLabel.attribute.x;
-                    let rightX = nextLabel.attribute.x;
-                    if (leftX > rightX) {
-                        leftX = nextLabel.attribute.x;
-                        rightX = prevLabel.attribute.x;
-                    }
-                    const maxWidth = leftX === rightX
-                        ? boxWidth
-                        : x >= leftX && x <= rightX
-                            ? rightX - leftX
-                            : Math.min(Math.abs(leftX - x), Math.abs(rightX - x));
-                    if (label.AABBBounds.width() > maxWidth) {
-                        adjustMaxLineWidth(label, maxWidth, ellipsis);
-                    }
-                }
-                else if (label.AABBBounds.width() > boxWidth) {
-                    adjustMaxLineWidth(label, boxWidth, ellipsis);
-                }
-            }
-            else if (x > center.x && b.x2 > bounds.x2) {
-                adjustMaxLineWidth(label, bounds.x2 - x, ellipsis);
-                autoWrap && adjustMaxHeight(labels, index, bounds);
-            }
-            else if (x < center.x && b.x1 < bounds.x1) {
-                adjustMaxLineWidth(label, x - bounds.x1, ellipsis);
-                autoWrap && adjustMaxHeight(labels, index, bounds);
+function createComponentAnimator(component) {
+  return new ComponentAnimator(component);
+}
+
+class AxisEnter extends AComponentAnimate {
+    onBind() {
+        var _a;
+        const animator = createComponentAnimator(this.target);
+        this._animator = animator;
+        const duration = this.duration;
+        const easing = this.easing;
+        const { config, lastScale, getTickCoord } = this.params;
+        let ratio = 1;
+        if (lastScale && getTickCoord) {
+            ratio = 0.7;
+            const currData = this.target.data;
+            const oldValue = lastScale.scale(currData.rawValue);
+            const point = getTickCoord(oldValue);
+            const newX = this.target.attribute.x;
+            const newY = this.target.attribute.y;
+            this.target.setAttributes({ x: point.x, y: point.y });
+            animator.animate(this.target, {
+                type: 'to',
+                to: { x: newX, y: newY },
+                duration,
+                easing
+            });
+        }
+        animator.animate(this.target, {
+            type: (_a = config.type) !== null && _a !== void 0 ? _a : 'fadeIn',
+            to: config.to,
+            duration: duration * ratio,
+            easing
+        });
+        this.completeBind(animator);
+    }
+}
+class AxisUpdate extends AComponentAnimate {
+    onBind() {
+        var _a;
+        const animator = createComponentAnimator(this.target);
+        this._animator = animator;
+        const duration = this.duration;
+        const easing = this.easing;
+        const { config, diffAttrs } = this.params;
+        animator.animate(this.target, {
+            type: (_a = config.type) !== null && _a !== void 0 ? _a : 'to',
+            to: Object.assign({}, diffAttrs),
+            duration,
+            easing,
+            customParameters: {
+                diffAttrs: Object.assign({}, diffAttrs)
             }
         });
+        this.completeBind(animator);
+    }
+    deleteSelfAttr(key) {
+        super.deleteSelfAttr(key);
+        this._animator.deleteSelfAttr(key);
+    }
+    tryPreventConflict() {
+        return;
     }
 }
+function registerAxisAnimate() {
+    AnimateExecutor.registerBuiltInAnimate('axisEnter', AxisEnter);
+    AnimateExecutor.registerBuiltInAnimate('axisUpdate', AxisUpdate);
+}
 
-loadCircleAxisComponent();
-class CircleAxis extends AxisBase {
+function loadBasicAxis() {
+    registerGroup();
+    registerLine();
+    registerRichtext();
+    registerText();
+    registerAxisAnimate();
+}
+function loadLineAxisComponent() {
+    loadBasicAxis();
+    registerRect();
+}
+function loadCircleAxisComponent() {
+    loadBasicAxis();
+    registerCircle();
+}
+function loadLineAxisGridComponent() {
+    registerGroup();
+    registerPath();
+}
+function loadCircleAxisGridComponent() {
+    registerGroup();
+    registerPath();
+}
+
+loadLineAxisComponent();
+class LineAxis extends AxisBase {
     constructor(attributes, options) {
-        super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, CircleAxis.defaultAttributes, attributes));
+        super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, LineAxis.defaultAttributes, attributes), options);
     }
-    renderLine(container) {
-        const { startAngle = POLAR_START_ANGLE, endAngle = POLAR_END_ANGLE, radius, center, innerRadius = 0, line = {}, inside = false, sides } = this.attribute;
-        let arcRadius = radius;
-        let arcInnerRadius = innerRadius;
-        if (inside && innerRadius > 0) {
-            arcRadius = innerRadius;
-            arcInnerRadius = 0;
+    _renderInner(container) {
+        var _a;
+        this._breaks = null;
+        if (this.attribute.breaks && this.attribute.breaks.length) {
+            const transformedBreaks = [];
+            for (let index = 0; index < this.attribute.breaks.length; index++) {
+                const aBreak = this.attribute.breaks[index];
+                const { range, breakSymbol, rawRange } = aBreak;
+                transformedBreaks.push({
+                    startPoint: this.getTickCoord(range[0]),
+                    endPoint: this.getTickCoord(range[1]),
+                    range,
+                    breakSymbol,
+                    rawRange
+                });
+            }
+            this._breaks = transformedBreaks;
         }
-        let lineGraphic;
-        if (isValidNumber(sides) && sides >= 3) {
-            const gridPoints = getCirclePoints(center, sides, arcRadius, startAngle, endAngle);
-            lineGraphic = graphicCreator.path(Object.assign(Object.assign({}, line.style), { path: getPolygonPath(gridPoints, true) }));
+        super._renderInner(container);
+        if (this._breaks && this._breaks.length) {
+            this._breaks.forEach((b, index) => {
+                const { startPoint, endPoint, breakSymbol, rawRange } = b;
+                if ((breakSymbol === null || breakSymbol === void 0 ? void 0 : breakSymbol.visible) !== false) {
+                    const axisBreakGroup = graphicCreator.group({
+                        zIndex: TopZIndex
+                    });
+                    axisBreakGroup.name = AXIS_ELEMENT_NAME.axisBreak;
+                    axisBreakGroup.id = this._getNodeId(`${AXIS_ELEMENT_NAME.axisBreak}-${index}`);
+                    axisBreakGroup.data = rawRange;
+                    const symbolStyle = getAxisBreakSymbolAttrs(breakSymbol);
+                    const shape1 = graphicCreator.symbol(Object.assign({ x: startPoint.x, y: startPoint.y }, symbolStyle));
+                    shape1.name = AXIS_ELEMENT_NAME.axisBreakSymbol;
+                    const shape2 = graphicCreator.symbol(Object.assign({ x: endPoint.x, y: endPoint.y }, symbolStyle));
+                    shape2.name = AXIS_ELEMENT_NAME.axisBreakSymbol;
+                    axisBreakGroup.add(shape1);
+                    axisBreakGroup.add(shape2);
+                    container.add(axisBreakGroup);
+                }
+            });
+        }
+        const { panel } = this.attribute;
+        if (panel && panel.visible) {
+            const axisContainer = this.axisContainer;
+            const axisContainerBounds = axisContainer.AABBBounds;
+            const bgRect = graphicCreator.rect(Object.assign({ x: axisContainerBounds.x1, y: axisContainerBounds.y1, width: axisContainerBounds.width(), height: axisContainerBounds.height() }, panel.style));
+            bgRect.name = AXIS_ELEMENT_NAME.background;
+            bgRect.id = this._getNodeId('background');
+            bgRect.states = merge({}, DEFAULT_STATES$1, (_a = panel.state) !== null && _a !== void 0 ? _a : {});
+            axisContainer.insertBefore(bgRect, axisContainer.firstChild);
+        }
+    }
+    renderLine(container) {
+        const { start, end, line } = this.attribute;
+        const _a = line, { startSymbol, endSymbol, style, state } = _a, restLineAttrs = __rest(_a, ["startSymbol", "endSymbol", "style", "state"]);
+        const lineAttrs = Object.assign({ startSymbol,
+            endSymbol, lineStyle: style }, restLineAttrs);
+        if (this._breaks && this._breaks.length) {
+            const linePoints = [];
+            let lastStartPoint = start;
+            this._breaks.forEach(b => {
+                const { startPoint, endPoint } = b;
+                linePoints.push([lastStartPoint, startPoint]);
+                lastStartPoint = endPoint;
+            });
+            linePoints.push([lastStartPoint, end]);
+            lineAttrs.points = linePoints;
+            lineAttrs.multiSegment = true;
         }
         else {
-            const arcAttrs = Object.assign(Object.assign(Object.assign({}, center), { startAngle,
-                endAngle, radius: arcRadius, innerRadius: arcInnerRadius }), line.style);
-            lineGraphic = graphicCreator.circle(arcAttrs);
+            lineAttrs.points = [start, end];
         }
-        lineGraphic.name = AXIS_ELEMENT_NAME.line;
-        lineGraphic.id = this._getNodeId('line');
-        if (!isEmpty(line.state)) {
-            lineGraphic.states = merge({}, DEFAULT_STATES$1, line.state);
+        if (!isEmpty(state)) {
+            lineAttrs.state = {
+                line: merge({}, DEFAULT_STATES$1, state),
+                symbol: merge({}, DEFAULT_STATES$1, state)
+            };
         }
-        container.add(lineGraphic);
+        const axisLineGroup = new Segment(lineAttrs);
+        axisLineGroup.name = AXIS_ELEMENT_NAME.line;
+        axisLineGroup.id = this._getNodeId('line');
+        container.add(axisLineGroup);
+    }
+    getTextAlign(vector) {
+        let align = 'center';
+        if (isNumberClose(vector[0], 0)) {
+            if (isNumberClose(vector[1], 0)) {
+                if (Object.is(vector[1], -0)) {
+                    align = 'start';
+                }
+                else if (Object.is(vector[0], -0)) {
+                    align = 'end';
+                }
+            }
+            else {
+                align = 'center';
+            }
+        }
+        else if (vector[0] > 0) {
+            align = 'start';
+        }
+        else if (vector[0] < 0) {
+            align = 'end';
+        }
+        return align;
     }
     getTitleAttribute() {
         var _a, _b, _c;
-        const { center, radius, innerRadius = 0 } = this.attribute;
-        const _d = this.attribute.title, { space = 4, textStyle = {}, shape, background, state = {} } = _d, restAttrs = __rest(_d, ["space", "textStyle", "shape", "background", "state"]);
-        let titlePoint = center;
-        let labelHeight = 0;
+        const _d = this.attribute.title, { position = 'middle', space = 4, textStyle = {}, autoRotate = true, shape, background, state = {}, maxWidth } = _d, restAttrs = __rest(_d, ["position", "space", "textStyle", "autoRotate", "shape", "background", "state", "maxWidth"]);
+        let percent = 0.5;
+        if (position === 'start') {
+            percent = 0;
+        }
+        else if (position === 'end') {
+            percent = 1;
+        }
+        const { verticalFactor = 1 } = this.attribute;
+        const factor = -1 * verticalFactor;
+        const point = this.getTickCoord(percent);
+        const axisVector = this.getRelativeVector();
+        let labelLength = 0;
         if (((_a = this.attribute.label) === null || _a === void 0 ? void 0 : _a.visible) && this.attribute.label.inside === false) {
-            labelHeight = get(this.attribute.label, 'style.fontSize', 12) + get(this.attribute.label, 'space', 4);
+            const space = +get(this.attribute, 'label.space', 4);
+            labelLength += space;
+            const layerCount = Object.keys(this.axisLabelLayerSize).length;
+            if (axisVector[1] === 0) {
+                const labelBoundsHeight = this.axisLabelsContainer ? this.axisLabelsContainer.AABBBounds.height() : 0;
+                if (isFinite(labelBoundsHeight)) {
+                    labelLength += labelBoundsHeight + (layerCount - 1) * space;
+                }
+                else {
+                    labelLength = 0;
+                }
+            }
+            else {
+                if (axisVector[0] === 0) {
+                    if (this.axisLabelsContainer &&
+                        this.axisLabelsContainer.AABBBounds &&
+                        !this.axisLabelsContainer.AABBBounds.empty()) {
+                        const baseX = this.axisLabelLayerSize[0].labelPos;
+                        const bounds = this.axisLabelsContainer.AABBBounds;
+                        labelLength +=
+                            (factor === 1
+                                ? bounds.x2 > baseX
+                                    ? Math.min(bounds.x2 - baseX, bounds.width())
+                                    : 0
+                                : bounds.x1 < baseX
+                                    ? Math.min(baseX - bounds.x1, bounds.width())
+                                    : 0) +
+                                (layerCount - 1) * space;
+                    }
+                    else {
+                        labelLength = 0;
+                    }
+                }
+                else {
+                    Object.keys(this.axisLabelLayerSize).forEach((layer, index) => {
+                        labelLength += this.axisLabelLayerSize[layer].width + (index > 0 ? space : 0);
+                    });
+                }
+            }
         }
         let tickLength = 0;
         if (((_b = this.attribute.tick) === null || _b === void 0 ? void 0 : _b.visible) && this.attribute.tick.inside === false) {
@@ -18401,32 +19064,70 @@ class CircleAxis extends AxisBase {
         if (((_c = this.attribute.subTick) === null || _c === void 0 ? void 0 : _c.visible) && this.attribute.subTick.inside === false) {
             tickLength = Math.max(tickLength, this.attribute.subTick.length || 2);
         }
-        const offset = radius + tickLength + labelHeight + space;
-        let textBaseline = 'middle';
-        let { position } = this.attribute.title;
-        if (isNil(position)) {
-            position = innerRadius === 0 ? 'end' : 'middle';
-        }
+        const offset = tickLength + labelLength + space;
+        const titlePoint = this.getVerticalCoord(point, offset, false);
+        const vector = this.getVerticalVector(offset, false, { x: 0, y: 0 });
+        let { angle } = restAttrs;
+        let textAlign;
         if (position === 'start') {
-            textBaseline = 'bottom';
-            titlePoint = {
-                x: center.x,
-                y: center.y - offset
-            };
+            textAlign = 'start';
         }
         else if (position === 'end') {
-            textBaseline = 'top';
-            titlePoint = {
-                x: center.x,
-                y: center.y + offset
-            };
+            textAlign = 'end';
+        }
+        else {
+            textAlign = 'center';
+        }
+        let textBaseline;
+        if (isNil(angle) && autoRotate) {
+            const v1 = [1, 0];
+            const radian = angleTo(axisVector, v1, true);
+            angle = radian;
+            const { verticalFactor = 1 } = this.attribute;
+            const factor = -1 * verticalFactor;
+            if (factor === 1) {
+                textBaseline = 'bottom';
+            }
+            else {
+                textBaseline = 'top';
+            }
+        }
+        else {
+            textAlign = this.getTextAlign(vector);
+            textBaseline = this.getTextBaseline(vector, false);
         }
-        const attrs = Object.assign(Object.assign(Object.assign({}, titlePoint), restAttrs), { textStyle: Object.assign({ textBaseline, textAlign: 'center' }, textStyle), state: {
+        let maxTagWidth = maxWidth;
+        if (isNil(maxTagWidth)) {
+            const { verticalLimitSize, verticalMinSize, orient } = this.attribute;
+            const limitSize = Math.min(verticalLimitSize || Infinity, verticalMinSize || Infinity);
+            if (isValidNumber(limitSize)) {
+                const isX = orient === 'bottom' || orient === 'top';
+                if (isX) {
+                    if (angle !== Math.PI / 2) {
+                        const cosValue = Math.abs(Math.cos(angle !== null && angle !== void 0 ? angle : 0));
+                        maxTagWidth = cosValue < 1e-6 ? Infinity : this.attribute.end.x / cosValue;
+                    }
+                    else {
+                        maxTagWidth = limitSize - offset;
+                    }
+                }
+                else {
+                    if (angle && angle !== 0) {
+                        const sinValue = Math.abs(Math.sin(angle));
+                        maxTagWidth = sinValue < 1e-6 ? Infinity : this.attribute.end.y / sinValue;
+                    }
+                    else {
+                        maxTagWidth = limitSize - offset;
+                    }
+                }
+            }
+        }
+        const attrs = Object.assign(Object.assign(Object.assign({}, titlePoint), restAttrs), { maxWidth: maxTagWidth, textStyle: Object.assign({ textAlign,
+                textBaseline }, textStyle), state: {
                 text: merge({}, DEFAULT_STATES$1, state.text),
                 shape: merge({}, DEFAULT_STATES$1, state.shape),
                 panel: merge({}, DEFAULT_STATES$1, state.background)
             } });
-        const { angle } = restAttrs;
         attrs.angle = angle;
         if (shape && shape.visible) {
             attrs.shape = Object.assign({ visible: true }, shape.style);
@@ -18439,733 +19140,551 @@ class CircleAxis extends AxisBase {
         }
         return attrs;
     }
-    getSubTickLineItems() {
-        var _a, _b;
-        const { subTick } = this.attribute;
-        const subTickLineItems = [];
-        const { count: subCount = 4, inside = false, length = 2 } = subTick;
-        const tickLineItems = this.tickLineItems;
-        const tickLineCount = tickLineItems.length;
-        if (tickLineCount >= 2) {
-            const tickSegment = this.data[1].value - this.data[0].value;
-            const isAlignWithLable = (_b = (_a = this.attribute) === null || _a === void 0 ? void 0 : _a.tick) === null || _b === void 0 ? void 0 : _b.alignWithLabel;
-            for (let i = 0; i < tickLineCount; i++) {
-                const pre = tickLineItems[i];
-                const next = tickLineItems[i + 1];
-                for (let j = 0; j < subCount; j++) {
-                    const percent = (j + 1) / (subCount + 1);
-                    const value = (1 - percent) * pre.value + percent * (next ? next.value : isAlignWithLable ? 1 : pre.value + tickSegment);
-                    const point = this.getTickCoord(value);
-                    const endPoint = this.getVerticalCoord(point, length, inside);
-                    subTickLineItems.push({
-                        start: point,
-                        end: endPoint,
-                        value
-                    });
-                }
+    getTextBaseline(vector, inside) {
+        let base = 'middle';
+        const { verticalFactor = 1 } = this.attribute;
+        const factor = (inside ? 1 : -1) * verticalFactor;
+        if (isNumberClose(vector[1], 0)) {
+            if (isNumberClose(vector[0], 0) && !Object.is(vector[0], -0) && !Object.is(vector[1], -0)) {
+                base = factor === 1 ? 'bottom' : 'top';
+            }
+            else {
+                base = 'middle';
             }
         }
-        return subTickLineItems;
+        else if (vector[1] > 0) {
+            base = 'top';
+        }
+        else if (vector[1] < 0) {
+            base = 'bottom';
+        }
+        return base;
+    }
+    getLabelAlign(vector, inside, angle) {
+        const orient = this.attribute.orient;
+        const isCartesian = ['top', 'bottom', 'right', 'left'].includes(orient);
+        if (isCartesian || (vector[0] === 0 && vector[1] === 0)) {
+            if (orient === 'top' || orient === 'bottom') {
+                return getXAxisLabelAlign(inside ? (orient === 'bottom' ? 'top' : 'bottom') : orient, angle);
+            }
+            if (orient === 'left' || orient === 'right') {
+                return getYAxisLabelAlign(inside ? (orient === 'left' ? 'right' : 'left') : orient, angle);
+            }
+        }
+        return {
+            textAlign: this.getTextAlign(vector),
+            textBaseline: this.getTextBaseline(vector, inside)
+        };
     }
     beforeLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+        var _a, _b, _c, _d;
+        const { flush = false } = this.attribute.label || {};
+        if (flush && labelShapes.length) {
+            const { orient, start: axisStart, end: axisEnd } = this.attribute;
+            const isX = orient === 'bottom' || orient === 'top';
+            const first = labelShapes[0];
+            const last$1 = last(labelShapes);
+            const isInverse = isX ? first.attribute.x > last$1.attribute.x : first.attribute.y < last$1.attribute.y;
+            if (isX) {
+                const leftMostLabel = isInverse ? last$1 : first;
+                const rightMostLabel = isInverse ? first : last$1;
+                const left = axisStart.x;
+                const right = axisEnd.x;
+                const leftBound = leftMostLabel.AABBBounds.x1;
+                const rightBound = rightMostLabel.AABBBounds.x2;
+                if (leftBound < left) {
+                    const angle = leftMostLabel.attribute.angle;
+                    if (angle) {
+                        leftMostLabel.setAttributes({ dx: ((_a = leftMostLabel.attribute.dx) !== null && _a !== void 0 ? _a : 0) + left - leftBound });
+                    }
+                    else {
+                        leftMostLabel.setAttributes({
+                            x: left,
+                            textAlign: 'left'
+                        });
+                    }
+                }
+                if (rightBound > right) {
+                    const angle = rightMostLabel.attribute.angle;
+                    if (angle) {
+                        rightMostLabel.setAttributes({ dx: ((_b = rightMostLabel.attribute.dx) !== null && _b !== void 0 ? _b : 0) + right - rightBound });
+                    }
+                    else {
+                        rightMostLabel.setAttributes({
+                            x: right,
+                            textAlign: 'right'
+                        });
+                    }
+                }
+            }
+            else {
+                const bottomMostLabel = isInverse ? last$1 : first;
+                const topMostLabel = isInverse ? first : last$1;
+                const bottomBound = bottomMostLabel.AABBBounds.y2;
+                const topBound = topMostLabel.AABBBounds.y1;
+                const top = axisStart.y;
+                const bottom = axisEnd.y;
+                if (topBound < top) {
+                    const angle = topMostLabel.attribute.angle;
+                    if (angle) {
+                        topMostLabel.setAttributes({
+                            dy: ((_c = topMostLabel.attribute.dy) !== null && _c !== void 0 ? _c : 0) + top - topBound
+                        });
+                    }
+                    else {
+                        topMostLabel.setAttributes({
+                            y: top,
+                            textBaseline: 'top'
+                        });
+                    }
+                }
+                if (bottomBound > bottom) {
+                    const angle = bottomMostLabel.attribute.angle;
+                    if (angle) {
+                        bottomMostLabel.setAttributes({
+                            dy: ((_d = bottomMostLabel.attribute.dy) !== null && _d !== void 0 ? _d : 0) + bottom - bottomBound
+                        });
+                    }
+                    else {
+                        bottomMostLabel.setAttributes({
+                            y: bottom,
+                            textBaseline: 'bottom'
+                        });
+                    }
+                }
+            }
+        }
         return;
     }
     handleLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
         if (isEmpty(labelShapes)) {
             return;
         }
-        const { inside, radius, center, size, label, orient } = this.attribute;
-        const bounds = size
-            ? {
-                x1: 0,
-                y1: 0,
-                x2: size.width,
-                y2: size.height
-            }
-            : {
-                x1: center.x - radius,
-                y1: center.y - radius,
-                x2: center.x + radius,
-                y2: center.y + radius
-            };
-        const { layoutFunc, autoLimit, limitEllipsis, autoHide: autoHide$1, autoHideMethod, autoHideSeparation, autoWrap } = label;
+        const { verticalLimitSize, label, orient } = this.attribute;
+        const limitLength = this._getAxisLabelLimitLength(verticalLimitSize, layerCount);
+        const { layoutFunc, autoRotate: autoRotate$1, autoRotateAngle, autoLimit: autoLimit$1, limitEllipsis, autoHide: autoHide$1, autoHideMethod, autoHideSeparation, lastVisible, firstVisible, autoWrap: autoWrap$1, overflowLimitLength } = label;
         if (isFunction(layoutFunc)) {
             layoutFunc(labelShapes, labelData, layer, this);
         }
         else {
-            if (autoLimit || autoWrap) {
-                circleAutoLimit(labelShapes, { inside, autoWrap, bounds, ellipsis: limitEllipsis, center });
+            if (autoRotate$1) {
+                autoRotate(labelShapes, {
+                    labelRotateAngle: autoRotateAngle,
+                    orient
+                });
+            }
+            else if (autoWrap$1) {
+                const isVertical = orient === 'left' || orient === 'right';
+                const axisLength = isVertical
+                    ? Math.abs(this.attribute.start.y - this.attribute.end.y)
+                    : Math.abs(this.attribute.start.x - this.attribute.end.x);
+                autoWrap(labelShapes, { orient, limitLength, axisLength, ellipsis: limitEllipsis });
+            }
+            if (!autoWrap$1 && autoLimit$1 && isValidNumber(limitLength) && limitLength > 0) {
+                const isVertical = orient === 'left' || orient === 'right';
+                const axisLength = isVertical
+                    ? Math.abs(this.attribute.start.y - this.attribute.end.y)
+                    : Math.abs(this.attribute.start.x - this.attribute.end.x);
+                const verticalLimitLength = isVertical
+                    ? axisLength / labelShapes.length
+                    : !autoHide$1 && !autoRotate$1
+                        ? axisLength / labelShapes.length
+                        : Infinity;
+                autoLimit(labelShapes, {
+                    limitLength,
+                    verticalLimitLength,
+                    ellipsis: limitEllipsis,
+                    orient,
+                    axisLength,
+                    overflowLimitLength
+                });
             }
             if (autoHide$1) {
                 autoHide(labelShapes, {
                     orient,
                     method: autoHideMethod,
-                    separation: autoHideSeparation
-                });
-            }
-        }
-    }
-    afterLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
-        return;
-    }
-    getTextBaseline(vector) {
-        if (Math.abs(vector[1] / vector[0]) < 0.3) {
-            return 'middle';
-        }
-        else if (vector[1] < 0) {
-            return 'bottom';
-        }
-        else if (vector[1] > 0) {
-            return 'top';
-        }
-        return 'middle';
-    }
-    getLabelAlign(vector, inside, angle) {
-        if (isNumberClose(vector[0], 0)) {
-            return {
-                textAlign: 'center',
-                textBaseline: vector[1] > 0 ? 'top' : 'bottom'
-            };
-        }
-        else if (vector[0] < 0) {
-            return {
-                textAlign: 'right',
-                textBaseline: this.getTextBaseline(vector)
-            };
-        }
-        else if (vector[0] > 0) {
-            return {
-                textAlign: 'left',
-                textBaseline: this.getTextBaseline(vector)
-            };
+                    separation: autoHideSeparation,
+                    lastVisible,
+                    firstVisible
+                });
+            }
         }
-        return {
-            textAlign: 'center',
-            textBaseline: 'middle'
-        };
-    }
-    getLabelPosition(point, vector, text, style) {
-        return point;
     }
-}
-CircleAxis.defaultAttributes = DEFAULT_AXIS_THEME;
-mixin(CircleAxis, CircleAxisMixin);
-
-var AnimateMode;
-!function (AnimateMode) {
-  AnimateMode[AnimateMode.NORMAL = 0] = "NORMAL", AnimateMode[AnimateMode.SET_ATTR_IMMEDIATELY = 1] = "SET_ATTR_IMMEDIATELY";
-}(AnimateMode || (AnimateMode = {}));
-
-var AnimateStepType;
-!function (AnimateStepType) {
-  AnimateStepType.wait = "wait", AnimateStepType.from = "from", AnimateStepType.to = "to", AnimateStepType.customAnimate = "customAnimate";
-}(AnimateStepType || (AnimateStepType = {}));
-var AnimateStatus;
-!function (AnimateStatus) {
-  AnimateStatus[AnimateStatus.INITIAL = 0] = "INITIAL", AnimateStatus[AnimateStatus.RUNNING = 1] = "RUNNING", AnimateStatus[AnimateStatus.PAUSED = 2] = "PAUSED", AnimateStatus[AnimateStatus.END = 3] = "END";
-}(AnimateStatus || (AnimateStatus = {}));
-
-class Easing {
-  constructor() {}
-  static linear(t) {
-    return t;
-  }
-  static none() {
-    return this.linear;
-  }
-  static get(amount) {
-    return amount < -1 ? amount = -1 : amount > 1 && (amount = 1), function (t) {
-      return 0 === amount ? t : amount < 0 ? t * (t * -amount + 1 + amount) : t * ((2 - t) * amount + (1 - amount));
-    };
-  }
-  static getPowIn(pow) {
-    return function (t) {
-      return Math.pow(t, pow);
-    };
-  }
-  static getPowOut(pow) {
-    return function (t) {
-      return 1 - Math.pow(1 - t, pow);
-    };
-  }
-  static getPowInOut(pow) {
-    return function (t) {
-      return (t *= 2) < 1 ? .5 * Math.pow(t, pow) : 1 - .5 * Math.abs(Math.pow(2 - t, pow));
-    };
-  }
-  static getBackIn(amount) {
-    return function (t) {
-      return t * t * ((amount + 1) * t - amount);
-    };
-  }
-  static getBackOut(amount) {
-    return function (t) {
-      return --t * t * ((amount + 1) * t + amount) + 1;
-    };
-  }
-  static getBackInOut(amount) {
-    return amount *= 1.525, function (t) {
-      return (t *= 2) < 1 ? t * t * ((amount + 1) * t - amount) * .5 : .5 * ((t -= 2) * t * ((amount + 1) * t + amount) + 2);
-    };
-  }
-  static sineIn(t) {
-    return 1 - Math.cos(t * Math.PI / 2);
-  }
-  static sineOut(t) {
-    return Math.sin(t * Math.PI / 2);
-  }
-  static sineInOut(t) {
-    return -(Math.cos(Math.PI * t) - 1) / 2;
-  }
-  static expoIn(t) {
-    return 0 === t ? 0 : Math.pow(2, 10 * t - 10);
-  }
-  static expoOut(t) {
-    return 1 === t ? 1 : 1 - Math.pow(2, -10 * t);
-  }
-  static expoInOut(t) {
-    return 0 === t ? 0 : 1 === t ? 1 : t < .5 ? Math.pow(2, 20 * t - 10) / 2 : (2 - Math.pow(2, -20 * t + 10)) / 2;
-  }
-  static circIn(t) {
-    return -(Math.sqrt(1 - t * t) - 1);
-  }
-  static circOut(t) {
-    return Math.sqrt(1 - --t * t);
-  }
-  static circInOut(t) {
-    return (t *= 2) < 1 ? -.5 * (Math.sqrt(1 - t * t) - 1) : .5 * (Math.sqrt(1 - (t -= 2) * t) + 1);
-  }
-  static bounceOut(t) {
-    return t < 1 / 2.75 ? 7.5625 * t * t : t < 2 / 2.75 ? 7.5625 * (t -= 1.5 / 2.75) * t + .75 : t < 2.5 / 2.75 ? 7.5625 * (t -= 2.25 / 2.75) * t + .9375 : 7.5625 * (t -= 2.625 / 2.75) * t + .984375;
-  }
-  static bounceIn(t) {
-    return 1 - Easing.bounceOut(1 - t);
-  }
-  static bounceInOut(t) {
-    return t < .5 ? .5 * Easing.bounceIn(2 * t) : .5 * Easing.bounceOut(2 * t - 1) + .5;
-  }
-  static getElasticIn(amplitude, period) {
-    return function (t) {
-      if (0 === t || 1 === t) return t;
-      const s = period / pi2 * Math.asin(1 / amplitude);
-      return -amplitude * Math.pow(2, 10 * (t -= 1)) * Math.sin((t - s) * pi2 / period);
-    };
-  }
-  static getElasticOut(amplitude, period) {
-    return function (t) {
-      if (0 === t || 1 === t) return t;
-      const s = period / pi2 * Math.asin(1 / amplitude);
-      return amplitude * Math.pow(2, -10 * t) * Math.sin((t - s) * pi2 / period) + 1;
-    };
-  }
-  static getElasticInOut(amplitude, period) {
-    return function (t) {
-      const s = period / pi2 * Math.asin(1 / amplitude);
-      return (t *= 2) < 1 ? amplitude * Math.pow(2, 10 * (t -= 1)) * Math.sin((t - s) * pi2 / period) * -.5 : amplitude * Math.pow(2, -10 * (t -= 1)) * Math.sin((t - s) * pi2 / period) * .5 + 1;
-    };
-  }
-  static registerFunc(name, func) {
-    Easing[name] = func;
-  }
-}
-function flicker(t, n) {
-  const step = 1 / n;
-  let flag = 1;
-  for (; t > step;) t -= step, flag *= -1;
-  const v = flag * t / step;
-  return v > 0 ? v : 1 + v;
-}
-Easing.quadIn = Easing.getPowIn(2), Easing.quadOut = Easing.getPowOut(2), Easing.quadInOut = Easing.getPowInOut(2), Easing.cubicIn = Easing.getPowIn(3), Easing.cubicOut = Easing.getPowOut(3), Easing.cubicInOut = Easing.getPowInOut(3), Easing.quartIn = Easing.getPowIn(4), Easing.quartOut = Easing.getPowOut(4), Easing.quartInOut = Easing.getPowInOut(4), Easing.quintIn = Easing.getPowIn(5), Easing.quintOut = Easing.getPowOut(5), Easing.quintInOut = Easing.getPowInOut(5), Easing.backIn = Easing.getBackIn(1.7), Easing.backOut = Easing.getBackOut(1.7), Easing.backInOut = Easing.getBackInOut(1.7), Easing.elasticIn = Easing.getElasticIn(1, .3), Easing.elasticOut = Easing.getElasticOut(1, .3), Easing.elasticInOut = Easing.getElasticInOut(1, .3 * 1.5), Easing.easeInOutQuad = t => (t /= .5) < 1 ? .5 * Math.pow(t, 2) : -.5 * ((t -= 2) * t - 2), Easing.easeOutElastic = x => {
-  const c4 = 2 * Math.PI / 3;
-  return 0 === x ? 0 : 1 === x ? 1 : Math.pow(2, -10 * x) * Math.sin((10 * x - .75) * c4) + 1;
-}, Easing.easeInOutElastic = x => {
-  const c5 = 2 * Math.PI / 4.5;
-  return 0 === x ? 0 : 1 === x ? 1 : x < .5 ? -Math.pow(2, 20 * x - 10) * Math.sin((20 * x - 11.125) * c5) / 2 : Math.pow(2, -20 * x + 10) * Math.sin((20 * x - 11.125) * c5) / 2 + 1;
-};
-for (let i = 0; i < 10; i++) Easing[`flicker${i}`] = t => flicker(t, i);
-for (let i = 2; i < 10; i++) Easing[`aIn${i}`] = t => i * t * t + (1 - i) * t;
-
-function interpolateNumber(from, to, ratio) {
-  return from + (to - from) * ratio;
-}
-
-class InterpolateUpdateStore {
-  constructor() {
-    this.opacity = (key, from, to, ratio, step, target) => {
-      target.attribute.opacity = interpolateNumber(from, to, ratio);
-    }, this.fillOpacity = (key, from, to, ratio, step, target) => {
-      target.attribute.fillOpacity = interpolateNumber(from, to, ratio);
-    }, this.strokeOpacity = (key, from, to, ratio, step, target) => {
-      target.attribute.strokeOpacity = interpolateNumber(from, to, ratio);
-    }, this.zIndex = (key, from, to, ratio, step, target) => {
-      target.attribute.zIndex = interpolateNumber(from, to, ratio);
-    }, this.backgroundOpacity = (key, from, to, ratio, step, target) => {
-      target.attribute.backgroundOpacity = interpolateNumber(from, to, ratio);
-    }, this.shadowOffsetX = (key, from, to, ratio, step, target) => {
-      target.attribute.shadowOffsetX = interpolateNumber(from, to, ratio);
-    }, this.shadowOffsetY = (key, from, to, ratio, step, target) => {
-      target.attribute.shadowOffsetY = interpolateNumber(from, to, ratio);
-    }, this.shadowBlur = (key, from, to, ratio, step, target) => {
-      target.attribute.shadowBlur = interpolateNumber(from, to, ratio);
-    }, this.fill = (key, from, to, ratio, step, target) => {
-      target.attribute.fill = interpolateColor(from, to, ratio, !1);
-    }, this.fillPure = (key, from, to, ratio, step, target) => {
-      target.attribute.fill = step.fromParsedProps.fill ? interpolatePureColorArrayToStr(step.fromParsedProps.fill, step.toParsedProps.fill, ratio) : step.toParsedProps.fill;
-    }, this.stroke = (key, from, to, ratio, step, target) => {
-      target.attribute.stroke = interpolateColor(from, to, ratio, !1);
-    }, this.strokePure = (key, from, to, ratio, step, target) => {
-      target.attribute.stroke = step.fromParsedProps.stroke ? interpolatePureColorArrayToStr(step.fromParsedProps.stroke, step.toParsedProps.stroke, ratio) : step.toParsedProps.stroke;
-    }, this.width = (key, from, to, ratio, step, target) => {
-      target.attribute.width = interpolateNumber(from, to, ratio), target.addUpdateBoundTag();
-    }, this.height = (key, from, to, ratio, step, target) => {
-      target.attribute.height = interpolateNumber(from, to, ratio), target.addUpdateBoundTag();
-    }, this.x = (key, from, to, ratio, step, target) => {
-      target.attribute.x = interpolateNumber(from, to, ratio), target.addUpdateBoundTag(), target.addUpdatePositionTag();
-    }, this.y = (key, from, to, ratio, step, target) => {
-      target.attribute.y = interpolateNumber(from, to, ratio), target.addUpdateBoundTag(), target.addUpdatePositionTag();
-    }, this.angle = (key, from, to, ratio, step, target) => {
-      target.attribute.angle = interpolateNumber(from, to, ratio), target.addUpdateBoundTag(), target.addUpdatePositionTag();
-    }, this.scaleX = (key, from, to, ratio, step, target) => {
-      target.attribute.scaleX = interpolateNumber(from, to, ratio), target.addUpdateBoundTag(), target.addUpdatePositionTag();
-    }, this.scaleY = (key, from, to, ratio, step, target) => {
-      target.attribute.scaleY = interpolateNumber(from, to, ratio), target.addUpdateBoundTag(), target.addUpdatePositionTag();
-    }, this.lineWidth = (key, from, to, ratio, step, target) => {
-      target.attribute.lineWidth = interpolateNumber(from, to, ratio), target.addUpdateBoundTag();
-    }, this.startAngle = (key, from, to, ratio, step, target) => {
-      target.attribute.startAngle = interpolateNumber(from, to, ratio), target.addUpdateBoundTag();
-    }, this.endAngle = (key, from, to, ratio, step, target) => {
-      target.attribute.endAngle = interpolateNumber(from, to, ratio), target.addUpdateBoundTag();
-    }, this.radius = (key, from, to, ratio, step, target) => {
-      target.attribute.radius = interpolateNumber(from, to, ratio), target.addUpdateBoundTag();
-    }, this.outerRadius = (key, from, to, ratio, step, target) => {
-      target.attribute.outerRadius = interpolateNumber(from, to, ratio), target.addUpdateBoundTag();
-    }, this.innerRadius = (key, from, to, ratio, step, target) => {
-      target.attribute.innerRadius = interpolateNumber(from, to, ratio), target.addUpdateBoundTag();
-    }, this.size = (key, from, to, ratio, step, target) => {
-      target.attribute.size = interpolateNumber(from, to, ratio), target.addUpdateBoundTag();
-    }, this.points = (key, from, to, ratio, step, target) => {
-      target.attribute.points = pointsInterpolation(from, to, ratio), target.addUpdateBoundTag();
-    };
-  }
-}
-const interpolateUpdateStore = new InterpolateUpdateStore();
-function commonInterpolateUpdate(key, from, to, ratio, step, target) {
-  if (Number.isFinite(to) && Number.isFinite(from)) return target.attribute[key] = from + (to - from) * ratio, !0;
-  if (Array.isArray(to) && Array.isArray(from) && to.length === from.length) {
-    const nextList = [];
-    let valid = !0;
-    for (let i = 0; i < to.length; i++) {
-      const v = from[i],
-        val = v + (to[i] - v) * ratio;
-      if (!Number.isFinite(val)) {
-        valid = !1;
-        break;
-      }
-      nextList.push(val);
+    afterLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+        const { verticalLimitSize, orient } = this.attribute;
+        const isHorizontal = orient === 'bottom' || orient === 'top';
+        const axisLabelContainerBounds = labelContainer.AABBBounds;
+        let axisLabelContainerSize = isHorizontal ? axisLabelContainerBounds.height() : axisLabelContainerBounds.width();
+        const { verticalMinSize } = this.attribute;
+        if (isValidNumber(verticalMinSize) && (!isValidNumber(verticalLimitSize) || verticalMinSize <= verticalLimitSize)) {
+            const minSize = this._getAxisLabelLimitLength(verticalMinSize, layerCount);
+            axisLabelContainerSize = Math.max(axisLabelContainerSize, minSize);
+            let x;
+            let y;
+            if (orient === 'left') {
+                x = axisLabelContainerBounds.x2 - axisLabelContainerSize;
+                y = axisLabelContainerBounds.y1;
+            }
+            else if (orient === 'right') {
+                x = axisLabelContainerBounds.x1;
+                y = axisLabelContainerBounds.y1;
+            }
+            else if (orient === 'top') {
+                x = axisLabelContainerBounds.x1;
+                y = axisLabelContainerBounds.y2 - axisLabelContainerSize;
+            }
+            else if (orient === 'bottom') {
+                x = axisLabelContainerBounds.x1;
+                y = axisLabelContainerBounds.y1;
+            }
+            const bgRect = graphicCreator.rect({
+                x,
+                y,
+                width: isHorizontal ? axisLabelContainerBounds.width() : axisLabelContainerSize,
+                height: isHorizontal ? axisLabelContainerSize : axisLabelContainerBounds.height(),
+                pickable: false
+            });
+            bgRect.name = AXIS_ELEMENT_NAME.axisLabelBackground;
+            bgRect.id = this._getNodeId('axis-label-background');
+            labelContainer.insertBefore(bgRect, labelContainer.firstChild);
+        }
+        if (isValid(this.attribute.label.containerAlign)) {
+            let start;
+            if (orient === 'left') {
+                start = axisLabelContainerBounds.x2 - axisLabelContainerSize;
+            }
+            else if (orient === 'right') {
+                start = axisLabelContainerBounds.x1;
+            }
+            else if (orient === 'top') {
+                start = axisLabelContainerBounds.y2 - axisLabelContainerSize;
+            }
+            else if (orient === 'bottom') {
+                start = axisLabelContainerBounds.y1;
+            }
+            alignAxisLabels(labelShapes, start, axisLabelContainerSize, orient, this.attribute.label.containerAlign);
+        }
+    }
+    _getAxisLabelLimitLength(limitSize, layerCount) {
+        var _a, _b, _c, _d, _e;
+        const { label, title, line, tick } = this.attribute;
+        const labelSpace = (_a = label.space) !== null && _a !== void 0 ? _a : 4;
+        let limitLength = limitSize;
+        let titleHeight = 0;
+        let titleSpacing = 0;
+        const axisLineWidth = line && line.visible ? (_b = line.style.lineWidth) !== null && _b !== void 0 ? _b : 1 : 0;
+        const tickLength = tick && tick.visible ? (_c = tick.length) !== null && _c !== void 0 ? _c : 4 : 0;
+        if (title && title.visible && typeof title.text === 'string') {
+            titleHeight = measureTextSize(title.text, title.textStyle, (_e = (_d = this.stage) === null || _d === void 0 ? void 0 : _d.getTheme()) === null || _e === void 0 ? void 0 : _e.text).height;
+            const padding = normalizePadding(title.padding);
+            titleSpacing = title.space + padding[0] + padding[2];
+        }
+        if (limitLength) {
+            limitLength = (limitLength - labelSpace - titleSpacing - titleHeight - axisLineWidth - tickLength) / layerCount;
+        }
+        return limitLength;
+    }
+    release() {
+        super.release();
+        this._breaks = null;
     }
-    return valid && (target.attribute[key] = nextList), !0;
-  }
-  return !1;
 }
+LineAxis.defaultAttributes = DEFAULT_AXIS_THEME;
+mixin(LineAxis, LineAxisMixin);
 
-function noop() {}
-class Step {
-  constructor(type, props, duration, easing) {
-    this._startTime = 0, this._hasFirstRun = !1, this.type = type, this.props = props, this.duration = duration, this.easing = easing ? "function" == typeof easing ? easing : Easing[easing] : Easing.linear, "wait" === type && (this.onUpdate = noop);
-  }
-  bind(target, animate) {
-    this.target = target, this.animate = animate, this.onBind();
-  }
-  append(step) {
-    this.next = step, step.prev = this, step.setStartTime(this.getStartTime() + this.duration, !1);
-  }
-  updateDownstreamStartTimes() {
-    let currentStep = this.next,
-      currentStartTime = this._startTime + this.duration;
-    for (; currentStep;) currentStep.setStartTime(currentStartTime, !1), currentStartTime += currentStep.duration, currentStep = currentStep.next;
-    this.animate.updateDuration();
-  }
-  getLastProps() {
-    return this.prev ? this.prev.props || {} : this.animate.getStartProps();
-  }
-  setDuration(duration) {
-    let updateDownstream = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
-    this.duration = duration, updateDownstream && this.updateDownstreamStartTimes();
-  }
-  getDuration() {
-    return this.duration;
-  }
-  determineInterpolateUpdateFunction() {
-    if (!this.props) return;
-    const funcs = [];
-    this.propKeys.forEach(key => {
-      if ("fill" === key || "stroke" === key) {
-        const from = this.fromProps[key],
-          to = this.props[key];
-        if (isString(from) && isString(to)) {
-          const fromArray = ColorStore.Get(from, ColorType.Color255),
-            toArray = ColorStore.Get(to, ColorType.Color255);
-          this.fromParsedProps || (this.fromParsedProps = {}), this.toParsedProps || (this.toParsedProps = {}), this.fromParsedProps[key] = fromArray, this.toParsedProps[key] = toArray, funcs.push(interpolateUpdateStore["fill" === key ? "fillPure" : "strokePure"]);
-        } else interpolateUpdateStore[key] ? funcs.push(interpolateUpdateStore[key]) : funcs.push(commonInterpolateUpdate);
-      } else interpolateUpdateStore[key] ? funcs.push(interpolateUpdateStore[key]) : funcs.push(commonInterpolateUpdate);
-    }), this.interpolateUpdateFunctions = funcs;
-  }
-  setStartTime(time) {
-    let updateDownstream = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
-    this._startTime = time, updateDownstream && this.updateDownstreamStartTimes();
-  }
-  getStartTime() {
-    return this._startTime;
-  }
-  onBind() {}
-  onFirstRun() {}
-  onStart() {
-    if (!this._hasFirstRun) {
-      this._hasFirstRun = !0, this.fromProps = this.getLastProps();
-      const startProps = this.animate.getStartProps();
-      this.propKeys && this.propKeys.forEach(key => {
-        var _a;
-        this.fromProps[key] = null !== (_a = this.fromProps[key]) && void 0 !== _a ? _a : startProps[key];
-      }), this.determineInterpolateUpdateFunction(), this.tryPreventConflict(), this.trySyncStartProps(), this.onFirstRun();
+class CircleAxisMixin {
+    isInValidValue(value) {
+        const { startAngle = POLAR_START_ANGLE, endAngle = POLAR_END_ANGLE } = this.attribute;
+        if (Math.abs(endAngle - startAngle) % (Math.PI * 2) === 0) {
+            return value > 1;
+        }
+        return value < 0 || value > 1;
+    }
+    getTickCoord(tickValue) {
+        const { startAngle = POLAR_START_ANGLE, endAngle = POLAR_END_ANGLE, center, radius, inside = false, innerRadius = 0 } = this.attribute;
+        const angle = startAngle + (endAngle - startAngle) * tickValue;
+        return polarToCartesian(center, inside && innerRadius > 0 ? innerRadius : radius, angle);
+    }
+    getVerticalVector(offset, inside = false, point) {
+        return getCircleVerticalVector(offset, point, this.attribute.center, inside, this.attribute.inside);
+    }
+    getRelativeVector(point) {
+        const { center } = this.attribute;
+        return [point.y - center.y, -1 * (point.x - center.x)];
     }
-  }
-  tryPreventConflict() {
-    const animate = this.animate;
-    this.target.animates.forEach(a => {
-      if (a === animate || a.priority > animate.priority) return;
-      const fromProps = a.getStartProps();
-      this.propKeys.forEach(key => {
-        null != fromProps[key] && a.preventAttr(key);
-      });
-    });
-  }
-  deleteSelfAttr(key) {
-    var _a;
-    delete this.props[key], this.fromProps && delete this.fromProps[key];
-    const index = this.propKeys.indexOf(key);
-    -1 !== index && (this.propKeys.splice(index, 1), null === (_a = this.interpolateUpdateFunctions) || void 0 === _a || _a.splice(index, 1));
-  }
-  trySyncStartProps() {
-    this.propKeys.forEach(key => {
-      this.fromProps[key] = this.animate.target.getComputedAttribute(key);
-    });
-  }
-  update(end, ratio, out) {
-    if (this.onStart(), !this.props || !this.propKeys) return;
-    const easedRatio = this.easing(ratio);
-    this.animate.interpolateUpdateFunction ? this.animate.interpolateUpdateFunction(this.fromProps, this.props, easedRatio, this, this.target) : this.interpolateUpdateFunctions.forEach((func, index) => {
-      if (!this.animate.validAttr(this.propKeys[index])) return;
-      const key = this.propKeys[index];
-      func(key, this.fromProps[key], this.props[key], easedRatio, this, this.target);
-    }), this.onUpdate(end, easedRatio, out);
-  }
-  onUpdate(end, ratio, out) {}
-  onEnd(cb) {
-    this.target.setAttributes(this.props), cb ? this._endCb = cb : this._endCb && this._endCb(this.animate, this);
-  }
-  getEndProps() {
-    return this.props;
-  }
-  getFromProps() {
-    return this.fromProps;
-  }
-  getMergedEndProps() {
-    return this.getEndProps();
-  }
-  stop() {}
-}
-class WaitStep extends Step {
-  constructor(type, props, duration, easing) {
-    super(type, props, duration, easing);
-  }
-  update(end, ratio, out) {
-    this.onStart();
-  }
-  determineInterpolateUpdateFunction() {}
 }
 
-class DefaultTimeline {
-  get animateCount() {
-    return this.animates.length;
-  }
-  constructor() {
-    this.animates = [], this._playSpeed = 1, this._totalDuration = 0, this._startTime = 0, this._currentTime = 0, this._endAnimatePtr = -1, this.id = Generator.GenAutoIncrementId(), this.animates = [], this.paused = !1;
-  }
-  isRunning() {
-    return !this.paused && this._endAnimatePtr >= 0;
-  }
-  forEachAccessAnimate(cb) {
-    for (let i = 0; i <= this._endAnimatePtr; i++) cb(this.animates[i], i);
-  }
-  addAnimate(animate) {
-    this.animates.push(animate), this._endAnimatePtr++, this.animates[this.animates.length - 1] = this.animates[this._endAnimatePtr], this.animates[this._endAnimatePtr] = animate, this._totalDuration = Math.max(this._totalDuration, animate.getStartTime() + animate.getDuration());
-  }
-  pause() {
-    this.paused = !0;
-  }
-  resume() {
-    this.paused = !1;
-  }
-  tick(delta) {
-    if (this.paused) return;
-    const scaledDelta = delta * this._playSpeed;
-    this._currentTime += scaledDelta, this.forEachAccessAnimate((animate, i) => {
-      animate.status === AnimateStatus$1.END ? this.removeAnimate(animate, !0, i) : animate.status !== AnimateStatus$1.RUNNING && animate.status !== AnimateStatus$1.INITIAL || animate.advance(scaledDelta);
-    });
-  }
-  clear() {
-    this.forEachAccessAnimate(animate => {
-      animate.release();
-    }), this.animates = [], this._totalDuration = 0;
-  }
-  removeAnimate(animate) {
-    let release = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
-    let index = arguments.length > 2 ? arguments[2] : undefined;
-    this._endAnimatePtr < 0 || (release && (animate._onRemove && animate._onRemove.forEach(cb => cb()), animate.release()), index = null != index ? index : this.animates.indexOf(animate), this.animates[index] = this.animates[this._endAnimatePtr], this._endAnimatePtr--);
-  }
-  recalculateTotalDuration() {
-    this._totalDuration = 0, this.animates.forEach(animate => {
-      this._totalDuration = Math.max(this._totalDuration, animate.getStartTime() + animate.getDuration());
-    });
-  }
-  getTotalDuration() {
-    return this._totalDuration;
-  }
-  getPlaySpeed() {
-    return this._playSpeed;
-  }
-  setPlaySpeed(speed) {
-    this._playSpeed = speed;
-  }
-  getPlayState() {
-    return this.paused ? "paused" : 0 === this.animateCount ? "stopped" : "playing";
-  }
-  setStartTime(time) {
-    this._startTime = time;
-  }
-  getStartTime() {
-    return this._startTime;
-  }
-  getCurrentTime() {
-    return this._currentTime;
-  }
-  setCurrentTime(time) {
-    this._currentTime = time;
-  }
+function findSiblingLabels(labels, selfIndex) {
+    const len = labels.length;
+    const prevLabel = selfIndex >= 1 ? labels[selfIndex - 1] : labels[len - 1];
+    const nextLabel = selfIndex < len - 1 ? labels[selfIndex + 1] : labels[0];
+    return { prevLabel, nextLabel };
+}
+function adjustMaxLineWidth(label, maxLineWidth, ellipsis) {
+    var _a;
+    label.setAttributes({
+        maxLineWidth,
+        ellipsis: (_a = label.attribute.ellipsis) !== null && _a !== void 0 ? _a : ellipsis
+    });
+}
+function adjustMaxHeight(labels, selfIndex, bounds) {
+    const siblings = [];
+    if (labels.length >= 3) {
+        const { prevLabel, nextLabel } = findSiblingLabels(labels, selfIndex);
+        siblings.push(prevLabel, nextLabel);
+    }
+    else if (labels.length === 2) {
+        siblings.push(labels[selfIndex === 0 ? 1 : 0]);
+    }
+    const label = labels[selfIndex];
+    let heightLimit = Math.min(Math.abs(label.attribute.y - bounds.y1), Math.abs(label.attribute.y - bounds.y2));
+    siblings.forEach(sibling => {
+        heightLimit = Math.min(heightLimit, Math.abs(sibling.attribute.y - label.attribute.y));
+    });
+    if (heightLimit > 0) {
+        label.setAttributes({ whiteSpace: 'normal', heightLimit });
+    }
+}
+function circleAutoLimit(labels, config) {
+    const { ellipsis, inside, bounds, autoWrap, center } = config;
+    if (!inside) {
+        labels.forEach((label, index) => {
+            const { x, y } = label.attribute;
+            const b = label.AABBBounds;
+            if (isNumberClose(x, center.x)) {
+                if (y > bounds.y2 || y < bounds.y1) {
+                    adjustMaxLineWidth(label, 0, ellipsis);
+                    return;
+                }
+                const boxWidth = bounds.x2 - bounds.x1;
+                if (labels.length >= 3) {
+                    const { prevLabel, nextLabel } = findSiblingLabels(labels, index);
+                    let leftX = prevLabel.attribute.x;
+                    let rightX = nextLabel.attribute.x;
+                    if (leftX > rightX) {
+                        leftX = nextLabel.attribute.x;
+                        rightX = prevLabel.attribute.x;
+                    }
+                    const maxWidth = leftX === rightX
+                        ? boxWidth
+                        : x >= leftX && x <= rightX
+                            ? rightX - leftX
+                            : Math.min(Math.abs(leftX - x), Math.abs(rightX - x));
+                    if (label.AABBBounds.width() > maxWidth) {
+                        adjustMaxLineWidth(label, maxWidth, ellipsis);
+                    }
+                }
+                else if (label.AABBBounds.width() > boxWidth) {
+                    adjustMaxLineWidth(label, boxWidth, ellipsis);
+                }
+            }
+            else if (x > center.x && b.x2 > bounds.x2) {
+                adjustMaxLineWidth(label, bounds.x2 - x, ellipsis);
+                autoWrap && adjustMaxHeight(labels, index, bounds);
+            }
+            else if (x < center.x && b.x1 < bounds.x1) {
+                adjustMaxLineWidth(label, x - bounds.x1, ellipsis);
+                autoWrap && adjustMaxHeight(labels, index, bounds);
+            }
+        });
+    }
 }
-const defaultTimeline = new DefaultTimeline();
-defaultTimeline.isGlobal = !0;
 
-class Animate {
-  constructor() {
-    let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Generator.GenAutoIncrementId();
-    let timeline = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultTimeline;
-    let slience = arguments.length > 2 ? arguments[2] : undefined;
-    this.id = id, this.status = AnimateStatus.INITIAL, this._timeline = timeline, timeline.addAnimate(this), this.slience = slience, this._startTime = 0, this._duration = 0, this._totalDuration = 0, this._loopCount = 0, this._currentLoop = 0, this._bounce = !1, this._firstStep = null, this._lastStep = null, this._startProps = {}, this._endProps = {}, this._preventAttrs = new Set(), this.currentTime = 0, this.interpolateUpdateFunction = null, this.priority = 0;
-  }
-  getStartProps() {
-    return this._startProps;
-  }
-  getEndProps() {
-    return this._endProps;
-  }
-  setTimeline(timeline) {
-    this._timeline = timeline;
-  }
-  getTimeline() {
-    return this._timeline;
-  }
-  get timeline() {
-    return this._timeline;
-  }
-  bind(target) {
-    return this.target = target, this.target.onAnimateBind && !this.slience && this.target.onAnimateBind(this), this.target.animationAttribute || (this.target.animationAttribute = {}), this;
-  }
-  to(props) {
-    let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 300;
-    let easing = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "linear";
-    const step = new Step(AnimateStepType.to, props, duration, easing);
-    return step.bind(this.target, this), this.updateStepAfterAppend(step), this;
-  }
-  wait(delay) {
-    const step = new WaitStep(AnimateStepType.wait, {}, delay, "linear");
-    return step.bind(this.target, this), this.updateStepAfterAppend(step), this;
-  }
-  updateStepAfterAppend(step) {
-    this._firstStep ? (this._lastStep.append(step), this._lastStep = step) : (this._firstStep = step, this._lastStep = step), this.parseStepProps(step), this.updateDuration();
-  }
-  parseStepProps(step) {
-    this._lastStep && (step.propKeys = step.propKeys || Object.keys(step.props), Object.keys(this._endProps).forEach(key => {
-      var _a;
-      step.props[key] = null !== (_a = step.props[key]) && void 0 !== _a ? _a : this._endProps[key];
-    }), step.propKeys.forEach(key => {
-      this._endProps[key] = step.props[key];
-    }));
-  }
-  reSyncProps() {
-    if (!this._lastStep) return;
-    this._endProps = {};
-    let currentStep = this._firstStep;
-    for (; currentStep;) Object.keys(this._endProps).forEach(key => {
-      var _a;
-      currentStep.props[key] = null !== (_a = currentStep.props[key]) && void 0 !== _a ? _a : this._endProps[key];
-    }), currentStep.propKeys.forEach(key => {
-      this._endProps[key] = currentStep.props[key];
-    }), currentStep = currentStep.next;
-  }
-  from(props) {
-    let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 300;
-    let easing = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "linear";
-    const step = new Step(AnimateStepType.from, props, duration, easing);
-    return this._firstStep ? (this._lastStep.append(step), this._lastStep = step) : (this._firstStep = step, this._lastStep = step), this.updateDuration(), this;
-  }
-  play(customAnimate) {
-    return customAnimate.bind(this.target, this), this.updateStepAfterAppend(customAnimate), this;
-  }
-  pause() {
-    this.status === AnimateStatus.RUNNING && (this.status = AnimateStatus.PAUSED);
-  }
-  resume() {
-    this.status === AnimateStatus.PAUSED && (this.status = AnimateStatus.RUNNING);
-  }
-  onStart(cb) {
-    var _a;
-    cb ? (this._onStart || (this._onStart = []), this._onStart.push(cb)) : (null === (_a = this._onStart) || void 0 === _a || _a.forEach(cb => cb()), Object.keys(this._endProps).forEach(key => {
-      this._startProps[key] = this.target.getComputedAttribute(key);
-    }));
-  }
-  onEnd(cb) {
-    var _a;
-    cb ? (this._onEnd || (this._onEnd = []), this._onEnd.push(cb)) : null === (_a = this._onEnd) || void 0 === _a || _a.forEach(cb => cb());
-  }
-  onFrame(cb) {
-    cb && (this._onFrame || (this._onFrame = []), this._onFrame.push(cb));
-  }
-  onRemove(cb) {
-    var _a;
-    cb ? (this._onRemove || (this._onRemove = []), this._onRemove.push(cb)) : null === (_a = this._onRemove) || void 0 === _a || _a.forEach(cb => cb());
-  }
-  preventAttr(key) {
-    this._preventAttrs.add(key), delete this._startProps[key], delete this._endProps[key];
-    let step = this._firstStep;
-    for (; step;) step.deleteSelfAttr(key), step = step.next;
-  }
-  preventAttrs(keys) {
-    keys.forEach(key => this._preventAttrs.add(key));
-  }
-  validAttr(key) {
-    return !this._preventAttrs.has(key);
-  }
-  runCb(cb) {
-    var _a;
-    return null === (_a = this._lastStep) || void 0 === _a || _a.onEnd(cb), this;
-  }
-  startAt(t) {
-    return this._startTime = t, this;
-  }
-  customInterpolate(key, ratio, from, to, target, ret) {
-    return !1;
-  }
-  getFromValue() {
-    return this._startProps;
-  }
-  getToValue() {
-    return this._endProps;
-  }
-  stop(type) {
-    let step = this._firstStep;
-    for (; step;) step.stop(), step = step.next;
-    this.status = AnimateStatus.END, this.onEnd(), this.target && ("start" === type ? this.target.setAttributes(this._startProps) : "end" === type ? this.target.setAttributes(this._endProps) : type && this.target.setAttributes(type));
-  }
-  release() {
-    this.status = AnimateStatus.END, this._onRemove && this._onRemove.forEach(cb => cb()), this._onStart = [], this._onFrame = [], this._onEnd = [], this._onRemove = [];
-  }
-  getDuration() {
-    return this._duration;
-  }
-  getStartTime() {
-    return this._startTime;
-  }
-  afterAll(list) {
-    if (!list || 0 === list.length) return this;
-    let maxEndTime = 0;
-    return list.forEach(animate => {
-      const endTime = animate.getStartTime() + animate.getTotalDuration();
-      maxEndTime = Math.max(maxEndTime, endTime);
-    }), this.startAt(maxEndTime);
-  }
-  after(animate) {
-    if (!animate) return this;
-    const endTime = animate.getStartTime() + animate.getTotalDuration();
-    return this.startAt(endTime);
-  }
-  parallel(animate) {
-    return animate ? (this.startAt(animate.getStartTime()), this) : this;
-  }
-  loop(n) {
-    return !0 === n ? n = 1 / 0 : !1 === n && (n = 0), this._loopCount = n, this.updateDuration(), this;
-  }
-  bounce(b) {
-    return this._bounce = b, this;
-  }
-  advance(delta) {
-    var _a;
-    if (this.status === AnimateStatus.END) return void console.warn("aaa 动画已经结束，不能推进");
-    const nextTime = this.currentTime + delta;
-    if (nextTime < this._startTime) return void (this.currentTime = nextTime);
-    if (nextTime >= this._startTime + this._totalDuration) return null === (_a = this._lastStep) || void 0 === _a || _a.onEnd(), this.onEnd(), void (this.status = AnimateStatus.END);
-    this.status = AnimateStatus.RUNNING, this.currentTime <= this._startTime && this.onStart(), this.currentTime = nextTime;
-    let cycleTime = nextTime - this._startTime,
-      newLoop = !1,
-      bounceTime = !1;
-    if (this._loopCount > 0) {
-      cycleTime = (nextTime - this._startTime) % this._duration;
-      const currentLoop = Math.floor((nextTime - this._startTime) / this._duration);
-      newLoop = currentLoop > this._currentLoop, this._currentLoop = currentLoop, bounceTime = this._bounce && currentLoop % 2 == 1, bounceTime && (cycleTime = this._duration - cycleTime);
+loadCircleAxisComponent();
+class CircleAxis extends AxisBase {
+    constructor(attributes, options) {
+        super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, CircleAxis.defaultAttributes, attributes));
+    }
+    renderLine(container) {
+        const { startAngle = POLAR_START_ANGLE, endAngle = POLAR_END_ANGLE, radius, center, innerRadius = 0, line = {}, inside = false, sides } = this.attribute;
+        let arcRadius = radius;
+        let arcInnerRadius = innerRadius;
+        if (inside && innerRadius > 0) {
+            arcRadius = innerRadius;
+            arcInnerRadius = 0;
+        }
+        let lineGraphic;
+        if (isValidNumber(sides) && sides >= 3) {
+            const gridPoints = getCirclePoints(center, sides, arcRadius, startAngle, endAngle);
+            lineGraphic = graphicCreator.path(Object.assign(Object.assign({}, line.style), { path: getPolygonPath(gridPoints, true) }));
+        }
+        else {
+            const arcAttrs = Object.assign(Object.assign(Object.assign({}, center), { startAngle,
+                endAngle, radius: arcRadius, innerRadius: arcInnerRadius }), line.style);
+            lineGraphic = graphicCreator.circle(arcAttrs);
+        }
+        lineGraphic.name = AXIS_ELEMENT_NAME.line;
+        lineGraphic.id = this._getNodeId('line');
+        if (!isEmpty(line.state)) {
+            lineGraphic.states = merge({}, DEFAULT_STATES$1, line.state);
+        }
+        container.add(lineGraphic);
     }
-    newLoop && !bounceTime && this.target.setAttributes(this._startProps);
-    let targetStep = null;
-    if (this._lastStep === this._firstStep) targetStep = this._firstStep;else {
-      let currentStep = this._firstStep;
-      for (; currentStep;) {
-        const stepStartTime = currentStep.getStartTime(),
-          stepDuration = currentStep.getDuration();
-        if (cycleTime >= stepStartTime && cycleTime <= stepStartTime + stepDuration) {
-          targetStep = currentStep;
-          break;
+    getTitleAttribute() {
+        var _a, _b, _c;
+        const { center, radius, innerRadius = 0 } = this.attribute;
+        const _d = this.attribute.title, { space = 4, textStyle = {}, shape, background, state = {} } = _d, restAttrs = __rest(_d, ["space", "textStyle", "shape", "background", "state"]);
+        let titlePoint = center;
+        let labelHeight = 0;
+        if (((_a = this.attribute.label) === null || _a === void 0 ? void 0 : _a.visible) && this.attribute.label.inside === false) {
+            labelHeight = get(this.attribute.label, 'style.fontSize', 12) + get(this.attribute.label, 'space', 4);
         }
-        currentStep = currentStep.next;
-      }
+        let tickLength = 0;
+        if (((_b = this.attribute.tick) === null || _b === void 0 ? void 0 : _b.visible) && this.attribute.tick.inside === false) {
+            tickLength = this.attribute.tick.length || 4;
+        }
+        if (((_c = this.attribute.subTick) === null || _c === void 0 ? void 0 : _c.visible) && this.attribute.subTick.inside === false) {
+            tickLength = Math.max(tickLength, this.attribute.subTick.length || 2);
+        }
+        const offset = radius + tickLength + labelHeight + space;
+        let textBaseline = 'middle';
+        let { position } = this.attribute.title;
+        if (isNil(position)) {
+            position = innerRadius === 0 ? 'end' : 'middle';
+        }
+        if (position === 'start') {
+            textBaseline = 'bottom';
+            titlePoint = {
+                x: center.x,
+                y: center.y - offset
+            };
+        }
+        else if (position === 'end') {
+            textBaseline = 'top';
+            titlePoint = {
+                x: center.x,
+                y: center.y + offset
+            };
+        }
+        const attrs = Object.assign(Object.assign(Object.assign({}, titlePoint), restAttrs), { textStyle: Object.assign({ textBaseline, textAlign: 'center' }, textStyle), state: {
+                text: merge({}, DEFAULT_STATES$1, state.text),
+                shape: merge({}, DEFAULT_STATES$1, state.shape),
+                panel: merge({}, DEFAULT_STATES$1, state.background)
+            } });
+        const { angle } = restAttrs;
+        attrs.angle = angle;
+        if (shape && shape.visible) {
+            attrs.shape = Object.assign({ visible: true }, shape.style);
+            if (shape.space) {
+                attrs.space = shape.space;
+            }
+        }
+        if (background && background.visible) {
+            attrs.panel = Object.assign({ visible: true }, background.style);
+        }
+        return attrs;
+    }
+    getSubTickLineItems() {
+        var _a, _b;
+        const { subTick } = this.attribute;
+        const subTickLineItems = [];
+        const { count: subCount = 4, inside = false, length = 2 } = subTick;
+        const tickLineItems = this.tickLineItems;
+        const tickLineCount = tickLineItems.length;
+        if (tickLineCount >= 2) {
+            const tickSegment = this.data[1].value - this.data[0].value;
+            const isAlignWithLable = (_b = (_a = this.attribute) === null || _a === void 0 ? void 0 : _a.tick) === null || _b === void 0 ? void 0 : _b.alignWithLabel;
+            for (let i = 0; i < tickLineCount; i++) {
+                const pre = tickLineItems[i];
+                const next = tickLineItems[i + 1];
+                for (let j = 0; j < subCount; j++) {
+                    const percent = (j + 1) / (subCount + 1);
+                    const value = (1 - percent) * pre.value + percent * (next ? next.value : isAlignWithLable ? 1 : pre.value + tickSegment);
+                    const point = this.getTickCoord(value);
+                    const endPoint = this.getVerticalCoord(point, length, inside);
+                    subTickLineItems.push({
+                        start: point,
+                        end: endPoint,
+                        value
+                    });
+                }
+            }
+        }
+        return subTickLineItems;
+    }
+    beforeLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+        return;
+    }
+    handleLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+        if (isEmpty(labelShapes)) {
+            return;
+        }
+        const { inside, radius, center, size, label, orient } = this.attribute;
+        const bounds = size
+            ? {
+                x1: 0,
+                y1: 0,
+                x2: size.width,
+                y2: size.height
+            }
+            : {
+                x1: center.x - radius,
+                y1: center.y - radius,
+                x2: center.x + radius,
+                y2: center.y + radius
+            };
+        const { layoutFunc, autoLimit, limitEllipsis, autoHide: autoHide$1, autoHideMethod, autoHideSeparation, autoWrap } = label;
+        if (isFunction(layoutFunc)) {
+            layoutFunc(labelShapes, labelData, layer, this);
+        }
+        else {
+            if (autoLimit || autoWrap) {
+                circleAutoLimit(labelShapes, { inside, autoWrap, bounds, ellipsis: limitEllipsis, center });
+            }
+            if (autoHide$1) {
+                autoHide(labelShapes, {
+                    orient,
+                    method: autoHideMethod,
+                    separation: autoHideSeparation
+                });
+            }
+        }
+    }
+    afterLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+        return;
+    }
+    getTextBaseline(vector) {
+        if (Math.abs(vector[1] / vector[0]) < 0.3) {
+            return 'middle';
+        }
+        else if (vector[1] < 0) {
+            return 'bottom';
+        }
+        else if (vector[1] > 0) {
+            return 'top';
+        }
+        return 'middle';
+    }
+    getLabelAlign(vector, inside, angle) {
+        if (isNumberClose(vector[0], 0)) {
+            return {
+                textAlign: 'center',
+                textBaseline: vector[1] > 0 ? 'top' : 'bottom'
+            };
+        }
+        else if (vector[0] < 0) {
+            return {
+                textAlign: 'right',
+                textBaseline: this.getTextBaseline(vector)
+            };
+        }
+        else if (vector[0] > 0) {
+            return {
+                textAlign: 'left',
+                textBaseline: this.getTextBaseline(vector)
+            };
+        }
+        return {
+            textAlign: 'center',
+            textBaseline: 'middle'
+        };
+    }
+    getLabelPosition(point, vector, text, style) {
+        return point;
     }
-    if (!targetStep) return;
-    const ratio = (cycleTime - targetStep.getStartTime()) / targetStep.getDuration(),
-      isEnd = ratio >= 1;
-    targetStep.update(isEnd, ratio, {}), isEnd && targetStep.onEnd();
-  }
-  updateDuration() {
-    this._lastStep ? (this._duration = this._lastStep.getStartTime() + this._lastStep.getDuration(), this._totalDuration = this._duration * (this._loopCount + 1)) : this._duration = 0;
-  }
-  getTotalDuration() {
-    return this._totalDuration;
-  }
-  getLoop() {
-    return this._loopCount;
-  }
-}
-
-class ACustomAnimate extends Step {
-  constructor(customFrom, customTo, duration, easing, params) {
-    super("customAnimate", customTo, duration, easing), this.type = "customAnimate", this.customFrom = customFrom, this.params = params;
-  }
-  update(end, ratio, out) {
-    if (this.onStart(), !this.props || !this.propKeys) return;
-    const easedRatio = this.easing(ratio);
-    this.onUpdate(end, easedRatio, out);
-  }
-  setProps(props) {
-    this.props = props, this.propKeys = Object.keys(props), this.animate.reSyncProps();
-  }
 }
+CircleAxis.defaultAttributes = DEFAULT_AXIS_THEME;
+mixin(CircleAxis, CircleAxisMixin);
 
 class GroupTransition extends ACustomAnimate {
     constructor() {
@@ -20061,10 +20580,11 @@ function bitmapTool(width, height, padding = { top: 0, left: 0, right: 0, bottom
 }
 function clampRangeByBitmap($, range) {
     const { x1, x2, y1, y2 } = range;
-    const _x1 = clamp(x1, 0, $.width);
-    const _x2 = clamp(x2, 0, $.width);
-    const _y1 = clamp(y1, 0, $.height);
-    const _y2 = clamp(y2, 0, $.height);
+    const { top = 0, left = 0, right = 0, bottom = 0 } = $.padding;
+    const _x1 = clamp(x1, -left, $.width + right);
+    const _x2 = clamp(x2, -left, $.width + right);
+    const _y1 = clamp(y1, -top, $.height + bottom);
+    const _y2 = clamp(y2, -top, $.height + bottom);
     return {
         x1: $.x(_x1),
         x2: $.x(_x2),
@@ -20410,11 +20930,100 @@ function getAlignOffset(align) {
     return 0.5;
 }
 
+class LabelUpdate extends AComponentAnimate {
+    onBind() {
+        const animator = createComponentAnimator(this.target);
+        this._animator = animator;
+        const duration = this.duration;
+        const easing = this.easing;
+        const { prevText, curText, prevLabelLine, curLabelLine } = this.params;
+        const diff = {};
+        for (const key in curText.attribute) {
+            if (prevText.attribute[key] !== curText.attribute[key]) {
+                diff[key] = curText.attribute[key];
+            }
+        }
+        const rest = __rest(diff, ["text"]);
+        animator.animate(prevText, {
+            type: 'to',
+            to: rest,
+            duration,
+            easing
+        });
+        animator.animate(prevText, {
+            type: 'increaseCount',
+            to: {
+                text: curText.attribute.text
+            },
+            duration,
+            easing
+        });
+        if (prevLabelLine) {
+            animator.animate(prevLabelLine, {
+                type: 'to',
+                to: curLabelLine.attribute,
+                duration,
+                easing
+            });
+        }
+        this.completeBind(animator);
+    }
+    tryPreventConflict() {
+        return;
+    }
+}
+class LabelEnter extends AComponentAnimate {
+    onBind() {
+        const animator = createComponentAnimator(this.target);
+        this._animator = animator;
+        const duration = this.duration;
+        const easing = this.easing;
+        const { relatedGraphic, relatedGraphics, config } = this.params;
+        const { mode, type = 'fadeIn' } = config;
+        const target = this.target;
+        let startTime = 0;
+        if (mode === 'after') {
+            relatedGraphic.animates &&
+                relatedGraphic.animates.forEach((animate) => {
+                    startTime = Math.max(startTime, animate.getStartTime() + animate.getTotalDuration());
+                });
+        }
+        else if (mode === 'after-all') {
+            relatedGraphics &&
+                relatedGraphics.forEach((graphic) => {
+                    graphic.animates &&
+                        graphic.animates.forEach((animate) => {
+                            startTime = Math.max(startTime, animate.getStartTime() + animate.getTotalDuration());
+                        });
+                });
+        }
+        else {
+            relatedGraphic.animates &&
+                relatedGraphic.animates.forEach((animate) => {
+                    startTime = Math.max(startTime, animate.getStartTime());
+                });
+        }
+        animator.animate(target, Object.assign(Object.assign({}, config), { duration,
+            easing,
+            startTime,
+            type }));
+        this.completeBind(animator);
+    }
+    tryPreventConflict() {
+        return;
+    }
+}
+function registerLabelAnimate() {
+    AnimateExecutor.registerBuiltInAnimate('labelUpdate', LabelUpdate);
+    AnimateExecutor.registerBuiltInAnimate('labelEnter', LabelEnter);
+}
+
 function loadLabelComponent() {
     registerGroup();
     registerText();
     registerRichtext();
     registerLine();
+    registerLabelAnimate();
 }
 
 const isIntersect = (top, bottom) => {
@@ -20589,7 +21198,7 @@ function shiftY(texts, option) {
 }
 
 loadLabelComponent();
-class LabelBase extends AbstractComponent {
+class LabelBase extends AnimateComponent {
     setBitmap(bitmap) {
         this._bitmap = bitmap;
     }
@@ -20835,26 +21444,7 @@ class LabelBase extends AbstractComponent {
                 }
             }
         }
-        if (this.attribute.animation !== false) {
-            const { animation, animationEnter, animationExit, animationUpdate } = this.attribute;
-            const animationCfg = isObject(animation) ? animation : {};
-            this._animationConfig = {
-                enter: animationEnter !== false ? merge({}, DefaultLabelAnimation, animationCfg, animationEnter !== null && animationEnter !== void 0 ? animationEnter : {}) : false,
-                exit: animationExit !== false ? merge({}, DefaultLabelAnimation, animationCfg, animationExit !== null && animationExit !== void 0 ? animationExit : {}) : false,
-                update: animationUpdate !== false
-                    ? isArray(animationUpdate)
-                        ? animationUpdate
-                        : merge({}, DefaultLabelAnimation, animationCfg, animationUpdate !== null && animationUpdate !== void 0 ? animationUpdate : {})
-                    : false
-            };
-        }
-        else {
-            this._animationConfig = {
-                enter: false,
-                exit: false,
-                update: false
-            };
-        }
+        this._prepareAnimate(DefaultLabelAnimation);
     }
     getRelatedGraphic(item) {
         return this._idToGraphic.get(item.id);
@@ -20931,7 +21521,9 @@ class LabelBase extends AbstractComponent {
         return this._overlapByStrategy(labels, option, bmpTool, bitmap);
     }
     _overlapGlobal(labels, option, bmpTool, bitmap) {
-        let result = labels.filter(label => label.attribute.visible && label.attribute.opacity !== 0);
+        let result = labels.filter(label => label.attribute.visible &&
+            label.attribute.opacity !== 0 &&
+            this.isMarkInsideRect(this.getRelatedGraphic(label.attribute), bmpTool));
         const { clampForce = true, hideOnHit = true, overlapPadding, strategy } = option;
         if (clampForce) {
             for (let i = 0; i < result.length; i++) {
@@ -21023,7 +21615,7 @@ class LabelBase extends AbstractComponent {
             const text = labels[i];
             const baseMark = this.getRelatedGraphic(text.attribute);
             text.update();
-            if (!isRectIntersect(baseMark.AABBBounds, { x1: 0, x2: bmpTool.width, y1: 0, y2: bmpTool.height }, true)) {
+            if (!this.isMarkInsideRect(baseMark, bmpTool)) {
                 continue;
             }
             if (canPlace(bmpTool, bitmap, text.AABBBounds, clampForce, overlapPadding)) {
@@ -21063,6 +21655,23 @@ class LabelBase extends AbstractComponent {
         }
         return result;
     }
+    isMarkInsideRect(baseMark, bmpTool) {
+        const { left, right, top, bottom } = bmpTool.padding;
+        const rect = { x1: -left, x2: bmpTool.width + right, y1: -top, y2: bmpTool.height + bottom };
+        const bounds = baseMark.AABBBounds;
+        if (bounds.width() !== 0 && bounds.height() !== 0) {
+            return isRectIntersect(baseMark.AABBBounds, rect, true);
+        }
+        const { attribute } = baseMark;
+        if (baseMark.type === 'rect') {
+            const { x, x1, y, y1 } = attribute;
+            return pointInRect({ x: x !== null && x !== void 0 ? x : x1, y: y !== null && y !== void 0 ? y : y1 }, rect, true);
+        }
+        else if ('x' in attribute && 'y' in attribute) {
+            return pointInRect({ x: attribute.x, y: attribute.y }, rect, true);
+        }
+        return false;
+    }
     getBaseMarkGroup() {
         const { baseMarkGroupName } = this.attribute;
         if (!baseMarkGroupName) {
@@ -21126,20 +21735,22 @@ class LabelBase extends AbstractComponent {
         this._removeLabel(prevTextMap);
         this._graphicToText = currentTextMap;
     }
-    runEnterAnimation(text) {
+    runEnterAnimation(text, labelLine) {
         if (this._enableAnimation === false || !this._animationConfig.enter) {
             return;
         }
         const relatedGraphic = this.getRelatedGraphic(text.attribute);
         const { enter } = this._animationConfig;
-        text.applyAnimationState(['enter'], [
+        [text, labelLine].filter(Boolean).forEach(item => item.applyAnimationState(['enter'], [
             {
                 name: 'enter',
-                animation: Object.assign(Object.assign({}, enter), { selfOnly: true, customParameters: {
-                        relatedGraphic
+                animation: Object.assign(Object.assign({}, enter), { type: 'labelEnter', selfOnly: true, customParameters: {
+                        relatedGraphic,
+                        relatedGraphics: this._idToGraphic,
+                        config: Object.assign(Object.assign({}, enter), { type: item === text ? enter.type : 'clipIn' })
                     } })
             }
-        ]);
+        ]));
     }
     _runUpdateAnimation(prevLabel, currentLabel) {
         if (this._enableAnimation === false || !this._animationConfig.update) {
@@ -21173,7 +21784,7 @@ class LabelBase extends AbstractComponent {
         if (labelLine) {
             this.add(labelLine);
         }
-        this.runEnterAnimation(text);
+        this.runEnterAnimation(text, labelLine);
     }
     _updateLabel(prevLabel, currentLabel) {
         const { text: prevText, labelLine: prevLabelLine } = prevLabel;
@@ -21201,7 +21812,7 @@ class LabelBase extends AbstractComponent {
                 label.text.applyAnimationState(['exit'], [
                     {
                         name: 'exit',
-                        animation: Object.assign({ type: 'fadeOut' }, this._animationConfig.exit)
+                        animation: Object.assign(Object.assign({}, this._animationConfig.exit), { type: 'fadeOut' })
                     }
                 ], () => {
                     removeLabelAndLine(label);
@@ -21209,7 +21820,7 @@ class LabelBase extends AbstractComponent {
                 (_a = label.labelLine) === null || _a === void 0 ? void 0 : _a.applyAnimationState(['exit'], [
                     {
                         name: 'exit',
-                        animation: Object.assign({ type: 'fadeOut' }, this._animationConfig.exit)
+                        animation: Object.assign(Object.assign({}, this._animationConfig.exit), { type: 'fadeOut' })
                     }
                 ], () => {
                 });
@@ -31298,6 +31909,6 @@ StoryLabelItem.defaultAttributes = {
     theme: 'default'
 };
 
-const version = "0.23.0-alpha.3";
+const version = "1.0.0-alpha.2";
 
 export { AXIS_ELEMENT_NAME, AbstractComponent, ArcInfo, ArcLabel, ArcSegment, AxisStateValue, BasePlayer, Brush, CheckBox, CircleAxis, CircleAxisGrid, CircleCrosshair, ColorContinuousLegend, ContinuousPlayer, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DEFAULT_LABEL_SPACE, DEFAULT_PAGER_SPACE, DEFAULT_SHAPE_SIZE, DEFAULT_SHAPE_SPACE, DEFAULT_STATES$1 as DEFAULT_STATES, DEFAULT_TITLE_SPACE, DEFAULT_VALUE_SPACE, DataLabel, DataZoom, DataZoomActiveTag, DirectionEnum, DiscreteLegend, DiscretePlayer, EmptyTip, GroupTransition, IMarkAreaLabelPosition, IMarkCommonArcLabelPosition, IMarkLineLabelPosition, IMarkPointItemPosition, IOperateType, Indicator, LEGEND_ELEMENT_NAME, LabelBase, LegendEvent, LegendStateValue, LineAxis, LineAxisGrid, LineCrosshair, LineLabel, LinkPath, MarkArcArea, MarkArcLine, MarkArea, MarkLine, MarkPoint, Pager, PlayerEventEnum, PolygonCrosshair, PolygonSectorCrosshair, PopTip, Radio, RectCrosshair, RectLabel, SLIDER_ELEMENT_NAME, ScrollBar, SectorCrosshair, Segment, SizeContinuousLegend, Slider, StoryLabelItem, Switch, SymbolLabel, Tag, Timeline, Title, Tooltip, TopZIndex, VTag, WeatherBox, alignTextInLine, angle, angleLabelOrientAttribute, angleTo, cartesianTicks, clampRadian, computeOffsetForlimit, continuousTicks, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, fuzzyEqualNumber, getAxisBreakSymbolAttrs, getCircleLabelPosition, getCirclePoints, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getPolygonPath, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, hasOverlap, htmlAttributeTransform, initTextMeasure, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, limitShapeInBounds, linearDiscreteTicks, loadPoptip, loadScrollbar, measureTextSize, normalize, polarAngleAxisDiscreteTicks, polarTicks, reactAttributeTransform, registerArcDataLabel, registerLineDataLabel, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, registerRectDataLabel, registerSymbolDataLabel, removeRepeatPoint, richTextAttributeTransform, scale, scrollbarModule, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, textIntersect, ticks, traverseGroup, version };