@visactor/vrender-components 0.16.14-alpha.3 → 0.16.14-alpha.4

package/dist/index.js

@@ -4470,10 +4470,7 @@
     direction: "horizontal",
     wordBreak: "break-all",
     ignoreBuf: !1,
-    verticalMode: 0,
-    whiteSpace: "no-wrap",
-    heightLimit: 1 / 0,
-    lineClamp: 1 / 0
+    verticalMode: 0
   };
   var DefaultStyle = Object.assign(Object.assign(Object.assign({
     opacity: 1,
@@ -5348,137 +5345,6 @@
     return containPath(commands, lineWidth, !0, x, y);
   }
 
-  var Edge;
-  !function (Edge) {
-    Edge[Edge.Top = 1] = "Top", Edge[Edge.Right = 2] = "Right", Edge[Edge.Bottom = 4] = "Bottom", Edge[Edge.Left = 8] = "Left", Edge[Edge.ALL = 15] = "ALL";
-  }(Edge || (Edge = {}));
-  var _strokeVec4 = [!1, !1, !1, !1];
-  var parseStroke = function parseStroke(stroke) {
-    var _a;
-    var isFullStroke = !0;
-    if (vutils.isBoolean(stroke, !0)) {
-      for (var i = 0; i < 4; i++) _strokeVec4[i] = stroke, isFullStroke && (isFullStroke = !(null !== (_a = _strokeVec4[i]) && void 0 !== _a && !_a));
-      isFullStroke = stroke;
-    } else if (Array.isArray(stroke)) for (var _i = 0; _i < 4; _i++) _strokeVec4[_i] = !!stroke[_i], isFullStroke && (isFullStroke = !!_strokeVec4[_i]);else _strokeVec4[0] = !1, _strokeVec4[1] = !1, _strokeVec4[2] = !1, _strokeVec4[3] = !1;
-    return {
-      isFullStroke: isFullStroke,
-      stroke: _strokeVec4
-    };
-  };
-  var _paddingVec4 = [0, 0, 0, 0];
-  var parsePadding = function parsePadding(padding) {
-    return padding ? vutils.isArray(padding) ? 0 === padding.length ? 0 : 1 === padding.length ? padding[0] : 2 === padding.length ? (_paddingVec4[0] = padding[0], _paddingVec4[2] = padding[0], _paddingVec4[1] = padding[1], _paddingVec4[3] = padding[1], _paddingVec4) : padding : padding : 0;
-  };
-  var _coords = [{
-      x: 0,
-      y: 0
-    }, {
-      x: 0,
-      y: 0
-    }, {
-      x: 0,
-      y: 0
-    }, {
-      x: 0,
-      y: 0
-    }],
-    indexList = [1, 2, 3, 0, 1, 2, 3, 0];
-  function circleBounds(startAngle, endAngle, radius, bounds) {
-    for (; startAngle >= vutils.pi2;) startAngle -= vutils.pi2;
-    for (; startAngle < 0;) startAngle += vutils.pi2;
-    for (; startAngle > endAngle;) endAngle += vutils.pi2;
-    _coords[0].x = radius, _coords[1].y = radius, _coords[2].x = -radius, _coords[3].y = -radius;
-    var startIdx = Math.ceil(startAngle / vutils.halfPi) % 4,
-      endIdx = Math.ceil(endAngle / vutils.halfPi) % 4;
-    if (bounds.add(vutils.cos(startAngle) * radius, vutils.sin(startAngle) * radius), bounds.add(vutils.cos(endAngle) * radius, vutils.sin(endAngle) * radius), startIdx !== endIdx || endAngle - startAngle > vutils.pi) {
-      var match = !1;
-      for (var i = 0; i < indexList.length; i++) if (match || startIdx !== indexList[i]) {
-        if (match && endIdx === indexList[i]) break;
-        if (match) {
-          var p = _coords[indexList[i]];
-          bounds.add(p.x, p.y);
-        }
-      } else {
-        match = !0;
-        var _p = _coords[startIdx];
-        bounds.add(_p.x, _p.y);
-      }
-    }
-  }
-  function pointInterpolation(pointA, pointB, ratio) {
-    var _pointAt = vutils.pointAt(pointA.x, pointA.y, pointB.x, pointB.y, ratio),
-      x = _pointAt.x,
-      y = _pointAt.y,
-      _pointAt2 = vutils.pointAt(pointA.x1, pointA.y1, pointB.x1, pointB.y1, ratio),
-      x1 = _pointAt2.x,
-      y1 = _pointAt2.y,
-      point = new vutils.Point(x, y, x1, y1);
-    return point.defined = pointB.defined, point;
-  }
-  function pointsInterpolation(pointsA, pointsB, ratio) {
-    if (!pointsA || !pointsB) return [];
-    Array.isArray(pointsA) || (pointsA = [pointsA]), Array.isArray(pointsB) || (pointsB = [pointsB]);
-    var points = [];
-    if (pointsA.length > pointsB.length) {
-      points = pointsB.map(function (point) {
-        var p = new vutils.Point(point.x, point.y, point.x1, point.y1);
-        return p.defined = point.defined, p;
-      });
-      for (var i = 0; i < pointsB.length; i++) points[i] = pointInterpolation(pointsA[i], pointsB[i], ratio);
-    } else {
-      points = pointsB.map(function (point) {
-        var p = new vutils.Point(point.x, point.y, point.x1, point.y1);
-        return p.defined = point.defined, p;
-      });
-      for (var _i2 = 0; _i2 < pointsA.length; _i2++) points[_i2] = pointInterpolation(pointsA[_i2], pointsB[_i2], ratio);
-    }
-    return points;
-  }
-  function getAttributeFromDefaultAttrList(attr, key) {
-    if (vutils.isArray(attr)) {
-      var val;
-      for (var i = 0; i < attr.length && void 0 === val; i++) val = attr[i][key];
-      return val;
-    }
-    return attr[key];
-  }
-  var RafBasedSTO = /*#__PURE__*/function () {
-    function RafBasedSTO() {
-      _classCallCheck(this, RafBasedSTO);
-      this.durations = [], this.timeout = RafBasedSTO.TimeOut, this.lastDate = 0, this.durationsListThreshold = 30;
-    }
-    _createClass(RafBasedSTO, [{
-      key: "call",
-      value: function call(cb) {
-        var _this = this;
-        return this.lastDate = Date.now(), setTimeout(function () {
-          _this.appendDuration(Date.now() - _this.lastDate), cb(0);
-        }, this.timeout, !0);
-      }
-    }, {
-      key: "clear",
-      value: function clear(h) {
-        clearTimeout(h);
-      }
-    }, {
-      key: "appendDuration",
-      value: function appendDuration(d) {
-        this.durations.push(d), this.durations.length > this.durationsListThreshold && this.durations.shift(), this.timeout = Math.min(Math.max(this.durations.reduce(function (a, b) {
-          return a + b;
-        }, 0) / this.durations.length, 1e3 / 60), 1e3 / 30);
-      }
-    }]);
-    return RafBasedSTO;
-  }();
-  RafBasedSTO.TimeOut = 1e3 / 60;
-  new RafBasedSTO();
-  var calculateLineHeight = function calculateLineHeight(lineHeight, fontSize) {
-    if (vutils.isString(lineHeight) && "%" === lineHeight[lineHeight.length - 1]) {
-      return fontSize * (Number.parseFloat(lineHeight.substring(0, lineHeight.length - 1)) / 100);
-    }
-    return lineHeight;
-  };
-
   var __decorate$U = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
@@ -5555,9 +5421,7 @@
           },
           getTextBounds: void 0,
           specialCharSet: "-/: .,@%'\"~" + vutils.TextMeasure.ALPHABET_CHAR_SET + vutils.TextMeasure.ALPHABET_CHAR_SET.toUpperCase()
-        }, null != option ? option : {}), Object.assign(Object.assign({}, textSpec), {
-          lineHeight: calculateLineHeight(null == textSpec ? void 0 : textSpec.lineHeight, null == textSpec ? void 0 : textSpec.fontSize)
-        }));
+        }, null != option ? option : {}), textSpec);
       }
     }]);
     return DefaultGraphicUtil;
@@ -7472,6 +7336,131 @@
     easing: "cubicOut"
   };
 
+  var Edge;
+  !function (Edge) {
+    Edge[Edge.Top = 1] = "Top", Edge[Edge.Right = 2] = "Right", Edge[Edge.Bottom = 4] = "Bottom", Edge[Edge.Left = 8] = "Left", Edge[Edge.ALL = 15] = "ALL";
+  }(Edge || (Edge = {}));
+  var _strokeVec4 = [!1, !1, !1, !1];
+  var parseStroke = function parseStroke(stroke) {
+    var _a;
+    var isFullStroke = !0;
+    if (vutils.isBoolean(stroke, !0)) {
+      for (var i = 0; i < 4; i++) _strokeVec4[i] = stroke, isFullStroke && (isFullStroke = !(null !== (_a = _strokeVec4[i]) && void 0 !== _a && !_a));
+      isFullStroke = stroke;
+    } else if (Array.isArray(stroke)) for (var _i = 0; _i < 4; _i++) _strokeVec4[_i] = !!stroke[_i], isFullStroke && (isFullStroke = !!_strokeVec4[_i]);else _strokeVec4[0] = !1, _strokeVec4[1] = !1, _strokeVec4[2] = !1, _strokeVec4[3] = !1;
+    return {
+      isFullStroke: isFullStroke,
+      stroke: _strokeVec4
+    };
+  };
+  var _paddingVec4 = [0, 0, 0, 0];
+  var parsePadding = function parsePadding(padding) {
+    return padding ? vutils.isArray(padding) ? 0 === padding.length ? 0 : 1 === padding.length ? padding[0] : 2 === padding.length ? (_paddingVec4[0] = padding[0], _paddingVec4[2] = padding[0], _paddingVec4[1] = padding[1], _paddingVec4[3] = padding[1], _paddingVec4) : padding : padding : 0;
+  };
+  var _coords = [{
+      x: 0,
+      y: 0
+    }, {
+      x: 0,
+      y: 0
+    }, {
+      x: 0,
+      y: 0
+    }, {
+      x: 0,
+      y: 0
+    }],
+    indexList = [1, 2, 3, 0, 1, 2, 3, 0];
+  function circleBounds(startAngle, endAngle, radius, bounds) {
+    for (; startAngle >= vutils.pi2;) startAngle -= vutils.pi2;
+    for (; startAngle < 0;) startAngle += vutils.pi2;
+    for (; startAngle > endAngle;) endAngle += vutils.pi2;
+    _coords[0].x = radius, _coords[1].y = radius, _coords[2].x = -radius, _coords[3].y = -radius;
+    var startIdx = Math.ceil(startAngle / vutils.halfPi) % 4,
+      endIdx = Math.ceil(endAngle / vutils.halfPi) % 4;
+    if (bounds.add(vutils.cos(startAngle) * radius, vutils.sin(startAngle) * radius), bounds.add(vutils.cos(endAngle) * radius, vutils.sin(endAngle) * radius), startIdx !== endIdx || endAngle - startAngle > vutils.pi) {
+      var match = !1;
+      for (var i = 0; i < indexList.length; i++) if (match || startIdx !== indexList[i]) {
+        if (match && endIdx === indexList[i]) break;
+        if (match) {
+          var p = _coords[indexList[i]];
+          bounds.add(p.x, p.y);
+        }
+      } else {
+        match = !0;
+        var _p = _coords[startIdx];
+        bounds.add(_p.x, _p.y);
+      }
+    }
+  }
+  function pointInterpolation(pointA, pointB, ratio) {
+    var _pointAt = vutils.pointAt(pointA.x, pointA.y, pointB.x, pointB.y, ratio),
+      x = _pointAt.x,
+      y = _pointAt.y,
+      _pointAt2 = vutils.pointAt(pointA.x1, pointA.y1, pointB.x1, pointB.y1, ratio),
+      x1 = _pointAt2.x,
+      y1 = _pointAt2.y,
+      point = new vutils.Point(x, y, x1, y1);
+    return point.defined = pointB.defined, point;
+  }
+  function pointsInterpolation(pointsA, pointsB, ratio) {
+    if (!pointsA || !pointsB) return [];
+    Array.isArray(pointsA) || (pointsA = [pointsA]), Array.isArray(pointsB) || (pointsB = [pointsB]);
+    var points = [];
+    if (pointsA.length > pointsB.length) {
+      points = pointsB.map(function (point) {
+        var p = new vutils.Point(point.x, point.y, point.x1, point.y1);
+        return p.defined = point.defined, p;
+      });
+      for (var i = 0; i < pointsB.length; i++) points[i] = pointInterpolation(pointsA[i], pointsB[i], ratio);
+    } else {
+      points = pointsB.map(function (point) {
+        var p = new vutils.Point(point.x, point.y, point.x1, point.y1);
+        return p.defined = point.defined, p;
+      });
+      for (var _i2 = 0; _i2 < pointsA.length; _i2++) points[_i2] = pointInterpolation(pointsA[_i2], pointsB[_i2], ratio);
+    }
+    return points;
+  }
+  function getAttributeFromDefaultAttrList(attr, key) {
+    if (vutils.isArray(attr)) {
+      var val;
+      for (var i = 0; i < attr.length && void 0 === val; i++) val = attr[i][key];
+      return val;
+    }
+    return attr[key];
+  }
+  var RafBasedSTO = /*#__PURE__*/function () {
+    function RafBasedSTO() {
+      _classCallCheck(this, RafBasedSTO);
+      this.durations = [], this.timeout = RafBasedSTO.TimeOut, this.lastDate = 0, this.durationsListThreshold = 30;
+    }
+    _createClass(RafBasedSTO, [{
+      key: "call",
+      value: function call(cb) {
+        var _this = this;
+        return this.lastDate = Date.now(), setTimeout(function () {
+          _this.appendDuration(Date.now() - _this.lastDate), cb(0);
+        }, this.timeout, !0);
+      }
+    }, {
+      key: "clear",
+      value: function clear(h) {
+        clearTimeout(h);
+      }
+    }, {
+      key: "appendDuration",
+      value: function appendDuration(d) {
+        this.durations.push(d), this.durations.length > this.durationsListThreshold && this.durations.shift(), this.timeout = Math.min(Math.max(this.durations.reduce(function (a, b) {
+          return a + b;
+        }, 0) / this.durations.length, 1e3 / 60), 1e3 / 30);
+      }
+    }]);
+    return RafBasedSTO;
+  }();
+  RafBasedSTO.TimeOut = 1e3 / 60;
+  new RafBasedSTO();
+
   var IncreaseCount = /*#__PURE__*/function (_ACustomAnimate) {
     _inherits(IncreaseCount, _ACustomAnimate);
     var _super = _createSuper(IncreaseCount);
@@ -9974,7 +9963,7 @@
     return CanvasTextLayout;
   }();
 
-  var TEXT_UPDATE_TAG_KEY = ["text", "maxLineWidth", "heightLimit", "lineClamp", "fontSize", "fontFamily", "fontWeight", "ellipsis", "lineHeight", "direction", "wordBreak"].concat(_toConsumableArray(GRAPHIC_UPDATE_TAG_KEY));
+  var TEXT_UPDATE_TAG_KEY = ["text", "maxLineWidth", "fontSize", "fontFamily", "fontWeight", "ellipsis", "lineHeight", "direction", "wordBreak"].concat(_toConsumableArray(GRAPHIC_UPDATE_TAG_KEY));
   var Text = /*#__PURE__*/function (_Graphic) {
     _inherits(Text, _Graphic);
     var _super = _createSuper(Text);
@@ -10048,117 +10037,6 @@
           paddingArray = parsePadding(boundsPadding);
         return paddingArray && bounds.expand(paddingArray), this.clearUpdateBoundTag(), bounds;
       }
-    }, {
-      key: "updateWrapAABBBounds",
-      value: function updateWrapAABBBounds(text) {
-        var _a, _b, _c, _d;
-        var textTheme = getTheme(this).text,
-          _this$attribute = this.attribute,
-          _this$attribute$fontF = _this$attribute.fontFamily,
-          fontFamily = _this$attribute$fontF === void 0 ? textTheme.fontFamily : _this$attribute$fontF,
-          _this$attribute$textA = _this$attribute.textAlign,
-          textAlign = _this$attribute$textA === void 0 ? textTheme.textAlign : _this$attribute$textA,
-          _this$attribute$textB = _this$attribute.textBaseline,
-          textBaseline = _this$attribute$textB === void 0 ? textTheme.textBaseline : _this$attribute$textB,
-          _this$attribute$fontS = _this$attribute.fontSize,
-          fontSize = _this$attribute$fontS === void 0 ? textTheme.fontSize : _this$attribute$fontS,
-          _this$attribute$ellip = _this$attribute.ellipsis,
-          ellipsis = _this$attribute$ellip === void 0 ? textTheme.ellipsis : _this$attribute$ellip,
-          maxLineWidth = _this$attribute.maxLineWidth,
-          _this$attribute$strok = _this$attribute.stroke,
-          stroke = _this$attribute$strok === void 0 ? textTheme.stroke : _this$attribute$strok,
-          _this$attribute$lineW = _this$attribute.lineWidth,
-          lineWidth = _this$attribute$lineW === void 0 ? textTheme.lineWidth : _this$attribute$lineW,
-          _this$attribute$wordB = _this$attribute.wordBreak,
-          wordBreak = _this$attribute$wordB === void 0 ? textTheme.wordBreak : _this$attribute$wordB,
-          _this$attribute$fontW = _this$attribute.fontWeight,
-          fontWeight = _this$attribute$fontW === void 0 ? textTheme.fontWeight : _this$attribute$fontW,
-          _this$attribute$ignor = _this$attribute.ignoreBuf,
-          ignoreBuf = _this$attribute$ignor === void 0 ? textTheme.ignoreBuf : _this$attribute$ignor,
-          _this$attribute$heigh = _this$attribute.heightLimit,
-          heightLimit = _this$attribute$heigh === void 0 ? 0 : _this$attribute$heigh,
-          lineClamp = _this$attribute.lineClamp,
-          lineHeight = null !== (_a = calculateLineHeight(this.attribute.lineHeight, this.attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : this.attribute.fontSize || textTheme.fontSize,
-          buf = ignoreBuf ? 0 : 2;
-        if (!this.shouldUpdateShape() && (null === (_b = this.cache) || void 0 === _b ? void 0 : _b.layoutData)) {
-          var _bbox = this.cache.layoutData.bbox;
-          return this._AABBBounds.set(_bbox.xOffset, _bbox.yOffset, _bbox.xOffset + _bbox.width, _bbox.yOffset + _bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-        }
-        var textMeasure = application.graphicUtil.textMeasure,
-          layoutObj = new CanvasTextLayout(fontFamily, {
-            fontSize: fontSize,
-            fontWeight: fontWeight,
-            fontFamily: fontFamily
-          }, textMeasure),
-          lines = vutils.isArray(text) ? text.map(function (l) {
-            return l.toString();
-          }) : [text.toString()],
-          linesLayout = [],
-          bboxWH = [0, 0];
-        var lineCountLimit = 1 / 0;
-        if (heightLimit > 0 && (lineCountLimit = Math.max(Math.floor(heightLimit / lineHeight), 1)), lineClamp && (lineCountLimit = Math.min(lineCountLimit, lineClamp)), "number" == typeof maxLineWidth && maxLineWidth !== 1 / 0) {
-          if (maxLineWidth > 0) for (var i = 0; i < lines.length; i++) {
-            var str = lines[i];
-            var needCut = !0;
-            if (i === lineCountLimit - 1) {
-              var _clip = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1);
-              linesLayout.push({
-                str: _clip.str,
-                width: _clip.width
-              });
-              break;
-            }
-            var clip = layoutObj.textMeasure.clipText(str, layoutObj.textOptions, maxLineWidth, "break-word" === wordBreak);
-            if ("" !== str && "" === clip.str) {
-              if (ellipsis) {
-                var clipEllipsis = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1);
-                clip.str = null !== (_c = clipEllipsis.str) && void 0 !== _c ? _c : "", clip.width = null !== (_d = clipEllipsis.width) && void 0 !== _d ? _d : 0;
-              } else clip.str = "", clip.width = 0;
-              needCut = !1;
-            }
-            if (linesLayout.push({
-              str: clip.str,
-              width: clip.width
-            }), clip.str.length === str.length) ;else if (needCut) {
-              var newStr = str.substring(clip.str.length);
-              lines.splice(i + 1, 0, newStr);
-            }
-          }
-          var maxWidth = 0;
-          linesLayout.forEach(function (layout) {
-            maxWidth = Math.max(maxWidth, layout.width);
-          }), bboxWH[0] = maxWidth;
-        } else {
-          var width,
-            _text,
-            _lineWidth = 0;
-          for (var _i = 0, len = lines.length; _i < len; _i++) {
-            if (_i === lineCountLimit - 1) {
-              var _clip2 = layoutObj.textMeasure.clipTextWithSuffix(lines[_i], layoutObj.textOptions, maxLineWidth, ellipsis, !1);
-              linesLayout.push({
-                str: _clip2.str,
-                width: _clip2.width
-              }), _lineWidth = Math.max(_lineWidth, _clip2.width);
-              break;
-            }
-            _text = lines[_i], width = layoutObj.textMeasure.measureTextWidth(_text, layoutObj.textOptions, "break-word" === wordBreak), _lineWidth = Math.max(_lineWidth, width), linesLayout.push({
-              str: _text,
-              width: width
-            });
-          }
-          bboxWH[0] = _lineWidth;
-        }
-        bboxWH[1] = linesLayout.length * (lineHeight + buf);
-        var bbox = {
-          xOffset: 0,
-          yOffset: 0,
-          width: bboxWH[0],
-          height: bboxWH[1]
-        };
-        layoutObj.LayoutBBox(bbox, textAlign, textBaseline);
-        var layoutData = layoutObj.layoutWithBBox(bbox, linesLayout, textAlign, textBaseline, lineHeight);
-        return this.cache.layoutData = layoutData, this.clearUpdateShapeTag(), this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-      }
     }, {
       key: "updateSingallineAABBBounds",
       value: function updateSingallineAABBBounds(text) {
@@ -10205,12 +10083,9 @@
           _attribute$wordBreak === void 0 ? textTheme.wordBreak : _attribute$wordBreak;
           var _attribute$ignoreBuf = attribute.ignoreBuf,
           ignoreBuf = _attribute$ignoreBuf === void 0 ? textTheme.ignoreBuf : _attribute$ignoreBuf,
-          _attribute$whiteSpace = attribute.whiteSpace,
-          whiteSpace = _attribute$whiteSpace === void 0 ? textTheme.whiteSpace : _attribute$whiteSpace;
-        if ("normal" === whiteSpace) return this.updateWrapAABBBounds(text);
-        var buf = ignoreBuf ? 0 : Math.max(2, .075 * fontSize),
-          textFontSize = attribute.fontSize || textTheme.fontSize,
-          lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, textFontSize)) && void 0 !== _a ? _a : textFontSize + buf;
+          buf = ignoreBuf ? 0 : Math.max(2, .075 * fontSize),
+          _attribute$lineHeight = attribute.lineHeight,
+          lineHeight = _attribute$lineHeight === void 0 ? null !== (_a = attribute.lineHeight) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf : _attribute$lineHeight;
         if (!this.shouldUpdateShape() && this.cache) {
           width = null !== (_b = this.cache.clipedWidth) && void 0 !== _b ? _b : 0;
           var _dx = textDrawOffsetX(textAlign, width),
@@ -10280,11 +10155,12 @@
           fontFamily = _attribute$fontFamily2 === void 0 ? textTheme.fontFamily : _attribute$fontFamily2,
           _attribute$stroke2 = attribute.stroke,
           stroke = _attribute$stroke2 === void 0 ? textTheme.stroke : _attribute$stroke2,
+          _attribute$lineHeight2 = attribute.lineHeight,
+          lineHeight = _attribute$lineHeight2 === void 0 ? null !== (_a = attribute.lineHeight) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf : _attribute$lineHeight2,
           _attribute$lineWidth2 = attribute.lineWidth,
           lineWidth = _attribute$lineWidth2 === void 0 ? textTheme.lineWidth : _attribute$lineWidth2,
           _attribute$verticalMo = attribute.verticalMode,
-          verticalMode = _attribute$verticalMo === void 0 ? textTheme.verticalMode : _attribute$verticalMo,
-          lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf;
+          verticalMode = _attribute$verticalMo === void 0 ? textTheme.verticalMode : _attribute$verticalMo;
         var _attribute$textAlign2 = attribute.textAlign,
           textAlign = _attribute$textAlign2 === void 0 ? textTheme.textAlign : _attribute$textAlign2,
           _attribute$textBaseli2 = attribute.textBaseline,
@@ -10334,7 +10210,7 @@
     }, {
       key: "updateHorizontalMultilineAABBBounds",
       value: function updateHorizontalMultilineAABBBounds(text) {
-        var _a, _b;
+        var _a;
         var textTheme = getTheme(this).text,
           attribute = this.attribute,
           _attribute$fontFamily3 = attribute.fontFamily,
@@ -10347,6 +10223,8 @@
           fontSize = _attribute$fontSize3 === void 0 ? textTheme.fontSize : _attribute$fontSize3,
           _attribute$fontWeight3 = attribute.fontWeight,
           fontWeight = _attribute$fontWeight3 === void 0 ? textTheme.fontWeight : _attribute$fontWeight3,
+          _attribute$lineHeight3 = attribute.lineHeight,
+          lineHeight = _attribute$lineHeight3 === void 0 ? attribute.lineHeight || attribute.fontSize || textTheme.fontSize : _attribute$lineHeight3,
           _attribute$ellipsis3 = attribute.ellipsis,
           ellipsis = _attribute$ellipsis3 === void 0 ? textTheme.ellipsis : _attribute$ellipsis3,
           maxLineWidth = attribute.maxLineWidth,
@@ -10354,13 +10232,11 @@
           stroke = _attribute$stroke3 === void 0 ? textTheme.stroke : _attribute$stroke3,
           _attribute$lineWidth3 = attribute.lineWidth,
           lineWidth = _attribute$lineWidth3 === void 0 ? textTheme.lineWidth : _attribute$lineWidth3,
-          _attribute$whiteSpace2 = attribute.whiteSpace,
-          whiteSpace = _attribute$whiteSpace2 === void 0 ? textTheme.whiteSpace : _attribute$whiteSpace2,
-          lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : attribute.fontSize || textTheme.fontSize;
-        if ("normal" === whiteSpace) return this.updateWrapAABBBounds(text);
-        if (!this.shouldUpdateShape() && (null === (_b = this.cache) || void 0 === _b ? void 0 : _b.layoutData)) {
-          var _bbox2 = this.cache.layoutData.bbox;
-          return this._AABBBounds.set(_bbox2.xOffset, _bbox2.yOffset, _bbox2.xOffset + _bbox2.width, _bbox2.yOffset + _bbox2.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+          _attribute$wordBreak2 = attribute.wordBreak;
+          _attribute$wordBreak2 === void 0 ? textTheme.wordBreak : _attribute$wordBreak2;
+        if (!this.shouldUpdateShape() && (null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData)) {
+          var _bbox = this.cache.layoutData.bbox;
+          return this._AABBBounds.set(_bbox.xOffset, _bbox.yOffset, _bbox.xOffset + _bbox.width, _bbox.yOffset + _bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
         }
         var textMeasure = application.graphicUtil.textMeasure,
           layoutData = new CanvasTextLayout(fontFamily, {
@@ -10394,11 +10270,12 @@
           fontWeight = _attribute$fontWeight4 === void 0 ? textTheme.fontWeight : _attribute$fontWeight4,
           _attribute$stroke4 = attribute.stroke,
           stroke = _attribute$stroke4 === void 0 ? textTheme.stroke : _attribute$stroke4,
+          _attribute$lineHeight4 = attribute.lineHeight,
+          lineHeight = _attribute$lineHeight4 === void 0 ? null !== (_a = attribute.lineHeight) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf : _attribute$lineHeight4,
           _attribute$lineWidth4 = attribute.lineWidth,
           lineWidth = _attribute$lineWidth4 === void 0 ? textTheme.lineWidth : _attribute$lineWidth4,
           _attribute$verticalMo2 = attribute.verticalMode,
-          verticalMode = _attribute$verticalMo2 === void 0 ? textTheme.verticalMode : _attribute$verticalMo2,
-          lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf;
+          verticalMode = _attribute$verticalMo2 === void 0 ? textTheme.verticalMode : _attribute$verticalMo2;
         var _attribute$textAlign4 = attribute.textAlign,
           textAlign = _attribute$textAlign4 === void 0 ? textTheme.textAlign : _attribute$textAlign4,
           _attribute$textBaseli4 = attribute.textBaseline,
@@ -10531,7 +10408,7 @@
     }, {
       key: "updateMultilineAABBBounds",
       value: function updateMultilineAABBBounds(text) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         var textTheme = getTheme(this).text,
           _this$attribute = this.attribute,
           _this$attribute$fontF = _this$attribute.fontFamily,
@@ -10542,6 +10419,8 @@
           textBaseline = _this$attribute$textB === void 0 ? textTheme.textBaseline : _this$attribute$textB,
           _this$attribute$fontS = _this$attribute.fontSize,
           fontSize = _this$attribute$fontS === void 0 ? textTheme.fontSize : _this$attribute$fontS,
+          _this$attribute$lineH = _this$attribute.lineHeight,
+          lineHeight = _this$attribute$lineH === void 0 ? this.attribute.lineHeight || this.attribute.fontSize || textTheme.fontSize : _this$attribute$lineH,
           _this$attribute$ellip = _this$attribute.ellipsis,
           ellipsis = _this$attribute$ellip === void 0 ? textTheme.ellipsis : _this$attribute$ellip,
           maxLineWidth = _this$attribute.maxLineWidth,
@@ -10558,9 +10437,8 @@
           _this$attribute$heigh = _this$attribute.heightLimit,
           heightLimit = _this$attribute$heigh === void 0 ? 0 : _this$attribute$heigh,
           lineClamp = _this$attribute.lineClamp,
-          lineHeight = null !== (_a = calculateLineHeight(this.attribute.lineHeight, this.attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : this.attribute.fontSize || textTheme.fontSize,
           buf = ignoreBuf ? 0 : 2;
-        if (!this.shouldUpdateShape() && (null === (_b = this.cache) || void 0 === _b ? void 0 : _b.layoutData)) {
+        if (!this.shouldUpdateShape() && (null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData)) {
           var _bbox = this.cache.layoutData.bbox;
           return this._AABBBounds.set(_bbox.xOffset, _bbox.yOffset, _bbox.xOffset + _bbox.width, _bbox.yOffset + _bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
         }
@@ -10592,7 +10470,7 @@
             if ("" !== str && "" === clip.str) {
               if (ellipsis) {
                 var clipEllipsis = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1);
-                clip.str = null !== (_c = clipEllipsis.str) && void 0 !== _c ? _c : "", clip.width = null !== (_d = clipEllipsis.width) && void 0 !== _d ? _d : 0;
+                clip.str = null !== (_b = clipEllipsis.str) && void 0 !== _b ? _b : "", clip.width = null !== (_c = clipEllipsis.width) && void 0 !== _c ? _c : 0;
               } else clip.str = "", clip.width = 0;
               needCut = !1;
             }
@@ -15463,7 +15341,7 @@
           var t = textAlign;
           textAlign = null !== (_a = text.getBaselineMapAlign()[textBaseline]) && void 0 !== _a ? _a : "left", textBaseline = null !== (_b = text.getAlignMapBaseline()[t]) && void 0 !== _b ? _b : "top";
         }
-        var lineHeight = null !== (_c = calculateLineHeight(text.attribute.lineHeight, fontSize)) && void 0 !== _c ? _c : fontSize,
+        var lineHeight = null !== (_c = text.attribute.lineHeight) && void 0 !== _c ? _c : fontSize,
           data = this.valid(text, textAttribute, fillCb, strokeCb);
         if (!data) return;
         var fVisible = data.fVisible,
@@ -20947,7 +20825,7 @@
       return new vutils.TextMeasure(Object.assign({ defaultFontParams: {
               fontFamily: DEFAULT_TEXT_FONT_FAMILY,
               fontSize: DEFAULT_TEXT_FONT_SIZE
-          }, getTextBounds: useNaiveCanvas ? undefined : getTextBounds, specialCharSet: '-/: .,@%\'"~' + vutils.TextMeasure.ALPHABET_CHAR_SET + vutils.TextMeasure.ALPHABET_CHAR_SET.toUpperCase() }, (option !== null && option !== void 0 ? option : {})), Object.assign(Object.assign({}, textSpec), { lineHeight: calculateLineHeight(textSpec === null || textSpec === void 0 ? void 0 : textSpec.lineHeight, textSpec === null || textSpec === void 0 ? void 0 : textSpec.fontSize) }));
+          }, getTextBounds: useNaiveCanvas ? undefined : getTextBounds, specialCharSet: '-/: .,@%\'"~' + vutils.TextMeasure.ALPHABET_CHAR_SET + vutils.TextMeasure.ALPHABET_CHAR_SET.toUpperCase() }, (option !== null && option !== void 0 ? option : {})), textSpec);
   };
   function measureTextSize(text, textSpec) {
       var _a;
@@ -20974,8 +20852,8 @@
           this.name = 'tag';
       }
       render() {
-          var _a;
-          const { text = '', textStyle = {}, shape = {}, panel = {}, space = 4, minWidth, maxWidth, padding = 4, visible, state } = this.attribute;
+          var _a, _b, _c;
+          const { text = '', textStyle = {}, shape = {}, panel = {}, space = 4, minWidth, maxWidth, padding = 4, visible, state, type = 'text' } = this.attribute;
           const parsedPadding = vutils.normalizePadding(padding);
           const group = this.createOrUpdateChild('tag-content', { x: 0, y: 0, zIndex: 1 }, 'group');
           let symbol;
@@ -20997,75 +20875,100 @@
           }
           tagWidth += symbolPlaceWidth;
           textX += symbolPlaceWidth;
-          const textAttrs = Object.assign(Object.assign({ text, visible: vutils.isValid(text) && visible !== false, lineHeight: textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize }, textStyle), { x: textX, y: 0 });
-          if (vutils.isNil(textAttrs.lineHeight)) {
-              textAttrs.lineHeight = textAttrs.fontSize;
-          }
-          const textShape = group.createOrUpdateChild('tag-text', textAttrs, 'text');
-          if (!vutils.isEmpty(state === null || state === void 0 ? void 0 : state.text)) {
-              textShape.states = state.text;
-          }
-          const textBounds = measureTextSize(textAttrs.text, textStyle);
-          const textWidth = textBounds.width;
-          const textHeight = textBounds.height;
-          tagWidth += textWidth;
-          const size = (_a = shape.size) !== null && _a !== void 0 ? _a : 10;
-          const maxSize = vutils.isNumber(size) ? size : Math.max(size[0], size[1]);
-          tagHeight += Math.max(textHeight, (shape === null || shape === void 0 ? void 0 : shape.visible) ? maxSize : 0);
-          const { textAlign, textBaseline } = textStyle;
-          if (vutils.isValid(minWidth) || vutils.isValid(maxWidth)) {
-              if (vutils.isValid(minWidth) && tagWidth < minWidth) {
-                  tagWidth = minWidth;
-              }
-              if (vutils.isValid(maxWidth) && tagWidth > maxWidth) {
-                  tagWidth = maxWidth;
-                  textShape.setAttribute('maxLineWidth', maxWidth - parsedPadding[1] - parsedPadding[2]);
-              }
-          }
-          let x = 0;
-          let y = 0;
-          if (textAlign === 'center') {
-              x -= tagWidth / 2;
-              if (symbol) {
-                  symbol.setAttribute('x', (symbol.attribute.x || 0) - textWidth / 2);
+          let textShape;
+          if (type === 'rich') {
+              const richTextAttrs = Object.assign(Object.assign({ textConfig: text, visible: vutils.isValid(text) && visible !== false }, textStyle), { x: textX, y: 0, width: (_a = textStyle.width) !== null && _a !== void 0 ? _a : 0, height: (_b = textStyle.height) !== null && _b !== void 0 ? _b : 0 });
+              textShape = group.createOrUpdateChild('tag-text', richTextAttrs, 'richtext');
+              const { visible: bgVisible } = panel, backgroundStyle = __rest(panel, ["visible"]);
+              if (visible && vutils.isBoolean(bgVisible)) {
+                  const bgRect = this.createOrUpdateChild('tag-panel', Object.assign(Object.assign({}, backgroundStyle), { visible: bgVisible && !!text, x: textShape.AABBBounds.x1, y: textShape.AABBBounds.y1, width: textShape.AABBBounds.width(), height: textShape.AABBBounds.height() }), 'rect');
+                  if (!vutils.isEmpty(state === null || state === void 0 ? void 0 : state.panel)) {
+                      bgRect.states = state.panel;
+                  }
               }
-              group.setAttribute('x', -symbolPlaceWidth / 2);
           }
-          else if (textAlign === 'right' || textAlign === 'end') {
-              x -= tagWidth;
-              if (symbol) {
-                  symbol.setAttribute('x', (symbol.attribute.x || 0) - textWidth);
+          else if (type === 'html') {
+              const richTextAttrs = Object.assign(Object.assign({ textConfig: [], visible: vutils.isValid(text) && visible !== false, html: Object.assign({ dom: text, container: '', width: 30, height: 30, style: {} }, textStyle) }, textStyle), { x: textX, y: 0 });
+              textShape = group.createOrUpdateChild('tag-text', richTextAttrs, 'richtext');
+              const { visible: bgVisible } = panel, backgroundStyle = __rest(panel, ["visible"]);
+              if (visible && vutils.isBoolean(bgVisible)) {
+                  const bgRect = this.createOrUpdateChild('tag-panel', Object.assign(Object.assign({}, backgroundStyle), { visible: bgVisible && !!text, x: textShape.AABBBounds.x1, y: textShape.AABBBounds.y1, width: textShape.AABBBounds.width(), height: textShape.AABBBounds.height() }), 'rect');
+                  if (!vutils.isEmpty(state === null || state === void 0 ? void 0 : state.panel)) {
+                      bgRect.states = state.panel;
+                  }
               }
-              group.setAttribute('x', -parsedPadding[1] - symbolPlaceWidth);
           }
-          else if (textAlign === 'left' || textAlign === 'start') {
-              group.setAttribute('x', parsedPadding[3]);
-          }
-          if (textBaseline === 'middle') {
-              y -= tagHeight / 2;
-              if (symbol) {
-                  symbol.setAttribute('y', 0);
+          else {
+              const textAttrs = Object.assign(Object.assign({ text: text, visible: vutils.isValid(text) && visible !== false, lineHeight: textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize }, textStyle), { x: textX, y: 0 });
+              if (vutils.isNil(textAttrs.lineHeight)) {
+                  textAttrs.lineHeight = textStyle.fontSize;
+              }
+              textShape = group.createOrUpdateChild('tag-text', textAttrs, 'text');
+              if (!vutils.isEmpty(state === null || state === void 0 ? void 0 : state.text)) {
+                  textShape.states = state.text;
+              }
+              const textBounds = measureTextSize(textAttrs.text, textStyle);
+              const textWidth = textBounds.width;
+              const textHeight = textBounds.height;
+              tagWidth += textWidth;
+              const size = (_c = shape.size) !== null && _c !== void 0 ? _c : 10;
+              const maxSize = vutils.isNumber(size) ? size : Math.max(size[0], size[1]);
+              tagHeight += Math.max(textHeight, (shape === null || shape === void 0 ? void 0 : shape.visible) ? maxSize : 0);
+              const { textAlign, textBaseline } = textStyle;
+              if (vutils.isValid(minWidth) || vutils.isValid(maxWidth)) {
+                  if (vutils.isValid(minWidth) && tagWidth < minWidth) {
+                      tagWidth = minWidth;
+                  }
+                  if (vutils.isValid(maxWidth) && tagWidth > maxWidth) {
+                      tagWidth = maxWidth;
+                      textShape.setAttribute('maxLineWidth', maxWidth - parsedPadding[1] - parsedPadding[2]);
+                  }
               }
-          }
-          else if (textBaseline === 'bottom') {
-              y -= tagHeight;
-              if (symbol) {
-                  symbol.setAttribute('y', -textHeight / 2);
+              let x = 0;
+              let y = 0;
+              if (textAlign === 'center') {
+                  x -= tagWidth / 2;
+                  if (symbol) {
+                      symbol.setAttribute('x', (symbol.attribute.x || 0) - textWidth / 2);
+                  }
+                  group.setAttribute('x', -symbolPlaceWidth / 2);
               }
-              group.setAttribute('y', -parsedPadding[2]);
-          }
-          else if (textBaseline === 'top') {
-              group.setAttribute('y', parsedPadding[0]);
-              if (symbol) {
-                  symbol.setAttribute('y', textHeight / 2);
+              else if (textAlign === 'right' || textAlign === 'end') {
+                  x -= tagWidth;
+                  if (symbol) {
+                      symbol.setAttribute('x', (symbol.attribute.x || 0) - textWidth);
+                  }
+                  group.setAttribute('x', -parsedPadding[1] - symbolPlaceWidth);
               }
-          }
-          const { visible: bgVisible } = panel, backgroundStyle = __rest(panel, ["visible"]);
-          if (visible && vutils.isBoolean(bgVisible)) {
-              const bgRect = this.createOrUpdateChild('tag-panel', Object.assign(Object.assign({}, backgroundStyle), { visible: bgVisible && !!text, x,
-                  y, width: tagWidth, height: tagHeight }), 'rect');
-              if (!vutils.isEmpty(state === null || state === void 0 ? void 0 : state.panel)) {
-                  bgRect.states = state.panel;
+              else if (textAlign === 'left' || textAlign === 'start') {
+                  group.setAttribute('x', parsedPadding[3]);
+              }
+              if (textBaseline === 'middle') {
+                  y -= tagHeight / 2;
+                  if (symbol) {
+                      symbol.setAttribute('y', 0);
+                  }
+              }
+              else if (textBaseline === 'bottom') {
+                  y -= 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);
+                  }
+              }
+              const { visible: bgVisible } = panel, backgroundStyle = __rest(panel, ["visible"]);
+              if (visible && vutils.isBoolean(bgVisible)) {
+                  const bgRect = this.createOrUpdateChild('tag-panel', Object.assign(Object.assign({}, backgroundStyle), { visible: bgVisible && !!text, x,
+                      y, width: tagWidth, height: tagHeight }), 'rect');
+                  if (!vutils.isEmpty(state === null || state === void 0 ? void 0 : state.panel)) {
+                      bgRect.states = state.panel;
+                  }
               }
           }
       }
@@ -22277,6 +22180,24 @@
           target.states = state;
       }
       _createLabelText(attributes) {
+          var _a, _b;
+          if (attributes.type === 'rich') {
+              attributes.textConfig = attributes.text;
+              attributes.width = (_a = attributes.width) !== null && _a !== void 0 ? _a : 0;
+              attributes.height = (_b = attributes.height) !== null && _b !== void 0 ? _b : 0;
+              const text = createRichText(attributes);
+              this._bindEvent(text);
+              this._setStatesOfText(text);
+              return text;
+          }
+          else if (attributes.type === 'html') {
+              attributes.textConfig = [];
+              attributes.html = Object.assign({ dom: attributes.text, container: '', width: 30, height: 30, style: {} }, attributes);
+              const text = createRichText(attributes);
+              this._bindEvent(text);
+              this._setStatesOfText(text);
+              return text;
+          }
           const text = createText(attributes);
           this._bindEvent(text);
           this._setStatesOfText(text);
@@ -22503,7 +22424,7 @@
           const prevTextMap = this._graphicToText || new Map();
           const texts = [];
           labels.forEach((text, index) => {
-              var _a, _b, _c, _d, _e, _f, _g;
+              var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
               const labelLine = this._labelLine(text);
               const relatedGraphic = this.getRelatedGrphic(text.attribute);
               const textId = text.attribute.id;
@@ -22546,11 +22467,11 @@
                       }), duration, easing);
                   }
                   if (animationConfig.increaseEffect !== false &&
-                      prevText.attribute.text !== text.attribute.text &&
-                      vutils.isValidNumber(Number(prevText.attribute.text) * Number(text.attribute.text))) {
+                      ((_h = prevText.attribute) === null || _h === void 0 ? void 0 : _h.text) !== ((_j = text.attribute) === null || _j === void 0 ? void 0 : _j.text) &&
+                      vutils.isValidNumber(Number((_k = prevText.attribute) === null || _k === void 0 ? void 0 : _k.text) * Number((_l = text.attribute) === null || _l === void 0 ? void 0 : _l.text))) {
                       prevText
                           .animate()
-                          .play(new IncreaseCount({ text: prevText.attribute.text }, { text: text.attribute.text }, duration, easing));
+                          .play(new IncreaseCount({ text: (_m = prevText.attribute) === null || _m === void 0 ? void 0 : _m.text }, { text: (_o = text.attribute) === null || _o === void 0 ? void 0 : _o.text }, duration, easing));
                   }
               }
           });
@@ -24222,12 +24143,26 @@
           let textAlign = 'center';
           let textBaseline = 'middle';
           data.forEach((item, index) => {
-              var _a, _b;
+              var _a, _b, _c, _d;
               const labelStyle = this._getLabelAttribute(item, index, data, layer);
-              const text = createText(labelStyle);
+              let text;
+              if ((labelStyle === null || labelStyle === void 0 ? void 0 : labelStyle.type) === 'rich') {
+                  labelStyle.textConfig = labelStyle.text;
+                  labelStyle.width = (_a = labelStyle.width) !== null && _a !== void 0 ? _a : 0;
+                  labelStyle.height = (_b = labelStyle.height) !== null && _b !== void 0 ? _b : 0;
+                  text = createRichText(labelStyle);
+              }
+              else if ((labelStyle === null || labelStyle === void 0 ? void 0 : labelStyle.type) === 'html') {
+                  labelStyle.textConfig = [];
+                  labelStyle.html = Object.assign({ dom: labelStyle.text, container: '', width: 30, height: 30, style: {} }, labelStyle);
+                  text = createRichText(labelStyle);
+              }
+              else {
+                  text = createText(labelStyle);
+              }
               text.name = exports.AXIS_ELEMENT_NAME.label;
               text.id = this._getNodeId(`layer${layer}-label-${item.id}`);
-              if (vutils.isEmpty((_a = this.attribute.label) === null || _a === void 0 ? void 0 : _a.state)) {
+              if (vutils.isEmpty((_c = this.attribute.label) === null || _c === void 0 ? void 0 : _c.state)) {
                   text.states = DEFAULT_STATES$2;
               }
               else {
@@ -24240,7 +24175,7 @@
                   text.states = labelState;
               }
               labelGroup.add(text);
-              const angle = (_b = labelStyle.angle) !== null && _b !== void 0 ? _b : 0;
+              const angle = (_d = labelStyle.angle) !== null && _d !== void 0 ? _d : 0;
               maxTextWidth = Math.max(maxTextWidth, text.AABBBounds.width());
               maxTextHeight = Math.max(maxTextHeight, text.AABBBounds.height());
               if (angle) {
@@ -24389,7 +24324,7 @@
       }
       _getLabelAttribute(tickDatum, index, tickData, layer) {
           var _a, _b, _c, _d, _e, _f;
-          const _g = this.attribute.label, { space = 4, inside = false, formatMethod } = _g, tagAttributes = __rest(_g, ["space", "inside", "formatMethod"]);
+          const _g = this.attribute.label, { space = 4, inside = false, formatMethod, type = 'text', text } = _g, tagAttributes = __rest(_g, ["space", "inside", "formatMethod", "type", "text"]);
           let offset = space;
           let tickLength = 0;
           if (((_a = this.attribute.tick) === null || _a === void 0 ? void 0 : _a.visible) && ((_b = this.attribute.tick) === null || _b === void 0 ? void 0 : _b.inside) === inside) {
@@ -24410,7 +24345,9 @@
           }
           const point = this.getVerticalCoord(tickDatum.point, offset, inside);
           const vector = this.getVerticalVector(offset, inside, point);
-          const text = formatMethod ? formatMethod(`${tickDatum.label}`, tickDatum, index, tickData, layer) : tickDatum.label;
+          const textContent = formatMethod
+              ? formatMethod(`${tickDatum.label}`, tickDatum, index, tickData, layer)
+              : tickDatum.label;
           let { style: textStyle } = tagAttributes;
           textStyle = vutils.isFunction(textStyle)
               ? vutils.merge({}, DEFAULT_AXIS_THEME.label.style, textStyle(tickDatum, index, tickData, layer))
@@ -24425,7 +24362,7 @@
                   layer
               });
           }
-          return Object.assign(Object.assign(Object.assign({}, this.getLabelPosition(point, vector, text, textStyle)), { text, lineHeight: textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize }), textStyle);
+          return Object.assign(Object.assign(Object.assign({}, this.getLabelPosition(point, vector, textContent, textStyle)), { text: text !== null && text !== void 0 ? text : textContent, lineHeight: textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize, type }), textStyle);
       }
       getLabelPosition(point, vector, text, style) {
           return point;
@@ -25163,7 +25100,7 @@
           let titleSpacing = 0;
           const axisLineWidth = (line === null || line === void 0 ? void 0 : line.visible) ? (_b = line.style.lineWidth) !== null && _b !== void 0 ? _b : 1 : 0;
           const tickLength = (tick === null || tick === void 0 ? void 0 : tick.visible) ? (_c = tick.length) !== null && _c !== void 0 ? _c : 4 : 0;
-          if (title === null || title === void 0 ? void 0 : title.visible) {
+          if ((title === null || title === void 0 ? void 0 : title.visible) && typeof title.text === 'string') {
               titleHeight = measureTextSize(title.text, title.textStyle).height;
               const padding = vutils.normalizePadding(title.padding);
               titleSpacing = title.space + padding[0] + padding[2];
@@ -29371,19 +29308,27 @@
           this.name = 'title';
       }
       render() {
-          var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37;
-          const { text, textStyle, subtext, subtextStyle, width, height, minWidth, maxWidth, minHeight, maxHeight, align, verticalAlign, padding = 0 } = this.attribute;
+          var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67, _68, _69;
+          const { textType, text, subtextType, textStyle, subtext, subtextStyle, width, height, minWidth, maxWidth, minHeight, maxHeight, align, verticalAlign, padding = 0 } = this.attribute;
           const parsedPadding = vutils.normalizePadding(padding);
           const group = this.createOrUpdateChild('title-container', { x: parsedPadding[3], y: parsedPadding[0], zIndex: 1 }, 'group');
           if (((_a = this.attribute) === null || _a === void 0 ? void 0 : _a.visible) !== false && (textStyle === null || textStyle === void 0 ? void 0 : textStyle.visible) !== false) {
-              if (textStyle && vutils.isValid(textStyle === null || textStyle === void 0 ? void 0 : textStyle.character)) {
+              if (textType === 'rich') {
+                  const attr = Object.assign({ x: (_b = textStyle.x) !== null && _b !== void 0 ? _b : 0, y: (_c = textStyle.y) !== null && _c !== void 0 ? _c : 0, width: (_e = (_d = textStyle.width) !== null && _d !== void 0 ? _d : width) !== null && _e !== void 0 ? _e : 0, height: (_g = (_f = textStyle.height) !== null && _f !== void 0 ? _f : height) !== null && _g !== void 0 ? _g : 0, ellipsis: (_h = textStyle.ellipsis) !== null && _h !== void 0 ? _h : true, wordBreak: (_j = textStyle.wordBreak) !== null && _j !== void 0 ? _j : 'break-word', maxHeight: textStyle.maxHeight, maxWidth: textStyle.maxWidth, textConfig: text }, textStyle);
+                  this._mainTitle = group.createOrUpdateChild('mainTitle', attr, 'richtext');
+              }
+              else if (textType === 'html') {
+                  const attr = Object.assign({ html: Object.assign({ dom: text, container: '', width: 30, height: 30, style: '' }, textStyle), x: (_k = textStyle.x) !== null && _k !== void 0 ? _k : 0, y: (_l = textStyle.y) !== null && _l !== void 0 ? _l : 0, width: (_o = (_m = textStyle.width) !== null && _m !== void 0 ? _m : width) !== null && _o !== void 0 ? _o : 0, height: (_q = (_p = textStyle.height) !== null && _p !== void 0 ? _p : height) !== null && _q !== void 0 ? _q : 0, ellipsis: (_r = textStyle.ellipsis) !== null && _r !== void 0 ? _r : true, wordBreak: (_s = textStyle.wordBreak) !== null && _s !== void 0 ? _s : 'break-word', maxHeight: textStyle.maxHeight, maxWidth: textStyle.maxWidth, textConfig: [] }, textStyle);
+                  this._mainTitle = group.createOrUpdateChild('mainTitle', attr, 'richtext');
+              }
+              else if (textStyle && vutils.isValid(textStyle === null || textStyle === void 0 ? void 0 : textStyle.character)) {
                   const attr = {
-                      x: (_b = textStyle.x) !== null && _b !== void 0 ? _b : 0,
-                      y: (_c = textStyle.y) !== null && _c !== void 0 ? _c : 0,
-                      width: (_e = (_d = textStyle.width) !== null && _d !== void 0 ? _d : width) !== null && _e !== void 0 ? _e : 0,
-                      height: (_g = (_f = textStyle.height) !== null && _f !== void 0 ? _f : height) !== null && _g !== void 0 ? _g : 0,
-                      ellipsis: (_h = textStyle.ellipsis) !== null && _h !== void 0 ? _h : true,
-                      wordBreak: (_j = textStyle.wordBreak) !== null && _j !== void 0 ? _j : 'break-word',
+                      x: (_t = textStyle.x) !== null && _t !== void 0 ? _t : 0,
+                      y: (_u = textStyle.y) !== null && _u !== void 0 ? _u : 0,
+                      width: (_w = (_v = textStyle.width) !== null && _v !== void 0 ? _v : width) !== null && _w !== void 0 ? _w : 0,
+                      height: (_y = (_x = textStyle.height) !== null && _x !== void 0 ? _x : height) !== null && _y !== void 0 ? _y : 0,
+                      ellipsis: (_z = textStyle.ellipsis) !== null && _z !== void 0 ? _z : true,
+                      wordBreak: (_0 = textStyle.wordBreak) !== null && _0 !== void 0 ? _0 : 'break-word',
                       maxHeight: textStyle.maxHeight,
                       maxWidth: textStyle.maxWidth,
                       textConfig: textStyle.character
@@ -29391,20 +29336,28 @@
                   this._mainTitle = group.createOrUpdateChild('mainTitle', attr, 'richtext');
               }
               else if (vutils.isValid(text)) {
-                  this._mainTitle = group.createOrUpdateChild('mainTitle', Object.assign(Object.assign({ text: [text] }, textStyle), { maxLineWidth: (_k = textStyle === null || textStyle === void 0 ? void 0 : textStyle.maxLineWidth) !== null && _k !== void 0 ? _k : width, heightLimit: textStyle === null || textStyle === void 0 ? void 0 : textStyle.heightLimit, lineClamp: textStyle === null || textStyle === void 0 ? void 0 : textStyle.lineClamp, ellipsis: (_l = textStyle === null || textStyle === void 0 ? void 0 : textStyle.ellipsis) !== null && _l !== void 0 ? _l : true, x: 0, y: 0 }), 'wrapText');
+                  this._mainTitle = group.createOrUpdateChild('mainTitle', Object.assign(Object.assign({ text: [text] }, textStyle), { maxLineWidth: (_1 = textStyle === null || textStyle === void 0 ? void 0 : textStyle.maxLineWidth) !== null && _1 !== void 0 ? _1 : width, heightLimit: textStyle === null || textStyle === void 0 ? void 0 : textStyle.heightLimit, lineClamp: textStyle === null || textStyle === void 0 ? void 0 : textStyle.lineClamp, ellipsis: (_2 = textStyle === null || textStyle === void 0 ? void 0 : textStyle.ellipsis) !== null && _2 !== void 0 ? _2 : true, x: 0, y: 0 }), 'wrapText');
               }
           }
-          const maintextHeight = this._mainTitle ? (_m = this._mainTitle) === null || _m === void 0 ? void 0 : _m.AABBBounds.height() : 0;
-          const maintextWidth = this._mainTitle ? (_o = this._mainTitle) === null || _o === void 0 ? void 0 : _o.AABBBounds.width() : 0;
-          if (((_p = this.attribute) === null || _p === void 0 ? void 0 : _p.visible) !== false && (subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.visible) !== false) {
-              if (subtextStyle && vutils.isValid(subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.character)) {
+          const maintextHeight = this._mainTitle ? (_3 = this._mainTitle) === null || _3 === void 0 ? void 0 : _3.AABBBounds.height() : 0;
+          const maintextWidth = this._mainTitle ? (_4 = this._mainTitle) === null || _4 === void 0 ? void 0 : _4.AABBBounds.width() : 0;
+          if (((_5 = this.attribute) === null || _5 === void 0 ? void 0 : _5.visible) !== false && (subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.visible) !== false) {
+              if (subtextType === 'rich') {
+                  const attr = Object.assign({ x: (_6 = subtextStyle.x) !== null && _6 !== void 0 ? _6 : 0, y: (_7 = subtextStyle.y) !== null && _7 !== void 0 ? _7 : 0, width: (_9 = (_8 = subtextStyle.width) !== null && _8 !== void 0 ? _8 : width) !== null && _9 !== void 0 ? _9 : 0, height: (_11 = (_10 = subtextStyle.height) !== null && _10 !== void 0 ? _10 : height) !== null && _11 !== void 0 ? _11 : 0, ellipsis: (_12 = subtextStyle.ellipsis) !== null && _12 !== void 0 ? _12 : true, wordBreak: (_13 = subtextStyle.wordBreak) !== null && _13 !== void 0 ? _13 : 'break-word', maxHeight: subtextStyle.maxHeight, maxWidth: subtextStyle.maxWidth, textConfig: subtext }, subtextStyle);
+                  this._subTitle = group.createOrUpdateChild('subTitle', attr, 'richtext');
+              }
+              else if (textType === 'html') {
+                  const attr = Object.assign({ html: Object.assign({ dom: subtext, container: '', width: 30, height: 30, style: {} }, subtextStyle), x: (_14 = subtextStyle.x) !== null && _14 !== void 0 ? _14 : 0, y: (_15 = subtextStyle.y) !== null && _15 !== void 0 ? _15 : 0, width: (_17 = (_16 = subtextStyle.width) !== null && _16 !== void 0 ? _16 : width) !== null && _17 !== void 0 ? _17 : 0, height: (_19 = (_18 = subtextStyle.height) !== null && _18 !== void 0 ? _18 : height) !== null && _19 !== void 0 ? _19 : 0, ellipsis: (_20 = subtextStyle.ellipsis) !== null && _20 !== void 0 ? _20 : true, wordBreak: (_21 = subtextStyle.wordBreak) !== null && _21 !== void 0 ? _21 : 'break-word', maxHeight: subtextStyle.maxHeight, maxWidth: subtextStyle.maxWidth, textConfig: [] }, subtextStyle);
+                  this._subTitle = group.createOrUpdateChild('subTitle', attr, 'richtext');
+              }
+              else if (subtextStyle && vutils.isValid(subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.character)) {
                   const attr = {
-                      x: (_q = subtextStyle.x) !== null && _q !== void 0 ? _q : 0,
-                      y: (_r = subtextStyle.y) !== null && _r !== void 0 ? _r : maintextHeight,
-                      width: (_t = (_s = subtextStyle.width) !== null && _s !== void 0 ? _s : width) !== null && _t !== void 0 ? _t : 0,
-                      height: (_v = (_u = subtextStyle.height) !== null && _u !== void 0 ? _u : height) !== null && _v !== void 0 ? _v : 0,
-                      ellipsis: (_w = subtextStyle.ellipsis) !== null && _w !== void 0 ? _w : true,
-                      wordBreak: (_x = subtextStyle.wordBreak) !== null && _x !== void 0 ? _x : 'break-word',
+                      x: (_22 = subtextStyle.x) !== null && _22 !== void 0 ? _22 : 0,
+                      y: (_23 = subtextStyle.y) !== null && _23 !== void 0 ? _23 : maintextHeight,
+                      width: (_25 = (_24 = subtextStyle.width) !== null && _24 !== void 0 ? _24 : width) !== null && _25 !== void 0 ? _25 : 0,
+                      height: (_27 = (_26 = subtextStyle.height) !== null && _26 !== void 0 ? _26 : height) !== null && _27 !== void 0 ? _27 : 0,
+                      ellipsis: (_28 = subtextStyle.ellipsis) !== null && _28 !== void 0 ? _28 : true,
+                      wordBreak: (_29 = subtextStyle.wordBreak) !== null && _29 !== void 0 ? _29 : 'break-word',
                       maxHeight: subtextStyle.maxHeight,
                       maxWidth: subtextStyle.maxWidth,
                       textConfig: subtextStyle.character
@@ -29412,17 +29365,17 @@
                   this._subTitle = group.createOrUpdateChild('subTitle', attr, 'richtext');
               }
               else if (vutils.isValid(subtext)) {
-                  this._subTitle = group.createOrUpdateChild('subTitle', Object.assign(Object.assign({ text: [subtext] }, subtextStyle), { maxLineWidth: (_y = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.maxLineWidth) !== null && _y !== void 0 ? _y : width, heightLimit: subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.heightLimit, lineClamp: subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.lineClamp, ellipsis: (_z = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.ellipsis) !== null && _z !== void 0 ? _z : true, x: 0, y: maintextHeight }), 'wrapText');
+                  this._subTitle = group.createOrUpdateChild('subTitle', Object.assign(Object.assign({ text: [subtext] }, subtextStyle), { maxLineWidth: (_30 = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.maxLineWidth) !== null && _30 !== void 0 ? _30 : width, heightLimit: subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.heightLimit, lineClamp: subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.lineClamp, ellipsis: (_31 = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.ellipsis) !== null && _31 !== void 0 ? _31 : true, x: 0, y: maintextHeight }), 'wrapText');
               }
           }
-          const subtextHeight = this._subTitle ? (_0 = this._subTitle) === null || _0 === void 0 ? void 0 : _0.AABBBounds.height() : 0;
-          const subtextWidth = this._subTitle ? (_1 = this._subTitle) === null || _1 === void 0 ? void 0 : _1.AABBBounds.width() : 0;
+          const subtextHeight = this._subTitle ? (_32 = this._subTitle) === null || _32 === void 0 ? void 0 : _32.AABBBounds.height() : 0;
+          const subtextWidth = this._subTitle ? (_33 = this._subTitle) === null || _33 === void 0 ? void 0 : _33.AABBBounds.width() : 0;
           let titleWidth = Math.max(maintextWidth, subtextWidth);
-          let titleHeight = maintextHeight + ((_2 = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.height) !== null && _2 !== void 0 ? _2 : subtextHeight);
+          let titleHeight = maintextHeight + ((_34 = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.height) !== null && _34 !== void 0 ? _34 : subtextHeight);
           if (vutils.isValid(width)) {
               titleWidth = width;
-              (_3 = this._mainTitle) === null || _3 === void 0 ? void 0 : _3.setAttribute('maxLineWidth', width);
-              (_4 = this._subTitle) === null || _4 === void 0 ? void 0 : _4.setAttribute('maxLineWidth', width);
+              (_35 = this._mainTitle) === null || _35 === void 0 ? void 0 : _35.setAttribute('maxLineWidth', width);
+              (_36 = this._subTitle) === null || _36 === void 0 ? void 0 : _36.setAttribute('maxLineWidth', width);
           }
           if (vutils.isValid(height)) {
               titleHeight = height;
@@ -29431,10 +29384,10 @@
               titleWidth = minWidth;
           }
           if (vutils.isValid(maxWidth)) {
-              (_5 = this._mainTitle) === null || _5 === void 0 ? void 0 : _5.setAttribute('maxLineWidth', maxWidth);
-              (_6 = this._subTitle) === null || _6 === void 0 ? void 0 : _6.setAttribute('maxLineWidth', maxWidth);
-              (_7 = this._mainTitle) === null || _7 === void 0 ? void 0 : _7.setAttribute('maxWidth', maxWidth);
-              (_8 = this._subTitle) === null || _8 === void 0 ? void 0 : _8.setAttribute('maxWidth', maxWidth);
+              (_37 = this._mainTitle) === null || _37 === void 0 ? void 0 : _37.setAttribute('maxLineWidth', maxWidth);
+              (_38 = this._subTitle) === null || _38 === void 0 ? void 0 : _38.setAttribute('maxLineWidth', maxWidth);
+              (_39 = this._mainTitle) === null || _39 === void 0 ? void 0 : _39.setAttribute('maxWidth', maxWidth);
+              (_40 = this._subTitle) === null || _40 === void 0 ? void 0 : _40.setAttribute('maxWidth', maxWidth);
               if (titleWidth > maxWidth) {
                   titleWidth = maxWidth;
               }
@@ -29443,8 +29396,8 @@
               titleHeight = minHeight;
           }
           if (vutils.isValid(maxHeight)) {
-              (_9 = this._mainTitle) === null || _9 === void 0 ? void 0 : _9.setAttribute('maxHeight', maxHeight);
-              (_10 = this._subTitle) === null || _10 === void 0 ? void 0 : _10.setAttribute('maxHeight', maxHeight - maintextHeight);
+              (_41 = this._mainTitle) === null || _41 === void 0 ? void 0 : _41.setAttribute('maxHeight', maxHeight);
+              (_42 = this._subTitle) === null || _42 === void 0 ? void 0 : _42.setAttribute('maxHeight', maxHeight - maintextHeight);
               if (titleHeight > maxHeight) {
                   titleHeight = maxHeight;
               }
@@ -29454,67 +29407,67 @@
           group.attribute.boundsPadding = parsedPadding;
           if (vutils.isValid(align) || vutils.isValid(textStyle === null || textStyle === void 0 ? void 0 : textStyle.align)) {
               const mainTitleAlign = (textStyle === null || textStyle === void 0 ? void 0 : textStyle.align) ? textStyle === null || textStyle === void 0 ? void 0 : textStyle.align : align;
-              const mainTitleWidth = (_11 = textStyle === null || textStyle === void 0 ? void 0 : textStyle.width) !== null && _11 !== void 0 ? _11 : maintextWidth;
+              const mainTitleWidth = (_43 = textStyle === null || textStyle === void 0 ? void 0 : textStyle.width) !== null && _43 !== void 0 ? _43 : maintextWidth;
               if (mainTitleAlign === 'left') {
-                  (_12 = this._mainTitle) === null || _12 === void 0 ? void 0 : _12.setAttribute('x', 0);
-                  (_13 = this._mainTitle) === null || _13 === void 0 ? void 0 : _13.setAttribute('textAlign', 'left');
+                  (_44 = this._mainTitle) === null || _44 === void 0 ? void 0 : _44.setAttribute('x', 0);
+                  (_45 = this._mainTitle) === null || _45 === void 0 ? void 0 : _45.setAttribute('textAlign', 'left');
               }
               else if (mainTitleAlign === 'center') {
-                  (_14 = this._mainTitle) === null || _14 === void 0 ? void 0 : _14.setAttribute('x', mainTitleWidth / 2);
-                  (_15 = this._mainTitle) === null || _15 === void 0 ? void 0 : _15.setAttribute('textAlign', 'center');
+                  (_46 = this._mainTitle) === null || _46 === void 0 ? void 0 : _46.setAttribute('x', mainTitleWidth / 2);
+                  (_47 = this._mainTitle) === null || _47 === void 0 ? void 0 : _47.setAttribute('textAlign', 'center');
               }
               else if (mainTitleAlign === 'right') {
-                  (_16 = this._mainTitle) === null || _16 === void 0 ? void 0 : _16.setAttribute('x', mainTitleWidth);
-                  (_17 = this._mainTitle) === null || _17 === void 0 ? void 0 : _17.setAttribute('textAlign', 'right');
+                  (_48 = this._mainTitle) === null || _48 === void 0 ? void 0 : _48.setAttribute('x', mainTitleWidth);
+                  (_49 = this._mainTitle) === null || _49 === void 0 ? void 0 : _49.setAttribute('textAlign', 'right');
               }
           }
           if (vutils.isValid(verticalAlign) || vutils.isValid(textStyle === null || textStyle === void 0 ? void 0 : textStyle.verticalAlign)) {
               const mainTitleVerticalAlign = (textStyle === null || textStyle === void 0 ? void 0 : textStyle.verticalAlign) ? textStyle === null || textStyle === void 0 ? void 0 : textStyle.verticalAlign : verticalAlign;
               const mainTitleHeight = (textStyle === null || textStyle === void 0 ? void 0 : textStyle.height) ? textStyle === null || textStyle === void 0 ? void 0 : textStyle.height : titleHeight;
               if (mainTitleVerticalAlign === 'top') {
-                  (_18 = this._mainTitle) === null || _18 === void 0 ? void 0 : _18.setAttribute('y', 0);
-                  (_19 = this._mainTitle) === null || _19 === void 0 ? void 0 : _19.setAttribute('textBaseline', 'top');
+                  (_50 = this._mainTitle) === null || _50 === void 0 ? void 0 : _50.setAttribute('y', 0);
+                  (_51 = this._mainTitle) === null || _51 === void 0 ? void 0 : _51.setAttribute('textBaseline', 'top');
               }
               else if (mainTitleVerticalAlign === 'middle') {
-                  (_20 = this._mainTitle) === null || _20 === void 0 ? void 0 : _20.setAttribute('y', mainTitleHeight / 2);
-                  (_21 = this._mainTitle) === null || _21 === void 0 ? void 0 : _21.setAttribute('textBaseline', 'middle');
+                  (_52 = this._mainTitle) === null || _52 === void 0 ? void 0 : _52.setAttribute('y', mainTitleHeight / 2);
+                  (_53 = this._mainTitle) === null || _53 === void 0 ? void 0 : _53.setAttribute('textBaseline', 'middle');
               }
               else if (mainTitleVerticalAlign === 'bottom') {
-                  (_22 = this._mainTitle) === null || _22 === void 0 ? void 0 : _22.setAttribute('y', mainTitleHeight);
-                  (_23 = this._mainTitle) === null || _23 === void 0 ? void 0 : _23.setAttribute('textBaseline', 'bottom');
+                  (_54 = this._mainTitle) === null || _54 === void 0 ? void 0 : _54.setAttribute('y', mainTitleHeight);
+                  (_55 = this._mainTitle) === null || _55 === void 0 ? void 0 : _55.setAttribute('textBaseline', 'bottom');
               }
           }
           if (vutils.isValid(align) || vutils.isValid(subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.align)) {
               const subTitleAlign = (subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.align) ? subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.align : align;
-              const subTitleWidth = (_24 = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.width) !== null && _24 !== void 0 ? _24 : subtextWidth;
+              const subTitleWidth = (_56 = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.width) !== null && _56 !== void 0 ? _56 : subtextWidth;
               if (subTitleAlign === 'left') {
-                  (_25 = this._subTitle) === null || _25 === void 0 ? void 0 : _25.setAttribute('x', 0);
-                  (_26 = this._subTitle) === null || _26 === void 0 ? void 0 : _26.setAttribute('textAlign', 'left');
+                  (_57 = this._subTitle) === null || _57 === void 0 ? void 0 : _57.setAttribute('x', 0);
+                  (_58 = this._subTitle) === null || _58 === void 0 ? void 0 : _58.setAttribute('textAlign', 'left');
               }
               else if (subTitleAlign === 'center') {
-                  (_27 = this._subTitle) === null || _27 === void 0 ? void 0 : _27.setAttribute('x', subTitleWidth / 2);
-                  (_28 = this._subTitle) === null || _28 === void 0 ? void 0 : _28.setAttribute('textAlign', 'center');
+                  (_59 = this._subTitle) === null || _59 === void 0 ? void 0 : _59.setAttribute('x', subTitleWidth / 2);
+                  (_60 = this._subTitle) === null || _60 === void 0 ? void 0 : _60.setAttribute('textAlign', 'center');
               }
               else if (subTitleAlign === 'right') {
-                  (_29 = this._subTitle) === null || _29 === void 0 ? void 0 : _29.setAttribute('x', subTitleWidth);
-                  (_30 = this._subTitle) === null || _30 === void 0 ? void 0 : _30.setAttribute('textAlign', 'right');
+                  (_61 = this._subTitle) === null || _61 === void 0 ? void 0 : _61.setAttribute('x', subTitleWidth);
+                  (_62 = this._subTitle) === null || _62 === void 0 ? void 0 : _62.setAttribute('textAlign', 'right');
               }
           }
           if (vutils.isValid(verticalAlign) || vutils.isValid(textStyle === null || textStyle === void 0 ? void 0 : textStyle.verticalAlign)) {
               const subTitleVerticalAlign = (subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.verticalAlign) ? subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.verticalAlign : verticalAlign;
               const subTitleYStart = maintextHeight;
-              const subTitleHeight = (_31 = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.height) !== null && _31 !== void 0 ? _31 : 0;
+              const subTitleHeight = (_63 = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.height) !== null && _63 !== void 0 ? _63 : 0;
               if (subTitleVerticalAlign === 'top') {
-                  (_32 = this._subTitle) === null || _32 === void 0 ? void 0 : _32.setAttribute('y', subTitleYStart);
-                  (_33 = this._subTitle) === null || _33 === void 0 ? void 0 : _33.setAttribute('textBaseline', 'top');
+                  (_64 = this._subTitle) === null || _64 === void 0 ? void 0 : _64.setAttribute('y', subTitleYStart);
+                  (_65 = this._subTitle) === null || _65 === void 0 ? void 0 : _65.setAttribute('textBaseline', 'top');
               }
               else if (subTitleVerticalAlign === 'middle') {
-                  (_34 = this._subTitle) === null || _34 === void 0 ? void 0 : _34.setAttribute('y', subTitleYStart + subTitleHeight / 2);
-                  (_35 = this._subTitle) === null || _35 === void 0 ? void 0 : _35.setAttribute('textBaseline', 'middle');
+                  (_66 = this._subTitle) === null || _66 === void 0 ? void 0 : _66.setAttribute('y', subTitleYStart + subTitleHeight / 2);
+                  (_67 = this._subTitle) === null || _67 === void 0 ? void 0 : _67.setAttribute('textBaseline', 'middle');
               }
               else if (subTitleVerticalAlign === 'bottom') {
-                  (_36 = this._subTitle) === null || _36 === void 0 ? void 0 : _36.setAttribute('y', subTitleYStart + subTitleHeight);
-                  (_37 = this._subTitle) === null || _37 === void 0 ? void 0 : _37.setAttribute('textBaseline', 'bottom');
+                  (_68 = this._subTitle) === null || _68 === void 0 ? void 0 : _68.setAttribute('y', subTitleYStart + subTitleHeight);
+                  (_69 = this._subTitle) === null || _69 === void 0 ? void 0 : _69.setAttribute('textBaseline', 'bottom');
               }
           }
       }
@@ -29569,7 +29522,7 @@
           this.name = 'indicator';
       }
       render() {
-          var _a;
+          var _a, _b, _c;
           const { visible, title, content, size, limitRatio = Infinity } = this.attribute;
           const limit = Math.min(size.width, size.height) * limitRatio;
           const group = this.createOrUpdateChild('indicator-container', { x: 0, y: 0, zIndex: 1 }, 'group');
@@ -29580,7 +29533,15 @@
           if (vutils.isValid(title)) {
               if (title.visible !== false) {
                   const titleStyle = vutils.merge({}, vutils.get(DEFAULT_INDICATOR_THEME, 'title.style'), title.style);
-                  this._title = group.createOrUpdateChild('indicator-title', Object.assign(Object.assign({}, titleStyle), { lineHeight: vutils.isValid(titleStyle.lineHeight) ? titleStyle.lineHeight : titleStyle.fontSize, visible: title.visible, x: 0, y: 0 }), 'text');
+                  if (titleStyle.type === 'rich') {
+                      this._title = group.createOrUpdateChild('indicator-title', Object.assign(Object.assign({ textConfig: titleStyle.text }, titleStyle), { visible: title.visible, x: 0, y: 0, width: (_a = titleStyle.width) !== null && _a !== void 0 ? _a : 0, height: (_b = titleStyle.height) !== null && _b !== void 0 ? _b : 0 }), 'richtext');
+                  }
+                  else if (titleStyle.type === 'html') {
+                      this._title = group.createOrUpdateChild('indicator-title', Object.assign(Object.assign({ textConfig: [], html: Object.assign({ dom: titleStyle.text, container: '', width: 30, height: 30, style: {} }, titleStyle) }, titleStyle), { visible: title.visible, x: 0, y: 0 }), 'richtext');
+                  }
+                  else {
+                      this._title = group.createOrUpdateChild('indicator-title', Object.assign(Object.assign({}, titleStyle), { lineHeight: vutils.isValid(titleStyle.lineHeight) ? titleStyle.lineHeight : titleStyle.fontSize, visible: title.visible, x: 0, y: 0 }), 'text');
+                  }
                   if (title.autoFit && vutils.isValidNumber(limit)) {
                       this._setAutoFit(limit, this._title, title);
                   }
@@ -29601,9 +29562,19 @@
               const contentComponents = [];
               let lastContentHeight = 0;
               contents.forEach((contentItem, i) => {
+                  var _a, _b;
                   if (contentItem.visible !== false) {
                       const contentStyle = vutils.merge({}, vutils.get(DEFAULT_INDICATOR_THEME, 'content.style'), contentItem.style);
-                      const contentComponent = group.createOrUpdateChild('indicator-content-' + i, Object.assign(Object.assign({}, contentStyle), { lineHeight: vutils.isValid(contentStyle.lineHeight) ? contentStyle.lineHeight : contentStyle.fontSize, visible: contentItem.visible, x: 0, y: titleHeight + titleSpace + lastContentHeight }), 'text');
+                      let contentComponent;
+                      if (contentStyle.type === 'rich') {
+                          contentComponent = group.createOrUpdateChild('indicator-content-' + i, Object.assign(Object.assign({ textConfig: contentStyle.text }, contentStyle), { visible: title.visible, x: 0, y: titleHeight + titleSpace + lastContentHeight, width: (_a = contentStyle.width) !== null && _a !== void 0 ? _a : 0, height: (_b = contentStyle.height) !== null && _b !== void 0 ? _b : 0 }), 'richtext');
+                      }
+                      else if (contentStyle.type === 'html') {
+                          contentComponent = group.createOrUpdateChild('indicator-content-' + i, Object.assign(Object.assign({ textConfig: [], html: Object.assign({ dom: contentStyle.text, container: '', width: 30, height: 30, style: {} }, contentStyle) }, contentStyle), { visible: title.visible, x: 0, y: titleHeight + titleSpace + lastContentHeight }), 'richtext');
+                      }
+                      else {
+                          contentComponent = group.createOrUpdateChild('indicator-content-' + i, Object.assign(Object.assign({}, contentStyle), { lineHeight: vutils.isValid(contentStyle.lineHeight) ? contentStyle.lineHeight : contentStyle.fontSize, visible: contentItem.visible, x: 0, y: titleHeight + titleSpace + lastContentHeight }), 'text');
+                      }
                       if (contentItem.autoFit && vutils.isValidNumber(limit)) {
                           this._setAutoFit(limit, contentComponent, contentItem);
                       }
@@ -29621,7 +29592,7 @@
               });
               this._content = contentComponents;
           }
-          const totalHeight = (_a = group === null || group === void 0 ? void 0 : group.AABBBounds.height()) !== null && _a !== void 0 ? _a : 0;
+          const totalHeight = (_c = group === null || group === void 0 ? void 0 : group.AABBBounds.height()) !== null && _c !== void 0 ? _c : 0;
           group.setAttribute('y', size.height / 2 - totalHeight / 2);
           group.setAttribute('x', size.width / 2);
       }
@@ -30980,7 +30951,13 @@
           this._tooltipTitleSymbol = this._tooltipTitleContainer.createOrUpdateChild(`${TOOLTIP_TITLE_NAME}-${TOOLTIP_SHAPE_NAME_SUFFIX}`, vutils.merge({ symbolType: 'circle' }, titleAttr.shape, {
               visible: isVisible(titleAttr) && isVisible(titleAttr.shape)
           }), 'symbol');
-          if (titleAttr.value.multiLine) {
+          if (titleAttr.value.type === 'rich') {
+              this._tooltipTitle = this._tooltipTitleContainer.createOrUpdateChild(`${TOOLTIP_TITLE_NAME}-${TOOLTIP_VALUE_NAME_SUFFIX}`, Object.assign({ visible: isVisible(titleAttr) && isVisible(titleAttr.value), width: titleAttr.value.width, height: titleAttr.value.height, wordBreak: titleAttr.value.wordBreak, textAlign: titleAttr.value.textAlign, textBaseline: titleAttr.value.textBaseline, singleLine: false, textConfig: titleAttr.value.text }, titleAttr.value), 'richtext');
+          }
+          else if (titleAttr.value.type === 'html') {
+              this._tooltipTitle = this._tooltipTitleContainer.createOrUpdateChild(`${TOOLTIP_TITLE_NAME}-${TOOLTIP_VALUE_NAME_SUFFIX}`, Object.assign({ html: Object.assign({ dom: titleAttr.value.text, container: '', width: 30, height: 30, style: {} }, titleAttr.value), visible: isVisible(titleAttr) && isVisible(titleAttr.value), width: titleAttr.value.width, height: titleAttr.value.height, wordBreak: titleAttr.value.wordBreak, textAlign: titleAttr.value.textAlign, textBaseline: titleAttr.value.textBaseline, singleLine: false, textConfig: [] }, titleAttr.value), 'richtext');
+          }
+          else if (titleAttr.value.multiLine) {
               this._tooltipTitle = this._tooltipTitleContainer.createOrUpdateChild(`${TOOLTIP_TITLE_NAME}-${TOOLTIP_VALUE_NAME_SUFFIX}`, Object.assign({ visible: isVisible(titleAttr) && isVisible(titleAttr.value) }, getRichTextAttribute(titleAttr.value)), 'richtext');
           }
           else {
@@ -31025,9 +31002,7 @@
                   let x = 0;
                   if (isVisible(itemAttr.shape)) {
                       itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_SHAPE_NAME_SUFFIX}`, Object.assign({ visible: true, x: itemAttr.shape.size / 2, y: itemAttr.shape.size / 2 +
-                              (((_a = calculateLineHeight(itemAttr.key.lineHeight, itemAttr.key.fontSize)) !== null && _a !== void 0 ? _a : itemAttr.key.fontSize) -
-                                  itemAttr.shape.size) /
-                                  2 }, itemAttr.shape), 'symbol');
+                              (((_a = itemAttr.key.lineHeight) !== null && _a !== void 0 ? _a : itemAttr.key.fontSize) - itemAttr.shape.size) / 2 }, itemAttr.shape), 'symbol');
                   }
                   if (hasContentShape) {
                       x += itemAttr.shape.size + itemAttr.shape.spacing;
@@ -31408,7 +31383,7 @@
       }
   };
 
-  const version = "0.16.14-alpha.3";
+  const version = "0.16.14-alpha.4";
 
   exports.AbstractComponent = AbstractComponent;
   exports.ArcInfo = ArcInfo;