@visactor/vstory 0.0.17 → 0.0.19

package/dist/index.js

@@ -4382,6 +4382,11 @@
   var lowerCamelCaseToMiddle = function lowerCamelCaseToMiddle(str) {
     return str.replace(/([A-Z])/g, "-$1").toLowerCase();
   };
+  function toCamelCase(str) {
+    return str.replace(/-([a-z])/g, function (_, letter) {
+      return letter.toUpperCase();
+    });
+  }
 
   /**
    * @module helpers
@@ -7274,7 +7279,8 @@
     justifyContent: "flex-start",
     alignItems: "flex-start",
     alignContent: "flex-start",
-    baseOpacity: 1
+    baseOpacity: 1,
+    cornerType: "round"
   });
   var DefaultGlyphAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
     path: "",
@@ -7311,7 +7317,8 @@
     x1: 0,
     y1: 0,
     strokeBoundsBuffer: 0,
-    cornerRadius: 0
+    cornerRadius: 0,
+    cornerType: "round"
   });
   Object.assign(Object.assign({}, DefaultAttribute), {
     width: 0,
@@ -7319,7 +7326,8 @@
     x1: 0,
     y1: 0,
     cornerRadius: 0,
-    length: 0
+    length: 0,
+    cornerType: "round"
   });
   var DefaultSymbolAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
     symbolType: "circle",
@@ -7355,7 +7363,8 @@
     height: 0
   }, DefaultAttribute), {
     fill: !0,
-    cornerRadius: 0
+    cornerRadius: 0,
+    cornerType: "round"
   });
   var DefaultRichTextIconAttribute = Object.assign(Object.assign({}, DefaultImageAttribute), {
     backgroundShowMode: "never",
@@ -10699,6 +10708,13 @@
       }
     }]);
   }();
+  function flicker$1(t, n) {
+    var step = 1 / n;
+    var flag = 1;
+    for (; t > step;) t -= step, flag *= -1;
+    var 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 = function (t) {
     return (t /= .5) < 1 ? .5 * Math.pow(t, 2) : -.5 * ((t -= 2) * t - 2);
   }, Easing.easeOutElastic = function (x) {
@@ -10708,6 +10724,22 @@
     var 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;
   };
+  var _loop = function _loop(i) {
+    Easing["flicker".concat(i)] = function (t) {
+      return flicker$1(t, i);
+    };
+  };
+  for (var i$1 = 0; i$1 < 10; i$1++) {
+    _loop(i$1);
+  }
+  var _loop2 = function _loop2(_i) {
+    Easing["aIn".concat(_i)] = function (t) {
+      return _i * t * t + (1 - _i) * t;
+    };
+  };
+  for (var _i = 2; _i < 10; _i++) {
+    _loop2(_i);
+  }
 
   var DefaultTimeline = /*#__PURE__*/function () {
     function DefaultTimeline() {
@@ -11465,6 +11497,54 @@
   !function (Direction) {
     Direction[Direction.LEFT_TO_RIGHT = 0] = "LEFT_TO_RIGHT", Direction[Direction.RIGHT_TO_LEFT = 1] = "RIGHT_TO_LEFT", Direction[Direction.TOP_TO_BOTTOM = 2] = "TOP_TO_BOTTOM", Direction[Direction.BOTTOM_TO_TOP = 3] = "BOTTOM_TO_TOP", Direction[Direction.STROKE = 4] = "STROKE";
   }(Direction$1 || (Direction$1 = {}));
+  var InputText = /*#__PURE__*/function (_ACustomAnimate3) {
+    function InputText() {
+      var _this2;
+      _classCallCheck(this, InputText);
+      _this2 = _callSuper(this, InputText, arguments), _this2.fromText = "", _this2.toText = "";
+      return _this2;
+    }
+    _inherits(InputText, _ACustomAnimate3);
+    return _createClass(InputText, [{
+      key: "getEndProps",
+      value: function getEndProps() {
+        return !1 === this.valid ? {} : {
+          text: this.to
+        };
+      }
+    }, {
+      key: "onBind",
+      value: function onBind() {
+        var _a, _b, _c;
+        this.fromText = null !== (_b = null === (_a = this.from) || void 0 === _a ? void 0 : _a.text) && void 0 !== _b ? _b : "", this.toText = (null === (_c = this.to) || void 0 === _c ? void 0 : _c.text) || "", (!this.toText || isArray$3(this.toText) && 0 === this.toText.length) && (this.valid = !1), isArray$3(this.toText) && (this.toText = this.toText.map(function (item) {
+          return (item || "").toString();
+        }));
+      }
+    }, {
+      key: "onEnd",
+      value: function onEnd() {
+        this.target.detachShadow();
+      }
+    }, {
+      key: "onUpdate",
+      value: function onUpdate(end, ratio, out) {
+        if (!1 === this.valid) return;
+        var fromCount = this.fromText.length,
+          toTextIsArray = isArray$3(this.toText),
+          toCount = toTextIsArray ? this.toText.reduce(function (c, t) {
+            return c + (t || "").length;
+          }, 0) : this.toText.length,
+          count = Math.ceil(fromCount + (toCount - fromCount) * ratio);
+        if (toTextIsArray) {
+          out.text = [];
+          var len = 0;
+          this.toText.forEach(function (t) {
+            len + t.length > count ? (out.text.push(t.substr(0, count - len)), len = count) : (out.text.push(t), len += t.length);
+          });
+        } else out.text = this.toText.substr(0, count);
+      }
+    }]);
+  }(ACustomAnimate);
   var TagPointsUpdate = /*#__PURE__*/function (_ACustomAnimate7) {
     function TagPointsUpdate(from, to, duration, easing, params) {
       var _this6;
@@ -12923,6 +13003,20 @@
             });
           return _color2 && (nextAttributes[key] = _color2), !0;
         }
+        if (Array.isArray(nextStepVal) && nextStepVal.length === lastStepVal.length) {
+          var nextList = [];
+          var valid = !0;
+          for (var i = 0; i < nextStepVal.length; i++) {
+            var 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;
       }
     }, {
@@ -19358,7 +19452,7 @@
   var defaultGroupBackgroundRenderContribution = new DefaultGroupBackgroundRenderContribution();
 
   var halfPi$1 = pi$1 / 2;
-  function createRectPath(path, x, y, width, height, rectCornerRadius, edgeCb) {
+  function createRectPath(path, x, y, width, height, rectCornerRadius, roundCorner, edgeCb) {
     var cornerRadius;
     if (width < 0 && (x += width, width = -width), height < 0 && (y += height, height = -height), isNumber$3(rectCornerRadius, !0)) cornerRadius = [rectCornerRadius = abs$1(rectCornerRadius), rectCornerRadius, rectCornerRadius, rectCornerRadius];else if (Array.isArray(rectCornerRadius)) {
       var cornerRadiusArr = rectCornerRadius;
@@ -19393,27 +19487,29 @@
       rightBottomPoint2 = [rightBottom[0], rightBottom[1] - _cornerRadius[2]],
       leftBottomPoint1 = [leftBottom[0] + _cornerRadius[3], leftBottom[1]],
       leftBottomPoint2 = [leftBottom[0], leftBottom[1] - _cornerRadius[3]];
-    if (path.moveTo(leftTopPoint1[0], leftTopPoint1[1]), edgeCb && edgeCb[0] ? edgeCb[0](leftTopPoint1[0], leftTopPoint1[1], rightTopPoint1[0], rightTopPoint1[1]) : path.lineTo(rightTopPoint1[0], rightTopPoint1[1]), !arrayEqual(rightTopPoint1, rightTopPoint2)) {
-      edgeCb && edgeCb[0] && path.moveTo(rightTopPoint1[0], rightTopPoint1[1]);
-      var centerX = rightTopPoint1[0],
-        centerY = rightTopPoint1[1] + _cornerRadius[1];
-      path.arc(centerX, centerY, _cornerRadius[1], -halfPi$1, 0, !1);
-    }
-    if (edgeCb && edgeCb[1] ? edgeCb[1](rightTopPoint2[0], rightTopPoint2[1], rightBottomPoint2[0], rightBottomPoint2[1]) : path.lineTo(rightBottomPoint2[0], rightBottomPoint2[1]), !arrayEqual(rightBottomPoint1, rightBottomPoint2)) {
-      var _centerX = rightBottomPoint2[0] - _cornerRadius[2],
-        _centerY = rightBottomPoint2[1];
-      edgeCb && edgeCb[1] && path.moveTo(rightBottomPoint2[0], rightBottomPoint2[1]), path.arc(_centerX, _centerY, _cornerRadius[2], 0, halfPi$1, !1);
-    }
-    if (edgeCb && edgeCb[2] ? edgeCb[2](rightBottomPoint1[0], rightBottomPoint1[1], leftBottomPoint1[0], leftBottomPoint1[1]) : path.lineTo(leftBottomPoint1[0], leftBottomPoint1[1]), !arrayEqual(leftBottomPoint1, leftBottomPoint2)) {
-      var _centerX2 = leftBottomPoint1[0],
-        _centerY2 = leftBottomPoint1[1] - _cornerRadius[3];
-      edgeCb && edgeCb[2] && path.moveTo(leftBottomPoint1[0], leftBottomPoint1[1]), path.arc(_centerX2, _centerY2, _cornerRadius[3], halfPi$1, pi$1, !1);
-    }
-    if (edgeCb && edgeCb[3] ? edgeCb[3](leftBottomPoint2[0], leftBottomPoint2[1], leftTopPoint2[0], leftTopPoint2[1]) : path.lineTo(leftTopPoint2[0], leftTopPoint2[1]), !arrayEqual(leftTopPoint1, leftTopPoint2)) {
-      var _centerX3 = leftTopPoint1[0],
-        _centerY3 = leftTopPoint1[1] + _cornerRadius[0];
-      edgeCb && edgeCb[3] && path.moveTo(leftTopPoint2[0], leftTopPoint2[1]), path.arc(_centerX3, _centerY3, _cornerRadius[0], pi$1, pi$1 + halfPi$1, !1);
-    }
+    if (path.moveTo(leftTopPoint1[0], leftTopPoint1[1]), roundCorner) {
+      if (edgeCb && edgeCb[0] ? edgeCb[0](leftTopPoint1[0], leftTopPoint1[1], rightTopPoint1[0], rightTopPoint1[1]) : path.lineTo(rightTopPoint1[0], rightTopPoint1[1]), !arrayEqual(rightTopPoint1, rightTopPoint2)) {
+        edgeCb && edgeCb[0] && path.moveTo(rightTopPoint1[0], rightTopPoint1[1]);
+        var centerX = rightTopPoint1[0],
+          centerY = rightTopPoint1[1] + _cornerRadius[1];
+        path.arc(centerX, centerY, _cornerRadius[1], -halfPi$1, 0, !1);
+      }
+      if (edgeCb && edgeCb[1] ? edgeCb[1](rightTopPoint2[0], rightTopPoint2[1], rightBottomPoint2[0], rightBottomPoint2[1]) : path.lineTo(rightBottomPoint2[0], rightBottomPoint2[1]), !arrayEqual(rightBottomPoint1, rightBottomPoint2)) {
+        var _centerX = rightBottomPoint2[0] - _cornerRadius[2],
+          _centerY = rightBottomPoint2[1];
+        edgeCb && edgeCb[1] && path.moveTo(rightBottomPoint2[0], rightBottomPoint2[1]), path.arc(_centerX, _centerY, _cornerRadius[2], 0, halfPi$1, !1);
+      }
+      if (edgeCb && edgeCb[2] ? edgeCb[2](rightBottomPoint1[0], rightBottomPoint1[1], leftBottomPoint1[0], leftBottomPoint1[1]) : path.lineTo(leftBottomPoint1[0], leftBottomPoint1[1]), !arrayEqual(leftBottomPoint1, leftBottomPoint2)) {
+        var _centerX2 = leftBottomPoint1[0],
+          _centerY2 = leftBottomPoint1[1] - _cornerRadius[3];
+        edgeCb && edgeCb[2] && path.moveTo(leftBottomPoint1[0], leftBottomPoint1[1]), path.arc(_centerX2, _centerY2, _cornerRadius[3], halfPi$1, pi$1, !1);
+      }
+      if (edgeCb && edgeCb[3] ? edgeCb[3](leftBottomPoint2[0], leftBottomPoint2[1], leftTopPoint2[0], leftTopPoint2[1]) : path.lineTo(leftTopPoint2[0], leftTopPoint2[1]), !arrayEqual(leftTopPoint1, leftTopPoint2)) {
+        var _centerX3 = leftTopPoint1[0],
+          _centerY3 = leftTopPoint1[1] + _cornerRadius[0];
+        edgeCb && edgeCb[3] && path.moveTo(leftTopPoint2[0], leftTopPoint2[1]), path.arc(_centerX3, _centerY3, _cornerRadius[0], pi$1, pi$1 + halfPi$1, !1);
+      }
+    } else edgeCb && edgeCb[0] ? edgeCb[0](leftTopPoint1[0], leftTopPoint1[1], rightTopPoint1[0], rightTopPoint1[1]) : path.lineTo(rightTopPoint1[0], rightTopPoint1[1]), edgeCb && edgeCb[1] ? edgeCb[1](rightTopPoint1[0], rightTopPoint1[1], rightBottomPoint1[0], rightBottomPoint1[1]) : path.lineTo(rightBottomPoint1[0], rightBottomPoint1[1]), edgeCb && edgeCb[2] ? edgeCb[2](rightBottomPoint1[0], rightBottomPoint1[1], leftBottomPoint1[0], leftBottomPoint1[1]) : path.lineTo(leftBottomPoint1[0], leftBottomPoint1[1]), edgeCb && edgeCb[2] ? edgeCb[2](leftBottomPoint1[0], leftBottomPoint1[1], leftTopPoint1[0], leftTopPoint1[1]) : path.lineTo(leftTopPoint1[0], leftTopPoint1[1]);
     return !edgeCb && path.closePath(), path;
   }
 
@@ -19441,6 +19537,8 @@
         var _rect$attribute2 = rect.attribute,
           _rect$attribute2$corn = _rect$attribute2.cornerRadius,
           cornerRadius = _rect$attribute2$corn === void 0 ? rectAttribute.cornerRadius : _rect$attribute2$corn,
+          _rect$attribute2$corn2 = _rect$attribute2.cornerType,
+          cornerType = _rect$attribute2$corn2 === void 0 ? rectAttribute.cornerType : _rect$attribute2$corn2,
           _rect$attribute2$opac = _rect$attribute2.opacity,
           opacity = _rect$attribute2$opac === void 0 ? rectAttribute.opacity : _rect$attribute2$opac,
           _rect$attribute2$x = _rect$attribute2.x,
@@ -19470,7 +19568,7 @@
             dw = 2 * d;
           if (0 === cornerRadius || isArray$3(cornerRadius) && cornerRadius.every(function (num) {
             return 0 === num;
-          }) ? (context.beginPath(), context.rect(nextX, nextY, width - sign * dw, height - sign * dw)) : (context.beginPath(), createRectPath(context, nextX, nextY, width - sign * dw, height - sign * dw, cornerRadius)), context.setShadowBlendStyle && context.setShadowBlendStyle(rect, rect.attribute, rectAttribute), strokeCb) strokeCb(context, borderStyle, rectAttribute[key]);else if (doStroke) {
+          }) ? (context.beginPath(), context.rect(nextX, nextY, width - sign * dw, height - sign * dw)) : (context.beginPath(), createRectPath(context, nextX, nextY, width - sign * dw, height - sign * dw, cornerRadius, "round" === cornerType)), context.setShadowBlendStyle && context.setShadowBlendStyle(rect, rect.attribute, rectAttribute), strokeCb) strokeCb(context, borderStyle, rectAttribute[key]);else if (doStroke) {
             var lastOpacity = rectAttribute[key].opacity;
             rectAttribute[key].opacity = opacity, context.setStrokeStyle(rect, borderStyle, (originX - x) / scaleX, (originY - y) / scaleY, rectAttribute[key]), rectAttribute[key].opacity = lastOpacity, context.stroke();
           }
@@ -19514,7 +19612,9 @@
           _rect$attribute4$stro = _rect$attribute4.stroke,
           stroke = _rect$attribute4$stro === void 0 ? groupAttribute.stroke : _rect$attribute4$stro,
           _rect$attribute4$corn = _rect$attribute4.cornerRadius,
-          cornerRadius = _rect$attribute4$corn === void 0 ? groupAttribute.cornerRadius : _rect$attribute4$corn;
+          cornerRadius = _rect$attribute4$corn === void 0 ? groupAttribute.cornerRadius : _rect$attribute4$corn,
+          _rect$attribute4$corn2 = _rect$attribute4.cornerType,
+          cornerType = _rect$attribute4$corn2 === void 0 ? groupAttribute.cornerType : _rect$attribute4$corn2;
         var _rect$attribute5 = rect.attribute,
           width = _rect$attribute5.width,
           height = _rect$attribute5.height;
@@ -19526,7 +19626,7 @@
           }))) {
             var lastStroke,
               lastStrokeI = 0;
-            return createRectPath(context, x, y, width, height, cornerRadius, new Array(4).fill(0).map(function (_, i) {
+            return createRectPath(context, x, y, width, height, cornerRadius, "round" === cornerType, new Array(4).fill(0).map(function (_, i) {
               return function (x1, y1, x2, y2) {
                 stroke[i] && (lastStrokeI === i - 1 && stroke[i] === lastStroke || (context.setStrokeStyle(rect, Object.assign(Object.assign({}, rect.attribute), {
                   stroke: stroke[i]
@@ -19597,7 +19697,7 @@
             _y = _getActualPosition.y,
             width = _getActualPosition.width,
             height = _getActualPosition.height;
-          cornerRadius ? createRectPath(context, _x - expandX, _y - expandY, width + 2 * expandX, height + 2 * expandY, cornerRadius) : context.rect(_x - expandX, _y - expandY, width + 2 * expandX, height + 2 * expandY), context.globalAlpha = 1, fill && (context.fillStyle = fill, context.fill()), stroke && lineWidth > 0 && (context.lineWidth = lineWidth, context.strokeStyle = stroke, context.stroke());
+          cornerRadius ? createRectPath(context, _x - expandX, _y - expandY, width + 2 * expandX, height + 2 * expandY, cornerRadius, !0) : context.rect(_x - expandX, _y - expandY, width + 2 * expandX, height + 2 * expandY), context.globalAlpha = 1, fill && (context.fillStyle = fill, context.fill()), stroke && lineWidth > 0 && (context.lineWidth = lineWidth, context.strokeStyle = stroke, context.stroke());
         } else {
           context.beginPath();
           var _b = graphic.AABBBounds;
@@ -20831,6 +20931,8 @@
           stroke = _rect$attribute$strok === void 0 ? rectAttribute.stroke : _rect$attribute$strok,
           _rect$attribute$corne = _rect$attribute.cornerRadius,
           cornerRadius = _rect$attribute$corne === void 0 ? rectAttribute.cornerRadius : _rect$attribute$corne,
+          _rect$attribute$corne2 = _rect$attribute.cornerType,
+          cornerType = _rect$attribute$corne2 === void 0 ? rectAttribute.cornerType : _rect$attribute$corne2,
           _rect$attribute$opaci = _rect$attribute.opacity,
           opacity = _rect$attribute$opaci === void 0 ? rectAttribute.opacity : _rect$attribute$opaci,
           _rect$attribute$fillO = _rect$attribute.fillOpacity,
@@ -20862,7 +20964,7 @@
         if (!(fVisible || sVisible || fillCb || strokeCb || background)) return;
         0 === cornerRadius || isArray$3(cornerRadius) && cornerRadius.every(function (num) {
           return 0 === num;
-        }) ? (context.beginPath(), context.rect(x, y, width, height)) : (context.beginPath(), createRectPath(context, x, y, width, height, cornerRadius));
+        }) ? (context.beginPath(), context.rect(x, y, width, height)) : (context.beginPath(), createRectPath(context, x, y, width, height, cornerRadius, "round" === cornerType));
         var doFillOrStroke = {
           doFill: doFill,
           doStroke: doStroke
@@ -21070,7 +21172,7 @@
           context.highPerformanceSave(), onlyTranslate && context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), context.highPerformanceRestore(), context.setTransformForCurrent();
         } else {
           var backgroundCornerRadius = graphic.attribute.backgroundCornerRadius;
-          context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = background, backgroundCornerRadius ? (createRectPath(context, b.x1, b.y1, b.width(), b.height(), backgroundCornerRadius), context.fill()) : context.fillRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore();
+          context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = background, backgroundCornerRadius ? (createRectPath(context, b.x1, b.y1, b.width(), b.height(), backgroundCornerRadius, !0), context.fill()) : context.fillRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore();
         }
         shouldReCalBounds && boundsAllocate.free(b), restore();
       }
@@ -21421,6 +21523,8 @@
           visible = _group$attribute$visi === void 0 ? groupAttribute.visible : _group$attribute$visi,
           _group$attribute$fill3 = _group$attribute.fillStrokeOrder,
           fillStrokeOrder = _group$attribute$fill3 === void 0 ? groupAttribute.fillStrokeOrder : _group$attribute$fill3,
+          _group$attribute$corn2 = _group$attribute.cornerType,
+          cornerType = _group$attribute$corn2 === void 0 ? groupAttribute.cornerType : _group$attribute$corn2,
           _group$attribute$x = _group$attribute.x,
           originX = _group$attribute$x === void 0 ? groupAttribute.x : _group$attribute$x,
           _group$attribute$y = _group$attribute.y,
@@ -21443,7 +21547,7 @@
           }), context.disableFill = disableFill, context.disableStroke = disableStroke, context.disableBeginPath = disableBeginPath;
         } else 0 === cornerRadius || isArray$3(cornerRadius) && cornerRadius.every(function (num) {
           return 0 === num;
-        }) ? (context.beginPath(), context.rect(x, y, width, height)) : (context.beginPath(), createRectPath(context, x, y, width, height, cornerRadius));
+        }) ? (context.beginPath(), context.rect(x, y, width, height)) : (context.beginPath(), createRectPath(context, x, y, width, height, cornerRadius, "round" === cornerType));
         this._groupRenderContribitions || (this._groupRenderContribitions = this.groupRenderContribitions.getContributions() || [], this._groupRenderContribitions.push(defaultGroupBackgroundRenderContribution));
         var doFillOrStroke = {
           doFill: doFill,
@@ -21545,6 +21649,8 @@
           cornerRadius = _image$attribute$corn === void 0 ? imageAttribute.cornerRadius : _image$attribute$corn,
           _image$attribute$fill = _image$attribute.fillStrokeOrder,
           fillStrokeOrder = _image$attribute$fill === void 0 ? imageAttribute.fillStrokeOrder : _image$attribute$fill,
+          _image$attribute$corn2 = _image$attribute.cornerType,
+          cornerType = _image$attribute$corn2 === void 0 ? imageAttribute.cornerType : _image$attribute$corn2,
           url = _image$attribute.image,
           data = this.valid(image, imageAttribute, fillCb);
         if (!data) return;
@@ -21561,7 +21667,7 @@
               var needRestore = !1;
               0 === cornerRadius || isArray$3(cornerRadius) && cornerRadius.every(function (num) {
                 return 0 === num;
-              }) || (context.beginPath(), createRectPath(context, x, y, width, height, cornerRadius), context.save(), context.clip(), needRestore = !0), context.setCommonStyle(image, image.attribute, x, y, imageAttribute);
+              }) || (context.beginPath(), createRectPath(context, x, y, width, height, cornerRadius, "round" === cornerType), context.save(), context.clip(), needRestore = !0), context.setCommonStyle(image, image.attribute, x, y, imageAttribute);
               var repeat = 0;
               if ("repeat" === repeatX && (repeat |= 1), "repeat" === repeatY && (repeat |= 2), repeat) {
                 var pattern = context.createPattern(res.data, repeatStr[repeat]);
@@ -24783,7 +24889,7 @@
         if (margin && (x += icon._marginArray[3], y += icon._marginArray[0]), icon._hovered) {
           var expandX = (backgroundWidth - width) / 2,
             expandY = (backgroundHeight - height) / 2;
-          0 === backgroundRadius ? (context.beginPath(), context.rect(x - expandX, y - expandY, backgroundWidth, backgroundHeight)) : (context.beginPath(), createRectPath(context, x - expandX, y - expandY, backgroundWidth, backgroundHeight, backgroundRadius)), backgroundFill && (context.globalAlpha = backgroundFillOpacity, context.fillStyle = backgroundFill, context.fill()), backgroundStroke && (context.globalAlpha = backgroundStrokeOpacity, context.strokeStyle = backgroundStroke, context.stroke());
+          0 === backgroundRadius ? (context.beginPath(), context.rect(x - expandX, y - expandY, backgroundWidth, backgroundHeight)) : (context.beginPath(), createRectPath(context, x - expandX, y - expandY, backgroundWidth, backgroundHeight, backgroundRadius, !0)), backgroundFill && (context.globalAlpha = backgroundFillOpacity, context.fillStyle = backgroundFill, context.fill()), backgroundStroke && (context.globalAlpha = backgroundStrokeOpacity, context.strokeStyle = backgroundStroke, context.stroke());
         }
         var res = url && (null === (_a = null == icon ? void 0 : icon.resources) || void 0 === _a ? void 0 : _a.get(url));
         res && "success" === res.state && (context.globalAlpha = opacity, context.drawImage(res.data, x, y, width, height));
@@ -26793,13 +26899,15 @@
             lineJoin = _attribute$lineJoin === void 0 ? defaultParams.lineJoin : _attribute$lineJoin,
             _attribute$lineDash = attribute.lineDash,
             lineDash = _attribute$lineDash === void 0 ? defaultParams.lineDash : _attribute$lineDash,
+            _attribute$lineDashOf = attribute.lineDashOffset,
+            lineDashOffset = _attribute$lineDashOf === void 0 ? defaultParams.lineDashOffset : _attribute$lineDashOf,
             _attribute$lineCap = attribute.lineCap,
             lineCap = _attribute$lineCap === void 0 ? defaultParams.lineCap : _attribute$lineCap,
             _attribute$miterLimit = attribute.miterLimit,
             miterLimit = _attribute$miterLimit === void 0 ? defaultParams.miterLimit : _attribute$miterLimit,
             _attribute$keepStroke = attribute.keepStrokeScale,
             keepStrokeScale = _attribute$keepStroke === void 0 ? defaultParams.keepStrokeScale : _attribute$keepStroke;
-          _context.lineWidth = keepStrokeScale ? lineWidth : getScaledStroke(this, lineWidth, this.dpr), _context.strokeStyle = createColor(this, stroke, params, offsetX, offsetY), _context.lineJoin = lineJoin, lineDash && _context.setLineDash(lineDash), _context.lineCap = lineCap, _context.miterLimit = miterLimit;
+          _context.lineWidth = keepStrokeScale ? lineWidth : getScaledStroke(this, lineWidth, this.dpr), _context.strokeStyle = createColor(this, stroke, params, offsetX, offsetY), _context.lineJoin = lineJoin, lineDash && (_context.setLineDash(lineDash), _context.lineDashOffset = lineDashOffset), _context.lineCap = lineCap, _context.miterLimit = miterLimit;
         }
       }
     }, {
@@ -35083,6 +35191,180 @@
     }), data;
   };
 
+  var tagNameToType = {
+      svg: "group",
+      rect: "rect",
+      line: "rule",
+      polygon: "polygon",
+      path: "path",
+      polyline: "line",
+      g: "group",
+      circle: "arc",
+      ellipse: "arc"
+    },
+    validTagName = Object.keys(tagNameToType),
+    validGroupNode = ["g", "svg", "text", "tspan", "switch"],
+    validTextAttributes = ["font-size", "font-family", "font-weight", "font-style", "text-align", "text-anchor"],
+    validCircleAttributes = ["cx", "cy", "r"],
+    validEllipseAttributes = ["cx", "cy", "rx", "ry"],
+    validLineAttributes = ["x1", "x2", "y1", "y2"],
+    validAttributes = ["visibility", "x", "y", "width", "height", "d", "points", "stroke", "stroke-width", "fill", "fill-opacity", "stroke-opacity"].concat(validTextAttributes, validCircleAttributes, validEllipseAttributes, validLineAttributes),
+    validInheritAttributes = ["visible", "fill", "stroke", "stroke-width", "fill-opacity", "stroke-opacity"].concat(validTextAttributes),
+    numberReg = /-?([0-9]*\.)?[0-9]+([eE]-?[0-9]+)?/g;
+  function splitNumberSequence(rawStr) {
+    return rawStr.match(numberReg) || [];
+  }
+  var svgParser = function svgParser(data) {
+    var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var parser = option.customDOMParser;
+    if (parser || (null === window || void 0 === window ? void 0 : window.DOMParser) && (parser = function parser(svg) {
+      return new DOMParser().parseFromString(svg, "text/xml");
+    }), !parser) throw new Error("No Available DOMParser!");
+    var svg = parser(data);
+    var node = 9 === svg.nodeType ? svg.firstChild : svg;
+    for (; node && ("svg" !== node.nodeName.toLowerCase() || 1 !== node.nodeType);) node = node.nextSibling;
+    if (node) {
+      return parseSvgNode(node);
+    }
+    return null;
+  };
+  var idx = 0;
+  function parseSvgNode(svg) {
+    var opt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var elements = [],
+      root = parseNode(svg, null);
+    var width = parseFloat(svg.getAttribute("width") || opt.width),
+      height = parseFloat(svg.getAttribute("height") || opt.height);
+    !isValidNumber$1(width) && (width = null), !isValidNumber$1(height) && (height = null);
+    var viewBox = svg.getAttribute("viewBox");
+    var viewBoxRect;
+    if (viewBox) {
+      var viewBoxArr = splitNumberSequence(viewBox);
+      if (viewBoxArr.length >= 4 && (viewBoxRect = {
+        x: parseFloat(viewBoxArr[0] || 0),
+        y: parseFloat(viewBoxArr[1] || 0),
+        width: parseFloat(viewBoxArr[2]),
+        height: parseFloat(viewBoxArr[3])
+      }, width || height)) {
+        var boundingRect = {
+            x: 0,
+            y: 0,
+            width: width,
+            height: height
+          },
+          scaleX = boundingRect.width / viewBoxRect.width,
+          scaleY = boundingRect.height / viewBoxRect.height,
+          scale = Math.min(scaleX, scaleY),
+          transLateX = -(viewBoxRect.x + viewBoxRect.width / 2) * scale + (boundingRect.x + boundingRect.width / 2),
+          transLateY = -(viewBoxRect.y + viewBoxRect.height / 2) * scale + (boundingRect.y + boundingRect.height / 2),
+          viewBoxTransform = new Matrix().translate(transLateX, transLateY).scale(scale, scale);
+        root.transform = viewBoxTransform;
+      }
+    }
+    return traverse(svg, root, elements), {
+      root: root,
+      width: width,
+      height: height,
+      elements: elements,
+      viewBoxRect: viewBoxRect
+    };
+  }
+  function parseInheritAttributes(parsedElement) {
+    var inheritedAttrs;
+    var parent = parsedElement.parent,
+      attributes = parsedElement.attributes,
+      parse = function parse(parent) {
+        return parent ? validInheritAttributes.reduce(function (acc, attrName) {
+          var camelAttrName = toCamelCase(attrName);
+          return isValid$3(parent[camelAttrName]) && (acc[camelAttrName] = parent[camelAttrName]), acc;
+        }, {}) : {};
+      };
+    return parent ? (parent._inheritStyle || (parent._inheritStyle = parse(parent.attributes)), inheritedAttrs = merge$2({}, parent._inheritStyle, parse(attributes))) : inheritedAttrs = parse(attributes), inheritedAttrs;
+  }
+  function parseAttributes(el) {
+    var _a, _b, _c;
+    var attrs = {},
+      attributes = null !== (_a = el.attributes) && void 0 !== _a ? _a : {},
+      style = null !== (_b = el.style) && void 0 !== _b ? _b : {};
+    for (var i = 0; i < validAttributes.length; i++) {
+      var attrName = validAttributes[i],
+        attrValue = isValid$3(style[attrName]) && "" !== style[attrName] ? style[attrName] : null === (_c = attributes[attrName]) || void 0 === _c ? void 0 : _c.value;
+      isValid$3(attrValue) && (attrs[toCamelCase(attrName)] = isNaN(+attrValue) ? attrValue : parseFloat(attrValue));
+    }
+    return "none" === style.display && (attrs.visible = !1), ["fontSize", "strokeWidth", "width", "height"].forEach(function (attr) {
+      var attrValue = attrs[attr];
+      isString$3(attrs[attr]) && (attrs[attr] = parseFloat(attrValue));
+    }), attrs;
+  }
+  function parseNode(node, parent) {
+    var _a, _b, _c, _d, _e;
+    var tagName = null === (_a = node.tagName) || void 0 === _a ? void 0 : _a.toLowerCase();
+    if (3 === node.nodeType || "text" === tagName || "tspan" === tagName) return parseText(node, parent);
+    if (!validTagName.includes(tagName)) return null;
+    var parsed = {
+      tagName: tagName,
+      graphicType: tagNameToType[tagName],
+      attributes: parseAttributes(node),
+      parent: parent,
+      name: null !== (_b = node.getAttribute("name")) && void 0 !== _b ? _b : null === (_c = null == parent ? void 0 : parent.attributes) || void 0 === _c ? void 0 : _c.name,
+      id: null !== (_d = node.getAttribute("id")) && void 0 !== _d ? _d : "".concat(tagName, "-").concat(idx++),
+      transform: parseTransform$1(node)
+    };
+    return parsed._inheritStyle = parseInheritAttributes(parsed), parent && !isValid$3(parsed.name) && (parsed._nameFromParent = null !== (_e = parent.name) && void 0 !== _e ? _e : parent._nameFromParent), parsed;
+  }
+  function parseText(node, parent) {
+    var _a, _b, _c, _d, _e, _f;
+    if (!parent) return null;
+    var tagName = null === (_a = node.tagName) || void 0 === _a ? void 0 : _a.toLowerCase();
+    if (!tagName && "group" !== parent.graphicType) return null;
+    var nodeAsGroup = "text" === tagName || "tspan" === tagName,
+      elType = nodeAsGroup ? "group" : "text",
+      value = nodeAsGroup || null === (_b = node.textContent) || void 0 === _b ? void 0 : _b.replace(/\n/g, " ").replace(/\s+/g, " ");
+    if (" " === value) return null;
+    var parsed;
+    return parsed = nodeAsGroup ? {
+      tagName: tagName,
+      graphicType: elType,
+      attributes: parseAttributes(node),
+      parent: parent,
+      name: node.getAttribute("name"),
+      id: null !== (_c = node.getAttribute("id")) && void 0 !== _c ? _c : "".concat(tagName, "-").concat(idx++),
+      transform: parseTransform$1(node),
+      value: value
+    } : {
+      tagName: tagName,
+      graphicType: "text",
+      attributes: parseAttributes(node),
+      parent: parent,
+      name: null == parent ? void 0 : parent.name,
+      id: null !== (_e = null === (_d = node.getAttribute) || void 0 === _d ? void 0 : _d.call(node, "id")) && void 0 !== _e ? _e : "".concat(tagName, "-").concat(idx++),
+      value: value
+    }, parsed._inheritStyle = parseInheritAttributes(parsed), isValid$3(parsed.name) || (parsed._nameFromParent = null !== (_f = parent.name) && void 0 !== _f ? _f : parent._nameFromParent), nodeAsGroup ? parent._textGroupStyle ? parsed._textGroupStyle = merge$2({}, parent._textGroupStyle, parseAttributes(node)) : parsed._textGroupStyle = parseAttributes(node) : parsed.attributes = parsed._inheritStyle, parsed;
+  }
+  function parseTransform$1(node) {
+    var _a, _b;
+    var transforms = null === (_a = node.transform) || void 0 === _a ? void 0 : _a.baseVal;
+    if (!transforms) return null;
+    var matrix = null === (_b = transforms.consolidate()) || void 0 === _b ? void 0 : _b.matrix;
+    if (!matrix) return null;
+    var a = matrix.a,
+      b = matrix.b,
+      c = matrix.c,
+      d = matrix.d,
+      e = matrix.e,
+      f = matrix.f;
+    return new Matrix(a, b, c, d, e, f);
+  }
+  function traverse(node, parsedParent) {
+    var result = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+    var _a;
+    if (!node) return;
+    var parseResult;
+    "svg" !== node.nodeName && (parseResult = parseNode(node, parsedParent)), parseResult && result.push(parseResult);
+    var child = validGroupNode.includes(null === (_a = node.tagName) || void 0 === _a ? void 0 : _a.toLocaleLowerCase()) ? node.firstChild : null;
+    for (; child;) traverse(child, null != parseResult ? parseResult : parsedParent, result), child = child.nextSibling;
+  }
+
   var idIndex = 0;
   var maxId = 1e8;
   function getUUID() {
@@ -36894,6 +37176,20 @@
   };
   var _tBounds = new AABBBounds();
   loadPoptipComponent();
+  var tlStr = "M -0.5 -0.5, L -0.5 0.5, L 0.5 -0.5, Z",
+    blStr = "M -0.5 -0.5, L -0.5 0.5, L 0.5 0.5, Z",
+    trStr = "M -0.5 -0.5, L 0.5 -0.5, L 0.5 0.5, Z",
+    brStr = "M 0.5 -0.5, L 0.5 0.5, L -0.5 0.5, Z",
+    conciseSymbolMap = {
+      tl: tlStr,
+      tr: trStr,
+      bl: blStr,
+      br: brStr,
+      lt: tlStr,
+      lb: blStr,
+      rt: trStr,
+      rb: brStr
+    };
   var PopTip = /*#__PURE__*/function (_AbstractComponent) {
     function PopTip(attributes, options) {
       var _this;
@@ -36905,15 +37201,20 @@
     return _createClass(PopTip, [{
       key: "render",
       value: function render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         var _this$attribute = this.attribute,
           _this$attribute$title = _this$attribute.titleStyle,
           titleStyle = _this$attribute$title === void 0 ? {} : _this$attribute$title,
           position = _this$attribute.position,
           _this$attribute$conte = _this$attribute.contentStyle,
           contentStyle = _this$attribute$conte === void 0 ? {} : _this$attribute$conte,
-          _this$attribute$panel = _this$attribute.panel,
-          panel = _this$attribute$panel === void 0 ? {} : _this$attribute$panel,
+          panel = _this$attribute.panel,
+          logoSymbol = _this$attribute.logoSymbol,
+          logoText = _this$attribute.logoText,
+          _this$attribute$logoT = _this$attribute.logoTextStyle,
+          logoTextStyle = _this$attribute$logoT === void 0 ? {} : _this$attribute$logoT,
+          _this$attribute$trian = _this$attribute.triangleMode,
+          triangleMode = _this$attribute$trian === void 0 ? "default" : _this$attribute$trian,
           _this$attribute$space = _this$attribute.space,
           space = _this$attribute$space === void 0 ? 4 : _this$attribute$space,
           _this$attribute$minWi = _this$attribute.minWidth,
@@ -36940,8 +37241,9 @@
             x: 0,
             y: 0,
             zIndex: 1
-          }, "group"),
-          maxLineWidth = maxWidth - parsedPadding[1] - parsedPadding[3],
+          }, "group");
+        this.group = group;
+        var maxLineWidth = maxWidth - parsedPadding[1] - parsedPadding[3],
           titleVisible = isValid$3(title) && !1 !== visible,
           titleAttrs = Object.assign(Object.assign({
             text: isArray$3(title) ? title : [title],
@@ -36978,13 +37280,24 @@
         var contentBounds = contentShape.AABBBounds,
           contentHeight = contentBounds.height(),
           contentWidth = contentBounds.width();
-        contentVisible && (height += contentHeight);
+        contentVisible && (height += contentHeight), this.titleShape = titleShape, this.contentShape = contentShape;
         var popTipWidth = max$1(titleWidth + parsedPadding[1] + parsedPadding[3], contentWidth + parsedPadding[1] + parsedPadding[3]);
         popTipWidth > maxWidth ? popTipWidth = maxWidth : popTipWidth < minWidth && (popTipWidth = minWidth);
         var poptipHeight = parsedPadding[0] + parsedPadding[2] + height;
         var bgVisible = panel.visible,
-          backgroundStyle = __rest$v(panel, ["visible"]),
-          symbolSize = null !== (_a = backgroundStyle.size) && void 0 !== _a ? _a : 12,
+          square = panel.square,
+          backgroundStyle = __rest$v(panel, ["visible", "square"]);
+        if (square) {
+          var maxWH = max$1(popTipWidth, poptipHeight);
+          popTipWidth = maxWH;
+          var deltaH = maxWH - poptipHeight;
+          poptipHeight = maxWH, titleShape.setAttributes({
+            dy: deltaH / 2
+          }), contentShape.setAttributes({
+            dy: deltaH / 2
+          });
+        }
+        var symbolSize = null !== (_a = backgroundStyle.size) && void 0 !== _a ? _a : 12,
           spaceSize = isArray$3(symbolSize) ? [symbolSize[0] + (null !== (_b = backgroundStyle.space) && void 0 !== _b ? _b : 0), symbolSize[1] + (null !== (_c = backgroundStyle.space) && void 0 !== _c ? _c : 0)] : symbolSize + (null !== (_d = backgroundStyle.space) && void 0 !== _d ? _d : 0),
           lineWidth = null !== (_e = backgroundStyle.lineWidth) && void 0 !== _e ? _e : 1,
           range = this.stage ? [null !== (_f = this.stage.viewWidth) && void 0 !== _f ? _f : this.stage.width, null !== (_g = this.stage.viewHeight) && void 0 !== _g ? _g : this.stage.height] : void 0;
@@ -37004,42 +37317,76 @@
         var maxBBoxI,
           maxBBoxSize = -1 / 0;
         for (var i = 0; i < this.positionList.length + 1; i++) {
-          var p = layout ? this.positionList[i === this.positionList.length ? maxBBoxI : i] : position,
-            _this$getAngleAndOffs = this.getAngleAndOffset(p, popTipWidth, poptipHeight, isArray$3(spaceSize) ? spaceSize : [spaceSize, spaceSize - lineWidth]),
+          var p = layout ? this.positionList[i === this.positionList.length ? maxBBoxI : i] : position;
+          var symbolType = "arrow2Left",
+            offsetX = (isArray$3(symbolSize) ? symbolSize[0] : symbolSize) / 4,
+            offsetY = 0;
+          "top" === p || "bottom" === p || "left" === p || "right" === p ? symbolType = "arrow2Left" : "concise" === triangleMode && (symbolType = conciseSymbolMap[p], offsetX = ["tl", "bl", "rt", "rb"].includes(position) ? (isArray$3(symbolSize) ? symbolSize[0] : symbolSize) / 2 : -(isArray$3(symbolSize) ? symbolSize[0] : symbolSize) / 2, offsetY = ["tl", "tr", "lb", "rb"].includes(position) ? -(isArray$3(symbolSize) ? symbolSize[1] : symbolSize) / 2 : (isArray$3(symbolSize) ? symbolSize[1] : symbolSize) / 2);
+          var _this$getAngleAndOffs = this.getAngleAndOffset(p, popTipWidth, poptipHeight, isArray$3(spaceSize) ? spaceSize : [spaceSize, spaceSize - lineWidth], symbolType),
             angle = _this$getAngleAndOffs.angle,
             offset = _this$getAngleAndOffs.offset;
-            _this$getAngleAndOffs.rectOffset;
           if (isBoolean$3(bgVisible)) {
-            var offsetX = (isArray$3(symbolSize) ? symbolSize[0] : symbolSize) / 4,
-              bgSymbol = group.createOrUpdateChild("poptip-symbol-panel", Object.assign(Object.assign({}, backgroundStyle), {
-                visible: bgVisible && (contentVisible || titleVisible),
-                x: offsetX,
-                y: 0,
-                strokeBoundsBuffer: -1,
-                boundsPadding: -2,
-                anchor: [0, 0],
-                symbolType: "arrow2Left",
-                angle: angle,
-                dx: offset[0],
-                dy: offset[1],
-                size: symbolSize,
-                zIndex: -9
-              }), "symbol");
-            isEmpty(null == state ? void 0 : state.panel) || (bgSymbol.states = state.panel);
-            var bgRect = group.createOrUpdateChild("poptip-rect-panel", Object.assign(Object.assign({}, backgroundStyle), {
+            var 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: symbolType,
+              angle: angle,
+              dx: offset[0],
+              dy: offset[1] - (null !== (_j = backgroundStyle.space) && void 0 !== _j ? _j : 0),
+              size: symbolSize,
+              zIndex: 9
+            }), "symbol");
+            var bgRect = void 0;
+            isEmpty(null == state ? void 0 : state.panel) || (bgSymbol.states = state.panel), bgRect = panel.panelSymbolType ? group.createOrUpdateChild("poptip-rect-panel", Object.assign(Object.assign({}, backgroundStyle), {
+              visible: bgVisible && (contentVisible || titleVisible),
+              x: 0,
+              y: 0,
+              symbolType: "rect",
+              size: [popTipWidth, poptipHeight],
+              zIndex: -8
+            }), "symbol") : group.createOrUpdateChild("poptip-rect-panel", Object.assign(Object.assign({}, backgroundStyle), {
               visible: bgVisible && (contentVisible || titleVisible),
               x: 0,
               y: 0,
               width: popTipWidth,
               height: poptipHeight,
               zIndex: -8
-            }), "rect");
-            isEmpty(null == state ? void 0 : state.panel) || (bgRect.states = state.panel);
+            }), "rect"), isEmpty(null == state ? void 0 : state.panel) || (bgRect.states = state.panel);
           }
           if (group.setAttributes({
             x: -offset[0] + dx,
-            y: -offset[1] + dy
-          }), !layout || !range) break;
+            y: -offset[1] + dy,
+            anchor: [offsetX, offsetY]
+          }), logoSymbol) {
+            var _logoSymbol$size = logoSymbol.size,
+              size = _logoSymbol$size === void 0 ? 12 : _logoSymbol$size,
+              sizeArray = isArray$3(size) ? size : [size, size];
+            "auto" === sizeArray[1] && (sizeArray[1] = poptipHeight), "auto" === sizeArray[0] && (sizeArray[0] = poptipHeight);
+            var sizeW = sizeArray[0];
+            group.createOrUpdateChild("poptip-logo", Object.assign(Object.assign({}, logoSymbol), {
+              x: 0,
+              y: poptipHeight / 2,
+              visible: bgVisible && (contentVisible || titleVisible),
+              zIndex: 10,
+              size: sizeArray
+            }), "symbol"), group.setAttributes({
+              x: -offset[0] + dx + sizeW / 2,
+              y: -offset[1] + dy
+            }), logoText && 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) break;
           {
             _tBounds.setValue(0, 0, popTipWidth, poptipHeight).transformWithMatrix(group.globalTransMatrix);
             var _b2 = _tBounds,
@@ -37047,91 +37394,125 @@
             if (rectInsideAnotherRect(_b2, stageBounds, !1)) break;
             {
               var bbox = getRectIntersect(_b2, stageBounds, !1),
-                size = (bbox.x2 - bbox.x1) * (bbox.y2 - bbox.y1);
-              size > maxBBoxSize && (maxBBoxSize = size, maxBBoxI = i);
+                _size = (bbox.x2 - bbox.x1) * (bbox.y2 - bbox.y1);
+              _size > maxBBoxSize && (maxBBoxSize = _size, maxBBoxI = i);
             }
           }
         }
       }
     }, {
       key: "getAngleAndOffset",
-      value: function getAngleAndOffset(position, width, height, size) {
-        var sizeH = size[1] / 2;
+      value: function getAngleAndOffset(position, width, height, size, symbolType) {
+        var sizeH = "arrow2Left" === symbolType ? size[1] / 2 : size[1];
         switch (position) {
           case "tl":
             return {
-              angle: pi$1 / 2 * 3,
-              offset: [width / 4, height + sizeH],
-              rectOffset: [-width / 4, -height - size[1]]
+              angle: "arrow2Left" === symbolType ? pi$1 / 2 * 3 : 0,
+              offset: "arrow2Left" === symbolType ? [width / 4, height + sizeH] : [0, height + sizeH]
             };
           case "top":
             return {
               angle: pi$1 / 2 * 3,
-              offset: [width / 2, height + sizeH],
-              rectOffset: [0, -height - size[1]]
+              offset: [width / 2, height + sizeH]
             };
           case "tr":
             return {
-              angle: pi$1 / 2 * 3,
-              offset: [width / 4 * 3, height + sizeH],
-              rectOffset: [width / 4 * 3, -height - size[1]]
+              angle: "arrow2Left" === symbolType ? pi$1 / 2 * 3 : 0,
+              offset: "arrow2Left" === symbolType ? [width / 4 * 3, height + sizeH] : [width, height + sizeH]
             };
           case "rt":
             return {
               angle: 0,
-              offset: [-sizeH, height / 5],
-              rectOffset: [width / 4 * 3, -height - size[1]]
+              offset: "arrow2Left" === symbolType ? [-sizeH, height / 5] : [-sizeH, 0]
             };
           case "right":
             return {
               angle: 0,
-              offset: [-sizeH, height / 2],
-              rectOffset: [width / 4 * 3, -height - size[1]]
+              offset: [-sizeH, height / 2]
             };
           case "rb":
             return {
               angle: 0,
-              offset: [-sizeH, height / 5 * 4],
-              rectOffset: [width / 4 * 3, -height - size[1]]
+              offset: "arrow2Left" === symbolType ? [-sizeH, height / 5 * 4] : [-sizeH, height]
             };
           case "bl":
             return {
-              angle: pi$1 / 2,
-              offset: [width / 4, -sizeH],
-              rectOffset: [-width / 4, -height - size[1]]
+              angle: "arrow2Left" === symbolType ? pi$1 / 2 : 0,
+              offset: "arrow2Left" === symbolType ? [width / 4, -sizeH] : [0, -sizeH]
             };
           case "bottom":
             return {
               angle: pi$1 / 2,
-              offset: [width / 2, -sizeH],
-              rectOffset: [0, -height - size[1]]
+              offset: [width / 2, -sizeH]
             };
           case "br":
             return {
-              angle: pi$1 / 2,
-              offset: [width / 4 * 3, -sizeH],
-              rectOffset: [width / 4 * 3, -height - size[1]]
+              angle: "arrow2Left" === symbolType ? pi$1 / 2 : 0,
+              offset: "arrow2Left" === symbolType ? [width / 4 * 3, -sizeH] : [width, -sizeH]
             };
           case "lt":
             return {
-              angle: pi$1,
-              offset: [width + sizeH, height / 5],
-              rectOffset: [-width / 4, -height - size[1]]
+              angle: "arrow2Left" === symbolType ? pi$1 : 0,
+              offset: "arrow2Left" === symbolType ? [width + sizeH, height / 5] : [width + sizeH, 0]
             };
           case "left":
             return {
               angle: pi$1,
-              offset: [width + sizeH, height / 2],
-              rectOffset: [0, -height - size[1]]
+              offset: [width + sizeH, height / 2]
             };
           case "lb":
             return {
-              angle: pi$1,
-              offset: [width + sizeH, height / 5 * 4],
-              rectOffset: [width / 4 * 3, -height - size[1]]
+              angle: "arrow2Left" === symbolType ? pi$1 : 0,
+              offset: "arrow2Left" === symbolType ? [width + sizeH, height / 5 * 4] : [width + sizeH, height]
             };
         }
       }
+    }, {
+      key: "appearAnimate",
+      value: function appearAnimate(animateConfig) {
+        var _animateConfig$durati = animateConfig.duration,
+          duration = _animateConfig$durati === void 0 ? 1e3 : _animateConfig$durati,
+          _animateConfig$easing = animateConfig.easing,
+          easing = _animateConfig$easing === void 0 ? "quadOut" : _animateConfig$easing;
+        if (this.setAttributes({
+          scaleX: 0,
+          scaleY: 0
+        }), this.animate().to({
+          scaleX: 1,
+          scaleY: 1
+        }, duration / 3 * 2, easing), this.titleShape && this.titleShape.animate().play(new InputText({
+          text: ""
+        }, {
+          text: this.titleShape.attribute.text
+        }, duration, easing)), this.contentShape && this.contentShape.animate().play(new InputText({
+          text: ""
+        }, {
+          text: this.contentShape.attribute.text
+        }, duration, easing)), animateConfig.wave) {
+          var dur = duration / 6;
+          this.group.animate().to({
+            angle: animateConfig.wave
+          }, dur, easing).to({
+            angle: -animateConfig.wave
+          }, 2 * dur, easing).to({
+            angle: animateConfig.wave
+          }, 2 * dur, easing).to({
+            angle: 0
+          }, dur, easing);
+        }
+      }
+    }, {
+      key: "disappearAnimate",
+      value: function disappearAnimate(animateConfig) {
+        var _animateConfig$durati2 = animateConfig.duration,
+          duration = _animateConfig$durati2 === void 0 ? 1e3 : _animateConfig$durati2,
+          _animateConfig$easing2 = animateConfig.easing,
+          easing = _animateConfig$easing2 === void 0 ? "quadOut" : _animateConfig$easing2;
+        this.animate().to({
+          scaleX: 0,
+          scaleY: 0
+        }, duration, easing);
+      }
     }]);
   }(AbstractComponent);
   PopTip.defaultAttributes = {
@@ -37151,6 +37532,7 @@
       textAlign: "left",
       textBaseline: "top"
     },
+    panel: {},
     maxWidthPercent: .8,
     space: 8,
     padding: 10
@@ -50925,6 +51307,312 @@
     clipRange: 0
   };
 
+  var StoryLabelItem = /*#__PURE__*/function (_AbstractComponent) {
+    function StoryLabelItem(attributes, options) {
+      _classCallCheck(this, StoryLabelItem);
+      return _callSuper(this, StoryLabelItem, [(null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, StoryLabelItem.defaultAttributes, attributes)]);
+    }
+    _inherits(StoryLabelItem, _AbstractComponent);
+    return _createClass(StoryLabelItem, [{
+      key: "render",
+      value: function render() {
+        var _this$attribute = this.attribute,
+          contentOffsetX = _this$attribute.contentOffsetX,
+          contentOffsetY = _this$attribute.contentOffsetY,
+          lineStyle = _this$attribute.lineStyle,
+          symbolStartStyle = _this$attribute.symbolStartStyle,
+          symbolEndStyle = _this$attribute.symbolEndStyle,
+          symbolStartOuterStyle = _this$attribute.symbolStartOuterStyle,
+          titleTopText = _this$attribute.titleTop,
+          titleBottomText = _this$attribute.titleBottom,
+          titleTopStyle = _this$attribute.titleTopStyle,
+          titleBottomStyle = _this$attribute.titleBottomStyle,
+          titleSpace = _this$attribute.titleSpace,
+          titleTopPanelStyle = _this$attribute.titleTopPanelStyle,
+          titleBottomPanelStyle = _this$attribute.titleBottomPanelStyle,
+          theme = _this$attribute.theme,
+          group = this.createOrUpdateChild("label-item-container", {
+            x: 0,
+            y: 0,
+            zIndex: 1
+          }, "group"),
+          symbolStart = group.createOrUpdateChild("label-item-symbol-start", Object.assign({
+            x: 0,
+            y: 0
+          }, symbolStartStyle), "symbol"),
+          symbolEnd = group.createOrUpdateChild("label-item-symbol-end", Object.assign({
+            x: contentOffsetX,
+            y: contentOffsetY
+          }, symbolEndStyle), "symbol"),
+          symbolStartOut = group.createOrUpdateChild("label-item-symbol-start-out", Object.assign({
+            x: 0,
+            y: 0
+          }, symbolStartOuterStyle), "symbol"),
+          spaceW = titleSpace[0],
+          spaceH = titleSpace[1],
+          titleTopGroup = group.createOrUpdateChild("label-item-title-top-group", {
+            x: contentOffsetX,
+            y: contentOffsetY,
+            clip: !0
+          }, "group"),
+          titleTop = titleTopGroup.createOrUpdateChild("label-item-title-top", Object.assign(Object.assign({
+            x: spaceW,
+            y: -spaceH,
+            text: titleTopText
+          }, titleTopStyle), {
+            textBaseline: "bottom",
+            textAlign: "left",
+            zIndex: 10
+          }), "text"),
+          titleTopBounds = titleTop.AABBBounds;
+        contentOffsetX > 0 && titleTopGroup.setAttributes({
+          x: contentOffsetX - titleTopBounds.width() - 2 * spaceW
+        }), titleTopGroup.setAttributes({
+          width: titleTopBounds.width() + 2 * spaceW,
+          height: -titleTopBounds.height() - 2 * spaceH
+        });
+        var titleTopPanel = titleTopGroup.createOrUpdateChild("label-item-title-top-panel", Object.assign(Object.assign({}, titleTopPanelStyle), {
+          x: titleTopPanelStyle.padding.left,
+          y: (titleTopGroup.attribute.height > 0 ? 0 : titleTopGroup.attribute.height) + titleTopPanelStyle.padding.top,
+          width: titleTopGroup.attribute.width - titleTopPanelStyle.padding.left - titleTopPanelStyle.padding.right,
+          height: (titleTopGroup.attribute.height > 0 ? 1 : -1) * titleTopGroup.attribute.height - titleTopPanelStyle.padding.bottom - titleTopPanelStyle.padding.top,
+          scaleCenter: [titleTopGroup.attribute.width / 2, titleTopGroup.attribute.height / 2]
+        }), "rect");
+        this._titleTopPanel = titleTopPanel;
+        var titleBottomGroup = group.createOrUpdateChild("label-item-title-bottom-group", {
+            x: contentOffsetX,
+            y: contentOffsetY,
+            clip: !0
+          }, "group"),
+          titleBottom = titleBottomGroup.createOrUpdateChild("label-item-title-bottom", Object.assign(Object.assign({
+            x: spaceW,
+            y: spaceH,
+            text: titleBottomText
+          }, titleBottomStyle), {
+            textBaseline: "top",
+            textAlign: "left",
+            zIndex: 10
+          }), "text"),
+          titleBottomBounds = titleBottom.AABBBounds;
+        contentOffsetX > 0 && titleBottomGroup.setAttributes({
+          x: contentOffsetX - titleBottomBounds.width() - 2 * spaceW
+        }), titleBottomGroup.setAttributes({
+          width: titleBottomBounds.width() + 2 * spaceW,
+          height: titleTopBounds.height() + 2 * spaceH
+        });
+        var titleBottomPanel = titleBottomGroup.createOrUpdateChild("label-item-title-bottom-panel", Object.assign(Object.assign({}, titleBottomPanelStyle), {
+          x: titleBottomPanelStyle.padding.left,
+          y: (titleBottomGroup.attribute.height > 0 ? 0 : titleBottomGroup.attribute.height) + titleBottomPanelStyle.padding.top,
+          width: titleBottomGroup.attribute.width - titleBottomPanelStyle.padding.left - titleBottomPanelStyle.padding.right,
+          height: (titleBottomGroup.attribute.height > 0 ? 1 : -1) * titleBottomGroup.attribute.height - titleBottomPanelStyle.padding.bottom - titleBottomPanelStyle.padding.top,
+          scaleCenter: [titleBottomGroup.attribute.width / 2, titleBottomGroup.attribute.height / 2]
+        }), "rect");
+        this._titleBottomPanel = titleBottomPanel;
+        var maxTextWidth = Math.max(titleTop.AABBBounds.width(), titleBottom.AABBBounds.width()) + 2 * spaceW,
+          points = [{
+            x: 0,
+            y: 0
+          }, contentOffsetX > 0 ? {
+            x: contentOffsetX - maxTextWidth,
+            y: contentOffsetY
+          } : {
+            x: contentOffsetX + maxTextWidth,
+            y: contentOffsetY
+          }, {
+            x: contentOffsetX,
+            y: contentOffsetY
+          }];
+        if ("simple" === theme) {
+          points.pop();
+          var p = points[1];
+          symbolEnd.setAttributes(p);
+        }
+        var line = group.createOrUpdateChild("label-item-line", Object.assign(Object.assign({
+          x: 0,
+          y: 0
+        }, lineStyle), {
+          points: points
+        }), "line");
+        this._symbolEnd = symbolEnd, this._symbolStart = symbolStart, this._symbolStartOuter = symbolStartOut, this._titleTop = titleTop, this._titleBottom = titleBottom, this._line = line;
+      }
+    }, {
+      key: "appearAnimate",
+      value: function appearAnimate(animateConfig) {
+        var _animateConfig$durati = animateConfig.duration,
+          duration = _animateConfig$durati === void 0 ? 1e3 : _animateConfig$durati,
+          _animateConfig$easing = animateConfig.easing,
+          easing = _animateConfig$easing === void 0 ? "quadOut" : _animateConfig$easing,
+          _animateConfig$symbol = animateConfig.symbolStartOuterType,
+          symbolStartOuterType = _animateConfig$symbol === void 0 ? "scale" : _animateConfig$symbol,
+          _animateConfig$titleT = animateConfig.titleType,
+          titleType = _animateConfig$titleT === void 0 ? "typewriter" : _animateConfig$titleT,
+          _animateConfig$titleP = animateConfig.titlePanelType,
+          titlePanelType = _animateConfig$titleP === void 0 ? "scale" : _animateConfig$titleP,
+          symbolTime = duration / 10;
+        var symbolStartOuterFrom, symbolStartOuterTo;
+        if (this._symbolStart.setAttributes({
+          scaleX: 0,
+          scaleY: 0
+        }), this._symbolStart.animate().to({
+          scaleX: 1,
+          scaleY: 1
+        }, 5 * symbolTime, easing), "scale" === symbolStartOuterType ? (symbolStartOuterFrom = {
+          scaleX: 0,
+          scaleY: 0
+        }, symbolStartOuterTo = {
+          scaleX: 1,
+          scaleY: 1
+        }) : (symbolStartOuterFrom = {
+          clipRange: 0
+        }, symbolStartOuterTo = {
+          clipRange: 1
+        }), this._symbolStartOuter.setAttributes(symbolStartOuterFrom), this._symbolStartOuter.animate().to(symbolStartOuterTo, 5 * symbolTime, easing), this._symbolEnd.setAttributes({
+          scaleX: 0,
+          scaleY: 0
+        }), this._symbolEnd.animate().wait(8 * symbolTime).to({
+          scaleX: 1,
+          scaleY: 1
+        }, 2 * symbolTime, easing), this._line.setAttributes({
+          clipRange: 0
+        }), this._line.animate().to({
+          clipRange: 1
+        }, 9 * symbolTime, easing), "typewriter" === titleType) {
+          var titleTopText = this._titleTop.attribute.text;
+          this._titleTop.setAttributes({
+            text: ""
+          }), this._titleTop.animate().wait(5 * symbolTime).play(new InputText({
+            text: ""
+          }, {
+            text: titleTopText
+          }, 4 * symbolTime, "linear"));
+          var titleBottomText = this._titleBottom.attribute.text;
+          this._titleBottom.setAttributes({
+            text: ""
+          }), this._titleBottom.animate().wait(5 * symbolTime).play(new InputText({
+            text: ""
+          }, {
+            text: titleBottomText
+          }, 4 * symbolTime, "linear"));
+        } else this._titleTop.setAttributes({
+          dy: this._titleTop.AABBBounds.height() + 10
+        }), this._titleTop.animate().wait(5 * symbolTime).to({
+          dy: 0
+        }, 4 * symbolTime, "linear"), this._titleBottom.setAttributes({
+          dy: -(10 + this._titleBottom.AABBBounds.height())
+        }), this._titleBottom.animate().wait(5 * symbolTime).to({
+          dy: 0
+        }, 4 * symbolTime, "linear");
+        "scale" === titlePanelType ? [this._titleTopPanel, this._titleBottomPanel].forEach(function (panel) {
+          var scaleX = panel.attribute.scaleX;
+          panel.setAttributes({
+            scaleX: 0
+          }), panel.animate().to({
+            scaleX: scaleX
+          }, duration, "circInOut");
+        }) : "stroke" === titlePanelType && [this._titleTopPanel, this._titleBottomPanel].forEach(function (panel) {
+          var b = panel.AABBBounds,
+            totalLen = 2 * (b.width() + b.height());
+          panel.setAttributes({
+            lineDash: [0, 10 * totalLen]
+          }), panel.animate().to({
+            lineDash: [totalLen, 10 * totalLen]
+          }, duration, "quadOut");
+        });
+      }
+    }, {
+      key: "disappearAnimate",
+      value: function disappearAnimate(animateConfig) {
+        if ("scale" === animateConfig.mode) {
+          var _animateConfig$durati2 = animateConfig.duration,
+            duration = _animateConfig$durati2 === void 0 ? 1e3 : _animateConfig$durati2,
+            _animateConfig$easing2 = animateConfig.easing,
+            easing = _animateConfig$easing2 === void 0 ? "quadOut" : _animateConfig$easing2;
+          this.animate().to({
+            scaleX: 0,
+            scaleY: 0
+          }, duration, easing);
+        } else {
+          var _animateConfig$durati3 = animateConfig.duration,
+            _duration = _animateConfig$durati3 === void 0 ? 1e3 : _animateConfig$durati3,
+            _animateConfig$easing3 = animateConfig.easing,
+            _easing = _animateConfig$easing3 === void 0 ? "quadOut" : _animateConfig$easing3;
+          this._line.animate().to({
+            clipRange: 0
+          }, _duration, _easing), this._symbolStart.animate().wait(_duration / 2).to({
+            scaleX: 0,
+            scaleY: 0
+          }, _duration / 2, _easing), this._symbolEnd.animate().to({
+            scaleX: 0,
+            scaleY: 0
+          }, _duration, _easing), this._titleTop.animate().to({
+            dy: this._titleTop.AABBBounds.height() + 10
+          }, _duration / 2, _easing), this._titleBottom.animate().to({
+            dy: -(10 + this._titleBottom.AABBBounds.height())
+          }, _duration / 2, _easing), this._symbolStartOuter.animate().wait(_duration / 2).to({
+            clipRange: 0
+          }, _duration / 2, _easing), this._titleTopPanel.animate().to({
+            scaleX: 0
+          }, _duration, "circInOut"), this._titleBottomPanel.animate().to({
+            scaleX: 0
+          }, _duration, "circInOut");
+        }
+      }
+    }]);
+  }(AbstractComponent);
+  StoryLabelItem.defaultAttributes = {
+    contentOffsetX: 100,
+    contentOffsetY: -60,
+    titleTopStyle: {
+      fontSize: 12,
+      fill: "white"
+    },
+    titleBottomStyle: {
+      fontSize: 12,
+      fill: "white"
+    },
+    lineStyle: {
+      stroke: "white",
+      lineWidth: 1
+    },
+    symbolStartStyle: {
+      symbolType: "circle",
+      size: 3,
+      fill: "white"
+    },
+    symbolEndStyle: {
+      symbolType: "circle",
+      size: 3,
+      fill: "white"
+    },
+    symbolStartOuterStyle: {
+      symbolType: "M0.5,0A0.5,0.5,0,1,1,-0.5,0A0.5,0.5,0,1,1,0.5,0",
+      size: 8,
+      stroke: "white"
+    },
+    titleSpace: [2, 2],
+    titleTopPanelStyle: {
+      visible: !1,
+      padding: {
+        left: 0,
+        right: 0,
+        bottom: 2,
+        top: 2
+      },
+      cornerRadius: 3
+    },
+    titleBottomPanelStyle: {
+      visible: !1,
+      padding: {
+        left: 0,
+        right: 0,
+        bottom: 2,
+        top: 2
+      },
+      cornerRadius: 3
+    },
+    theme: "default"
+  };
+
   var isClose = isNumberClose;
   function normalizeStartEndAngle(start, end) {
     var startAngle = 0,
@@ -55076,7 +55764,7 @@
     graphicItem && (graphicItem[BridgeElementKey] = null, graphicItem.release(), graphicItem.parent && graphicItem.parent.removeChild(graphicItem));
   };
 
-  var commonAttributes = ["fillOpacity"];
+  var commonAttributes$1 = ["fillOpacity"];
   var transformCommonAttribute = function transformCommonAttribute(graphicAttributes, changedKey, nextAttrs) {
     var _a;
     return "fillOpacity" === changedKey ? (graphicAttributes.fillOpacity = null !== (_a = nextAttrs.fillOpacity) && void 0 !== _a ? _a : 1, ["fillOpacity"]) : [];
@@ -55157,10 +55845,10 @@
             } else transform.transform(graphicAttributes, nextAttrs, null);
             tags[index] = !0, isTransformed = !0;
           }
-        }), isTransformed || (commonAttributes.includes(key) ? transformCommonAttribute(graphicAttributes, key, nextAttrs) : graphicAttributes[key] = nextAttrs[key]);
+        }), isTransformed || (commonAttributes$1.includes(key) ? transformCommonAttribute(graphicAttributes, key, nextAttrs) : graphicAttributes[key] = nextAttrs[key]);
       });
     } else changedKeys.forEach(function (key) {
-      commonAttributes.includes(key) ? transformCommonAttribute(graphicAttributes, key, nextAttrs) : graphicAttributes[key] = nextAttrs[key];
+      commonAttributes$1.includes(key) ? transformCommonAttribute(graphicAttributes, key, nextAttrs) : graphicAttributes[key] = nextAttrs[key];
     });
     return graphicAttributes;
   };
@@ -56367,6 +57055,84 @@
     filterType: "groupKey"
   };
 
+  var ElementHighlightByGraphicName = /*#__PURE__*/function (_ElementHighlight) {
+    function ElementHighlightByGraphicName(view, options) {
+      var _this;
+      _classCallCheck(this, ElementHighlightByGraphicName);
+      _this = _callSuper(this, ElementHighlightByGraphicName, [view, options]), _this.type = ElementHighlightByGraphicName.type, _this.handleStart = function (e) {
+        if (e && e.element && _this._marks.includes(e.element.mark)) {
+          if (_this.options.shouldStart ? _this.options.shouldStart(e) : _this._filterByName(e)) {
+            var itemKey = _this._parseTargetKey(e, e.element);
+            _this.start(itemKey);
+          }
+        }
+      }, _this.handleReset = function (e) {
+        e && e.element && _this._marks.includes(e.element.mark) && _this.reset();
+      }, _this.options = Object.assign({}, ElementHighlightByGraphicName.defaultOptions, options), _this._marks = view.getMarksBySelector(_this.options.selector);
+      return _this;
+    }
+    _inherits(ElementHighlightByGraphicName, _ElementHighlight);
+    return _createClass(ElementHighlightByGraphicName, [{
+      key: "_filterByName",
+      value: function _filterByName(e) {
+        var _a;
+        return !!(null === (_a = null == e ? void 0 : e.target) || void 0 === _a ? void 0 : _a.name);
+      }
+    }, {
+      key: "_parseTargetKey",
+      value: function _parseTargetKey(e, element) {
+        return e.target.name;
+      }
+    }, {
+      key: "start",
+      value: function start(itemKey) {
+        var _this2 = this;
+        isNil$1(itemKey) || this._marks.forEach(function (mark) {
+          mark.elements.forEach(function (el) {
+            var _a;
+            (null === (_a = el.getGraphicItem()) || void 0 === _a ? void 0 : _a.name) === itemKey ? el.updateStates(_defineProperty(_defineProperty({}, _this2.options.blurState, !1), _this2.options.highlightState, !0)) : el.updateStates(_defineProperty(_defineProperty({}, _this2.options.blurState, !0), _this2.options.highlightState, !1));
+          });
+        });
+      }
+    }, {
+      key: "reset",
+      value: function reset() {
+        var states = [this.options.blurState, this.options.highlightState];
+        this._marks.forEach(function (mark) {
+          mark.elements.forEach(function (el) {
+            el.removeState(states);
+          });
+        });
+      }
+    }]);
+  }(ElementHighlight);
+  ElementHighlightByGraphicName.type = "element-highlight-by-graphic-name";
+
+  var ElementSelectByGraphicName = /*#__PURE__*/function (_ElementSelect) {
+    function ElementSelectByGraphicName() {
+      var _this;
+      _classCallCheck(this, ElementSelectByGraphicName);
+      _this = _callSuper(this, ElementSelectByGraphicName, arguments), _this.type = ElementSelectByGraphicName.type;
+      return _this;
+    }
+    _inherits(ElementSelectByGraphicName, _ElementSelect);
+    return _createClass(ElementSelectByGraphicName, [{
+      key: "start",
+      value: function start(element) {
+        var _this2 = this;
+        var _a;
+        var name = null === (_a = element.getGraphicItem()) || void 0 === _a ? void 0 : _a.name;
+        name && this._marks.forEach(function (mark) {
+          mark.elements.forEach(function (el) {
+            var _a;
+            (null === (_a = el.getGraphicItem()) || void 0 === _a ? void 0 : _a.name) === name && _superPropGet(ElementSelectByGraphicName, "start", _this2, 3)([el]);
+          });
+        });
+      }
+    }]);
+  }(ElementSelect);
+  ElementSelectByGraphicName.type = "element-select-by-graphic-name";
+
   function getBandWidthOfScale(scale) {
     if (scale) return scale.type === ScaleEnum.Band ? scale.bandwidth() : scale.type === ScaleEnum.Point ? scale.step() : void 0;
   }
@@ -56464,6 +57230,12 @@
   var registerElementHighlightByName = function registerElementHighlightByName() {
     Factory.registerInteraction(ElementHighlightByName.type, ElementHighlightByName);
   };
+  var registerElementHighlightByGraphicName = function registerElementHighlightByGraphicName() {
+    Factory.registerInteraction(ElementHighlightByGraphicName.type, ElementHighlightByGraphicName);
+  };
+  var registerElementSelectByGraphicName = function registerElementSelectByGraphicName() {
+    Factory.registerInteraction(ElementSelectByGraphicName.type, ElementSelectByGraphicName);
+  };
 
   var parseOptionValue = function parseOptionValue(value, params) {
     return isGrammar(value) ? value.output() : value && isObject$4(value) ? isFunction$3(value.callback) ? function (datum) {
@@ -69542,6 +70314,20 @@
   }(BasePluginService);
 
   var svgSourceMap = new Map();
+  var svgDataSet;
+  function initSVGDataSet() {
+    svgDataSet || (svgDataSet = new DataSet(), registerDataSetInstanceParser(svgDataSet, "svg", svgParser));
+  }
+  function registerSVGSource(key, source) {
+    svgSourceMap.has(key) && warn("svg source key of '".concat(key, "' already exists, will be overwritten.")), initSVGDataSet();
+    var dataView = new DataView(svgDataSet);
+    dataView.parse(source, {
+      type: "svg"
+    }), svgSourceMap.set(key, dataView);
+  }
+  function unregisterSVGSource(key) {
+    svgSourceMap.has(key) ? svgSourceMap["delete"](key) : warn("map type of '".concat(key, "' does not exists."));
+  }
   function getSVGSource(type) {
     return svgSourceMap.get(type);
   }
@@ -108919,6 +109705,701 @@
     registerMosaicSeries(), Factory$1.registerChart(MosaicChart.type, MosaicChart);
   };
 
+  var PictogramChartSpecTransformer = /*#__PURE__*/function (_BaseChartSpecTransfo) {
+    function PictogramChartSpecTransformer() {
+      _classCallCheck(this, PictogramChartSpecTransformer);
+      return _callSuper(this, PictogramChartSpecTransformer, arguments);
+    }
+    _inherits(PictogramChartSpecTransformer, _BaseChartSpecTransfo);
+    return _createClass(PictogramChartSpecTransformer, [{
+      key: "_isValidSeries",
+      value: function _isValidSeries(type) {
+        return type === SeriesTypeEnum.pictogram;
+      }
+    }, {
+      key: "_getDefaultSeriesSpec",
+      value: function _getDefaultSeriesSpec(spec) {
+        return Object.assign(Object.assign({}, _superPropGet(PictogramChartSpecTransformer, "_getDefaultSeriesSpec", this, 3)([spec])), {
+          type: spec.type,
+          nameField: spec.nameField,
+          valueField: spec.valueField,
+          seriesField: spec.seriesField,
+          svg: spec.svg,
+          pictogram: spec.pictogram,
+          defaultFillColor: spec.defaultFillColor
+        });
+      }
+    }, {
+      key: "transformSpec",
+      value: function transformSpec(spec) {
+        var _this = this;
+        _superPropGet(PictogramChartSpecTransformer, "transformSpec", this, 3)([spec]), spec.region.forEach(function (r) {
+          r.coordinate = "geo";
+        });
+        var defaultSeriesSpec = this._getDefaultSeriesSpec(spec);
+        spec.series && 0 !== spec.series.length ? spec.series.forEach(function (s) {
+          _this._isValidSeries(s.type) && Object.keys(defaultSeriesSpec).forEach(function (k) {
+            k in s || (s[k] = defaultSeriesSpec[k]);
+          });
+        }) : spec.series = [defaultSeriesSpec];
+      }
+    }]);
+  }(BaseChartSpecTransformer);
+
+  var PictogramSeriesMark = Object.assign(Object.assign({}, baseSeriesMark), {
+    pictogram: {
+      name: "pictogram",
+      type: "group"
+    }
+  });
+
+  var PictogramSeriesSpecTransformer = /*#__PURE__*/function (_BaseSeriesSpecTransf) {
+    function PictogramSeriesSpecTransformer() {
+      _classCallCheck(this, PictogramSeriesSpecTransformer);
+      return _callSuper(this, PictogramSeriesSpecTransformer, arguments);
+    }
+    _inherits(PictogramSeriesSpecTransformer, _BaseSeriesSpecTransf);
+    return _createClass(PictogramSeriesSpecTransformer, [{
+      key: "_getDefaultSpecFromChart",
+      value: function _getDefaultSpecFromChart(chartSpec) {
+        var _a, _b, _c;
+        var spec = null !== (_a = _superPropGet(PictogramSeriesSpecTransformer, "_getDefaultSpecFromChart", this, 3)([chartSpec])) && void 0 !== _a ? _a : {},
+          svg = chartSpec.svg,
+          elements = null === (_c = null === (_b = svgSourceMap.get(svg)) || void 0 === _b ? void 0 : _b.latestData) || void 0 === _c ? void 0 : _c.elements;
+        if (elements && elements.length) {
+          elements.map(function (e) {
+            return e.name;
+          }).filter(function (n) {
+            return isValid$3(n);
+          }).forEach(function (name) {
+            chartSpec[name] && (spec[name] = chartSpec[name]);
+          });
+        }
+        return spec;
+      }
+    }]);
+  }(BaseSeriesSpecTransformer);
+
+  var PictogramSeriesTooltipHelper = /*#__PURE__*/function (_BaseSeriesTooltipHel) {
+    function PictogramSeriesTooltipHelper() {
+      var _this;
+      _classCallCheck(this, PictogramSeriesTooltipHelper);
+      _this = _callSuper(this, PictogramSeriesTooltipHelper, arguments), _this.dimensionTooltipTitleCallback = function (datum) {
+        var _a;
+        var series = _this.series;
+        return null !== (_a = _this._getDimensionData(datum)) && void 0 !== _a ? _a : series.getDatumName(datum);
+      }, _this.markTooltipValueCallback = function (datum, params) {
+        var measureFields = _this._seriesCacheInfo.measureFields;
+        if (measureFields[0] && datum.data) return datum.data[measureFields[0]];
+      }, _this.markTooltipKeyCallback = function (datum) {
+        var _a;
+        return null === (_a = datum.data) || void 0 === _a ? void 0 : _a[_this.series.getDimensionField()[0]];
+      };
+      return _this;
+    }
+    _inherits(PictogramSeriesTooltipHelper, _BaseSeriesTooltipHel);
+    return _createClass(PictogramSeriesTooltipHelper);
+  }(BaseSeriesTooltipHelper);
+
+  function isValidStrokeOrFill(attr) {
+    var _a;
+    return isValid$3(attr) && "none" !== attr && !(null === (_a = attr.includes) || void 0 === _a ? void 0 : _a.call(attr, "url"));
+  }
+  var getLineWidth = function getLineWidth(attributes) {
+      var strokeWidth = parseFloat(attributes.strokeWidth);
+      if (!isNaN(strokeWidth)) return strokeWidth;
+      var stroke = attributes.stroke;
+      return stroke && isValidStrokeOrFill(stroke) ? 1 : 0;
+    },
+    getFill = function getFill(attributes, defaultFill) {
+      var _a;
+      var fill = null !== (_a = attributes.fill) && void 0 !== _a ? _a : defaultFill;
+      return fill && isValidStrokeOrFill(fill) ? fill : void 0;
+    },
+    getStroke = function getStroke(attributes, defaultStroke) {
+      var _a;
+      var stroke = null !== (_a = attributes.stroke) && void 0 !== _a ? _a : defaultStroke;
+      return !(!stroke || !isValidStrokeOrFill(stroke)) && stroke;
+    },
+    commonAttributes = function commonAttributes(attributes) {
+      return Object.assign(Object.assign({}, attributes), {
+        x: parseFloat(attributes.x) || void 0,
+        y: parseFloat(attributes.y) || void 0,
+        fillStrokeOrder: !1,
+        fill: getFill(attributes),
+        lineWidth: getLineWidth(attributes),
+        stroke: getStroke(attributes)
+      });
+    };
+  var graphicAttributeTransform = {
+    group: function group(attributes) {
+      var common = commonAttributes(attributes);
+      return Object.assign(Object.assign({}, common), {
+        visibleAll: !1 !== common.visible
+      });
+    },
+    rule: function rule(attributes) {
+      return Object.assign(Object.assign({}, commonAttributes(attributes)), {
+        x: parseFloat(attributes.x1),
+        y: parseFloat(attributes.y1),
+        x1: parseFloat(attributes.x2),
+        y1: parseFloat(attributes.y2)
+      });
+    },
+    rect: function rect(attributes) {
+      return Object.assign(Object.assign({}, commonAttributes(attributes)), {
+        fill: getFill(attributes, "#000"),
+        width: parseFloat(attributes.width),
+        height: parseFloat(attributes.height)
+      });
+    },
+    polygon: function polygon(attributes) {
+      return Object.assign(Object.assign({}, commonAttributes(attributes)), {
+        fill: getFill(attributes, "#000"),
+        points: attributes.points.trim().split(/\s+/).map(function (pair) {
+          var _pair$split$map = pair.split(",").map(Number),
+            _pair$split$map2 = _slicedToArray(_pair$split$map, 2),
+            x = _pair$split$map2[0],
+            y = _pair$split$map2[1];
+          return {
+            x: x,
+            y: y
+          };
+        })
+      });
+    },
+    line: function line(attributes) {
+      return Object.assign(Object.assign({}, commonAttributes(attributes)), {
+        points: attributes.points.trim().split(/\s+/).map(function (pair) {
+          var _pair$split$map3 = pair.split(",").map(Number),
+            _pair$split$map4 = _slicedToArray(_pair$split$map3, 2),
+            x = _pair$split$map4[0],
+            y = _pair$split$map4[1];
+          return {
+            x: x,
+            y: y
+          };
+        })
+      });
+    },
+    path: function path(attributes) {
+      return Object.assign(Object.assign({}, commonAttributes(attributes)), {
+        path: attributes.d,
+        fillStrokeOrder: !1
+      });
+    },
+    arc: function arc(attributes) {
+      var _a;
+      return Object.assign(Object.assign({}, commonAttributes(attributes)), {
+        outerRadius: null !== (_a = attributes.r) && void 0 !== _a ? _a : attributes.ry,
+        x: parseFloat(attributes.cx),
+        y: parseFloat(attributes.cy),
+        startAngle: 0,
+        endAngle: 2 * Math.PI,
+        scaleX: parseFloat(attributes.rx) / parseFloat(attributes.ry) || 1,
+        fill: getFill(attributes, "#000")
+      });
+    },
+    text: function text(attributes, value) {
+      var _a, _b;
+      return Object.assign(Object.assign({}, commonAttributes(attributes)), {
+        text: value,
+        textAlign: null !== (_a = attributes.textAlign) && void 0 !== _a ? _a : "left",
+        textBaseLine: null !== (_b = attributes.textAnchor) && void 0 !== _b ? _b : "middle",
+        anchor: [0, 0],
+        fill: getFill(attributes, "#000")
+      });
+    }
+  };
+  var pictogram = function pictogram(data) {
+    var _a, _b;
+    if (!data || !data[0]) return {};
+    var elements = data[0].latestData.elements;
+    if (elements && elements.length) {
+      elements.forEach(function (el, index) {
+        var _a;
+        el[DEFAULT_DATA_INDEX] = index, el._uniqueId = "".concat(el.id, "-").concat(index), el.data = void 0;
+        var type = el.graphicType,
+          transform = el.transform;
+        var finalAttributes = {
+          visible: "hidden" !== el.attributes.visibility && "collapse" !== el.attributes.visibility
+        };
+        "text" === el.graphicType ? merge$2(finalAttributes, el._inheritStyle, null === (_a = el.parent) || void 0 === _a ? void 0 : _a._textGroupStyle, el.attributes) : "group" !== el.graphicType && merge$2(finalAttributes, el._inheritStyle, el.attributes), graphicAttributeTransform[type] ? el._finalAttributes = graphicAttributeTransform[type](finalAttributes, el.value) : el._finalAttributes = finalAttributes, transform && (el._finalAttributes.postMatrix = Object.assign({}, transform));
+      });
+      var texts = elements.filter(function (el) {
+        return "text" === el.tagName;
+      });
+      var _loop = function _loop() {
+        var textId = texts[i]._uniqueId,
+          children = elements.filter(function (el) {
+            var result = !1,
+              parent = el.parent;
+            for (; parent;) {
+              if (parent._uniqueId === textId) {
+                result = !0;
+                break;
+              }
+              parent = parent.parent;
+            }
+            return result;
+          });
+        if (children && children.length) {
+          var startX = null !== (_b = null === (_a = texts[i]._textGroupStyle) || void 0 === _a ? void 0 : _a.x) && void 0 !== _b ? _b : 0,
+            curX = startX;
+          for (var j = 0; j < children.length; j++) {
+            var currentChild = children[j];
+            if ("group" === currentChild.graphicType) curX = startX;else if (currentChild.value && void 0 === currentChild.parent._textGroupStyle.x) {
+              var lastText = children.slice(0, j).reverse().find(function (c) {
+                return "text" === c.graphicType && c.value;
+              });
+              if (lastText) {
+                curX += measureText(lastText.value, lastText._finalAttributes).width;
+              }
+              currentChild._finalAttributes.x = curX;
+            }
+          }
+        }
+      };
+      for (var i = 0; i < texts.length; i++) {
+        _loop();
+      }
+    }
+    return elements;
+  };
+
+  var PictogramSeries = /*#__PURE__*/function (_GeoSeries) {
+    function PictogramSeries() {
+      var _this;
+      _classCallCheck(this, PictogramSeries);
+      _this = _callSuper(this, PictogramSeries, arguments), _this.type = SeriesTypeEnum.pictogram;
+      return _this;
+    }
+    _inherits(PictogramSeries, _GeoSeries);
+    return _createClass(PictogramSeries, [{
+      key: "setAttrFromSpec",
+      value: function setAttrFromSpec() {
+        var _a, _b, _c;
+        _superPropGet(PictogramSeries, "setAttrFromSpec", this, 3)([]), this.svg = this._spec.svg, this._nameField = this._spec.nameField, this._valueField = this._spec.valueField, this.svg || null === (_a = this._option) || void 0 === _a || _a.onError("svg source is not specified !"), this._parsedSvgResult = null === (_b = getSVGSource(this.svg)) || void 0 === _b ? void 0 : _b.latestData, this._parsedSvgResult || null === (_c = this._option) || void 0 === _c || _c.onError("'".concat(this.svg, "' is not registered !"));
+      }
+    }, {
+      key: "getDatumCenter",
+      value: function getDatumCenter(datum) {
+        return [Number.NaN, Number.NaN];
+      }
+    }, {
+      key: "getDatumName",
+      value: function getDatumName(datum) {
+        return datum.name || datum._nameFromParent;
+      }
+    }, {
+      key: "getMarksWithoutRoot",
+      value: function getMarksWithoutRoot() {
+        var _this2 = this;
+        return this.getMarks().filter(function (m) {
+          return m.name && !m.name.includes("seriesGroup") && !m.name.includes("root") && m !== _this2._pictogramMark;
+        });
+      }
+    }, {
+      key: "_buildMarkAttributeContext",
+      value: function _buildMarkAttributeContext() {
+        _superPropGet(PictogramSeries, "_buildMarkAttributeContext", this, 3)([]), this._markAttributeContext.getTransformMatrix = this.getRootMatrix.bind(this), this._markAttributeContext.coordToPosition = this.coordToPosition.bind(this), this._markAttributeContext.dataToPosition = this.dataToPosition.bind(this);
+      }
+    }, {
+      key: "_defaultHoverConfig",
+      value: function _defaultHoverConfig(selector, finalHoverSpec) {
+        return {
+          seriesId: this.id,
+          regionId: this._region.id,
+          selector: selector,
+          type: "element-highlight-by-graphic-name",
+          trigger: finalHoverSpec.trigger,
+          triggerOff: "pointerout",
+          blurState: STATE_VALUE_ENUM.STATE_HOVER_REVERSE,
+          highlightState: STATE_VALUE_ENUM.STATE_HOVER
+        };
+      }
+    }, {
+      key: "_defaultSelectConfig",
+      value: function _defaultSelectConfig(selector, finalSelectSpec) {
+        var isMultiple = "multiple" === finalSelectSpec.mode,
+          triggerOff = isValid$3(finalSelectSpec.triggerOff) ? finalSelectSpec.triggerOff : isMultiple ? ["empty", "self"] : ["empty", finalSelectSpec.trigger];
+        return {
+          type: "element-select-by-graphic-name",
+          seriesId: this.id,
+          regionId: this._region.id,
+          selector: selector,
+          trigger: finalSelectSpec.trigger,
+          triggerOff: triggerOff,
+          reverseState: STATE_VALUE_ENUM.STATE_SELECTED_REVERSE,
+          state: STATE_VALUE_ENUM.STATE_SELECTED,
+          isMultiple: isMultiple
+        };
+      }
+    }, {
+      key: "initMark",
+      value: function initMark() {
+        var _this3 = this;
+        var _a;
+        if (this._pictogramMark = this._createMark(PictogramSeries.mark.pictogram, {
+          groupKey: this.getDimensionField()[0],
+          isSeriesMark: !0,
+          skipBeforeLayouted: !0,
+          dataView: this._mapViewData.getDataView(),
+          dataProductId: this._mapViewData.getProductId()
+        }, {
+          morph: shouldMarkDoMorph(this._spec, PictogramSeries.mark.pictogram.name)
+        }), this._pictogramMark) {
+          this._pictogramMark.setUserId(PictogramSeries.mark.pictogram.name);
+          var _iterator = _createForOfIteratorHelper(this._mapViewData.getDataView().latestData),
+            _step;
+          try {
+            var _loop = function _loop() {
+              var element = _step.value;
+              var type = element.graphicType,
+                name = element.name,
+                parent = element.parent,
+                id = element.id,
+                _nameFromParent = element._nameFromParent,
+                _uniqueId = element._uniqueId,
+                mark = _this3._createMark({
+                  type: type,
+                  name: null != name ? name : _nameFromParent
+                }, {
+                  groupKey: _uniqueId,
+                  isSeriesMark: !1,
+                  skipBeforeLayouted: !0,
+                  dataView: _this3._mapViewData.getDataView(),
+                  dataProductId: _this3._mapViewData.getProductId(),
+                  parent: null !== (_a = _this3._pictogramMark.getMarkInUserId(null == parent ? void 0 : parent._uniqueId)) && void 0 !== _a ? _a : _this3._pictogramMark
+                }, {
+                  morph: shouldMarkDoMorph(_this3._spec, PictogramSeries.mark.pictogram.name)
+                });
+              mark && (mark.setUserId(_uniqueId), "group" !== mark.type && mark.setMarkConfig({
+                graphicName: mark.name
+              }), mark.setTransform([{
+                type: "filter",
+                callback: function callback(datum) {
+                  return datum._uniqueId === _uniqueId;
+                }
+              }]));
+            };
+            for (_iterator.s(); !(_step = _iterator.n()).done;) {
+              _loop();
+            }
+          } catch (err) {
+            _iterator.e(err);
+          } finally {
+            _iterator.f();
+          }
+          this._initLabelMark();
+        }
+      }
+    }, {
+      key: "_initLabelMark",
+      value: function _initLabelMark() {
+        if (!0 !== this._spec.label.visible) return;
+        var labelMark = this._createMark(PictogramSeries.mark.label, {
+          isSeriesMark: !1,
+          parent: this._pictogramMark,
+          groupKey: "_uniqueId",
+          skipBeforeLayouted: !0,
+          depend: this.getMarksWithoutRoot()
+        });
+        labelMark && (this._labelMark = labelMark, this._labelMark.setDataView(this._mapViewData.getDataView()));
+      }
+    }, {
+      key: "initLabelMarkStyle",
+      value: function initLabelMarkStyle() {
+        var _this4 = this;
+        this._labelMark && this.setMarkStyle(this._labelMark, {
+          visible: function visible(d) {
+            return !!_this4._validElement(d);
+          },
+          x: function x(d) {
+            var _a;
+            return null === (_a = _this4.dataToPosition(d, !0)) || void 0 === _a ? void 0 : _a.x;
+          },
+          y: function y(d) {
+            var _a;
+            return null === (_a = _this4.dataToPosition(d, !0)) || void 0 === _a ? void 0 : _a.y;
+          },
+          text: function text(d) {
+            return d[_this4.nameField];
+          },
+          textAlign: "center",
+          textBaseline: "middle"
+        }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series);
+      }
+    }, {
+      key: "initMarkStyle",
+      value: function initMarkStyle() {
+        var _this5 = this;
+        var _this$_parsedSvgResul = this._parsedSvgResult,
+          root = _this$_parsedSvgResul.root,
+          viewBoxRect = _this$_parsedSvgResul.viewBoxRect,
+          elements = this._mapViewData.getDataView().latestData;
+        root && (this.setMarkStyle(this._pictogramMark, graphicAttributeTransform.group(root.attributes), "normal", AttributeLevel.Built_In), root.transform && this.setMarkStyle(this._pictogramMark, {
+          postMatrix: function postMatrix() {
+            return root.transform;
+          }
+        }, "normal", AttributeLevel.Built_In), viewBoxRect && this._pictogramMark.setMarkConfig({
+          clip: !0,
+          clipPath: [createRect(Object.assign(Object.assign({}, viewBoxRect), {
+            fill: !0
+          }))]
+        }));
+        var _iterator2 = _createForOfIteratorHelper(elements),
+          _step2;
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var element = _step2.value;
+            var _uniqueId = element._uniqueId,
+              attributes = element._finalAttributes,
+              mark = this._pictogramMark.getMarkInUserId(_uniqueId),
+              valid = this._validElement(element);
+            mark && (this.setMarkStyle(mark, {
+              keepStrokeScale: !0
+            }, "normal", AttributeLevel.Built_In), valid ? (this.initMarkStyleWithSpec(mark, merge$2({}, this._spec.pictogram, this._spec[mark.name])), this.setMarkStyle(mark, attributes, "normal", AttributeLevel.Series), mark.setPostProcess("fill", function (result, datum) {
+              return isValid$3(result) ? result : _this5._spec.defaultFillColor;
+            })) : (mark.setMarkConfig({
+              interactive: !1
+            }), this.setMarkStyle(mark, attributes, "normal", AttributeLevel.Built_In)));
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
+        this.initLabelMarkStyle();
+      }
+    }, {
+      key: "_validElement",
+      value: function _validElement(element) {
+        return element.name || element._nameFromParent;
+      }
+    }, {
+      key: "initTooltip",
+      value: function initTooltip() {
+        var _this6 = this;
+        this._tooltipHelper = new PictogramSeriesTooltipHelper(this), this.getMarksWithoutRoot().forEach(function (mark) {
+          mark && mark.name && _this6._tooltipHelper.activeTriggerSet.mark.add(mark);
+        });
+      }
+    }, {
+      key: "dataToPosition",
+      value: function dataToPosition(datum) {
+        var global = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+        if (!datum) return null;
+        var name = datum[this.nameField];
+        if (!name) return null;
+        var mark = this.getMarksWithoutRoot().filter(function (mark) {
+          return mark.name === name;
+        });
+        if (!mark || 0 === mark.length) return null;
+        var bounds = new Bounds$1();
+        global ? mark.forEach(function (m) {
+          bounds = bounds.union(m.getProduct().getGroupGraphicItem().globalAABBBounds);
+        }) : mark.forEach(function (m) {
+          bounds = bounds.union(m.getProduct().getBounds());
+        });
+        var point = {
+          x: (bounds.x1 + bounds.x2) / 2,
+          y: (bounds.y1 + bounds.y2) / 2
+        };
+        if (global) {
+          var _this$getLayoutStartP = this.getLayoutStartPoint(),
+            x = _this$getLayoutStartP.x,
+            y = _this$getLayoutStartP.y;
+          point.x -= x, point.y -= y;
+        }
+        return point;
+      }
+    }, {
+      key: "coordToPosition",
+      value: function coordToPosition(point) {
+        if (!point) return null;
+        var x = point.x,
+          y = point.y,
+          matrix = this.getRootMatrix();
+        if (!matrix) return null;
+        var position = {};
+        return matrix.getInverse().transformPoint({
+          x: x,
+          y: y
+        }, position), position;
+      }
+    }, {
+      key: "getRootMatrix",
+      value: function getRootMatrix() {
+        var _a;
+        return null === (_a = this.getPictogramRootGraphic()) || void 0 === _a ? void 0 : _a.transMatrix;
+      }
+    }, {
+      key: "getPictogramRootGraphic",
+      value: function getPictogramRootGraphic() {
+        var _a;
+        return null === (_a = this._pictogramMark.getProduct()) || void 0 === _a ? void 0 : _a.getGroupGraphicItem();
+      }
+    }, {
+      key: "initData",
+      value: function initData() {
+        var _this7 = this;
+        var _a, _b;
+        _superPropGet(PictogramSeries, "initData", this, 3)([]);
+        var parsedSvg = svgSourceMap.get(this.svg);
+        parsedSvg || null === (_a = this._option) || void 0 === _a || _a.onError("no valid svg found!");
+        var svgData = new DataView(this._dataSet, {
+          name: "pictogram_".concat(this.id, "_data")
+        });
+        registerDataSetInstanceTransform(this._dataSet, "pictogram", pictogram), registerDataSetInstanceTransform(this._dataSet, "lookup", lookup), svgData.parse([parsedSvg], {
+          type: "dataview"
+        }).transform({
+          type: "pictogram"
+        }).transform({
+          type: "lookup",
+          options: {
+            from: function from() {
+              return _this7.getViewData().latestData;
+            },
+            key: "name",
+            fields: this._nameField,
+            set: function set(a, b) {
+              b && (a.data = b);
+            }
+          }
+        }).transform({
+          type: "lookup",
+          options: {
+            from: function from() {
+              return _this7.getViewData().latestData;
+            },
+            key: "_nameFromParent",
+            fields: this._nameField,
+            set: function set(a, b) {
+              b && (a.data = b);
+            }
+          }
+        }), null === (_b = this._data) || void 0 === _b || _b.getDataView().target.addListener("change", svgData.reRunAllTransform), this._mapViewData = new SeriesData(this._option, svgData);
+      }
+    }, {
+      key: "mapViewDataUpdate",
+      value: function mapViewDataUpdate() {
+        this._mapViewData.updateData();
+      }
+    }, {
+      key: "onLayoutEnd",
+      value: function onLayoutEnd(ctx) {
+        var _a;
+        _superPropGet(PictogramSeries, "onLayoutEnd", this, 3)([ctx]), null === (_a = this._mapViewData) || void 0 === _a || _a.getDataView().reRunAllTransform();
+      }
+    }, {
+      key: "updateSVGSize",
+      value: function updateSVGSize() {
+        var _this$getLayoutRect = this.getLayoutRect(),
+          regionWidth = _this$getLayoutRect.width,
+          regionHeight = _this$getLayoutRect.height,
+          regionCenterX = regionWidth / 2,
+          regionCenterY = regionHeight / 2,
+          root = this.getPictogramRootGraphic();
+        if (root) {
+          var bounds = root.AABBBounds,
+            _root$AABBBounds = root.AABBBounds,
+            x1 = _root$AABBBounds.x1,
+            x2 = _root$AABBBounds.x2,
+            y1 = _root$AABBBounds.y1,
+            y2 = _root$AABBBounds.y2,
+            rootCenterX = (x1 + x2) / 2,
+            rootCenterY = (y1 + y2) / 2,
+            scaleX = regionWidth / bounds.width(),
+            scaleY = regionHeight / bounds.height(),
+            scale = Math.min(scaleX, scaleY);
+          root.scale(scale, scale, {
+            x: rootCenterX,
+            y: rootCenterY
+          }), root.translate(regionCenterX - rootCenterX, regionCenterY - rootCenterY);
+        }
+      }
+    }, {
+      key: "initEvent",
+      value: function initEvent() {
+        var _a;
+        _superPropGet(PictogramSeries, "initEvent", this, 3)([]), null === (_a = this._mapViewData.getDataView()) || void 0 === _a || _a.target.addListener("change", this.mapViewDataUpdate.bind(this)), this.event.on(HOOK_EVENT.AFTER_MARK_LAYOUT_END, this.updateSVGSize.bind(this));
+      }
+    }, {
+      key: "handleZoom",
+      value: function handleZoom(e) {
+        var scale = e.scale,
+          scaleCenter = e.scaleCenter;
+        if (1 === scale) return;
+        var root = this.getPictogramRootGraphic();
+        root && (root.attribute.postMatrix || root.setAttributes({
+          postMatrix: new Matrix()
+        }), root.scale(scale, scale, scaleCenter));
+      }
+    }, {
+      key: "handlePan",
+      value: function handlePan(e) {
+        var delta = e.delta;
+        if (0 === delta[0] && 0 === delta[1]) return;
+        var root = this.getPictogramRootGraphic();
+        root && (root.attribute.postMatrix || root.setAttributes({
+          postMatrix: new Matrix()
+        }), root.translate(delta[0], delta[1]));
+      }
+    }, {
+      key: "getMarkData",
+      value: function getMarkData(datum) {
+        var _a;
+        return null !== (_a = datum.data) && void 0 !== _a ? _a : {};
+      }
+    }, {
+      key: "getMeasureField",
+      value: function getMeasureField() {
+        return [this.valueField];
+      }
+    }, {
+      key: "getDimensionField",
+      value: function getDimensionField() {
+        return [this.nameField];
+      }
+    }, {
+      key: "_getSeriesInfo",
+      value: function _getSeriesInfo(field, keys) {
+        var _this8 = this;
+        var defaultShapeType = this.getDefaultShapeType();
+        return keys.map(function (key) {
+          return {
+            key: key,
+            originalKey: key,
+            style: _this8.getSeriesStyle({
+              data: _defineProperty({}, field, key)
+            }),
+            shapeType: defaultShapeType
+          };
+        });
+      }
+    }]);
+  }(GeoSeries);
+  PictogramSeries.type = SeriesTypeEnum.pictogram, PictogramSeries.mark = PictogramSeriesMark, PictogramSeries.transformerConstructor = PictogramSeriesSpecTransformer;
+  var registerPictogramSeries = function registerPictogramSeries() {
+    Factory$1.registerSeries(PictogramSeries.type, PictogramSeries), Factory$1.registerImplement("registerSVG", registerSVGSource), Factory$1.registerImplement("unregisterSVG", unregisterSVGSource), registerElementHighlightByGraphicName(), registerElementSelectByGraphicName();
+  };
+
+  var PictogramChart = /*#__PURE__*/function (_BaseChart) {
+    function PictogramChart() {
+      var _this;
+      _classCallCheck(this, PictogramChart);
+      _this = _callSuper(this, PictogramChart, arguments), _this.transformerConstructor = PictogramChartSpecTransformer, _this.type = "pictogram", _this.seriesType = SeriesTypeEnum.pictogram;
+      return _this;
+    }
+    _inherits(PictogramChart, _BaseChart);
+    return _createClass(PictogramChart);
+  }(BaseChart);
+  PictogramChart.type = "pictogram", PictogramChart.seriesType = SeriesTypeEnum.pictogram, PictogramChart.transformerConstructor = PictogramChartSpecTransformer;
+  var registerPictogramChart = function registerPictogramChart() {
+    registerPictogramSeries(), Factory$1.registerChart(PictogramChart.type, PictogramChart);
+  };
+
   var __rest$1 = undefined && undefined.__rest || function (s, e) {
     var t = {};
     for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
@@ -110314,7 +111795,7 @@
   }(CharacterChart);
   VChartCharacter.type = "VChart";
   var registerAllVChart = function registerAllVChart() {
-    registerVennChart(), registerLiquidChart(), registerMosaicChart();
+    registerVennChart(), registerLiquidChart(), registerMosaicChart(), registerPictogramChart();
   };
 
   var WaveAnimate = /*#__PURE__*/function (_ACustomAnimate) {
@@ -111110,7 +112591,10 @@
       key: "transformTextAttrsToRichTextConfig",
       value: function transformTextAttrsToRichTextConfig(textStyle, align) {
         var textConfig = textStyle.textConfig;
-        if ((!textConfig || !textConfig.length) && textStyle.text) {
+        if (textConfig && textConfig.length || !textStyle.text) textConfig && textConfig.length && textConfig.forEach(function (item) {
+          var _a;
+          item.textAlign = align, item.lineHeight = null !== (_a = item.lineHeight) && void 0 !== _a ? _a : textStyle.lineHeight;
+        });else {
           var textList = Array.isArray(textStyle.text) ? textStyle.text : [textStyle.text];
           textConfig = textList.map(function (item, i) {
             return {
@@ -112503,7 +113987,9 @@
           componentStyle = Object.assign({}, panelStyle);
         ["x", "y", "dx", "dy", "scaleX", "scaleY", "width", "height"].forEach(function (key) {
           key in graphicStyle && (componentStyle[key] = graphicStyle[key], delete graphicStyle[key]);
-        }), component && (component.styleAnimate ? component.styleAnimate(componentStyle, animation) : component.animate().to(componentStyle, duration, easing)), graphic && graphicStyle && (graphic.styleAnimate ? graphic.styleAnimate(graphicStyle, animation) : graphic.animate().to(graphicStyle, duration, easing)), text && textStyle && text.animate().to(textStyle, duration, easing);
+        }), component && (component.styleAnimate ? component.styleAnimate(componentStyle, animation) : component.animate().to(componentStyle, duration, easing)), graphic && graphicStyle && (graphic.styleAnimate ? graphic.styleAnimate(graphicStyle, animation) : graphic.animate().to(graphicStyle, duration, easing)), text && textStyle && (textStyle.text && text.attribute.textConfig && (textStyle.textConfig = [Object.assign(Object.assign({}, (text.attribute.textConfig || [])[0]), {
+          text: textStyle.text
+        })]), text.animate().to(textStyle, duration, easing));
       }
     }]);
   }(ActionProcessorItem);
@@ -113510,7 +114996,7 @@
     registerTextVisibilityAction();
   }
 
-  var DefaultVisibility$2 = /*#__PURE__*/function (_BaseVisibility) {
+  var DefaultVisibility$4 = /*#__PURE__*/function (_BaseVisibility) {
     function DefaultVisibility() {
       _classCallCheck(this, DefaultVisibility);
       return _callSuper(this, DefaultVisibility, arguments);
@@ -113534,7 +115020,7 @@
       }
     }]);
   }(BaseVisibility);
-  var defaultInstance$2 = new DefaultVisibility$2();
+  var defaultInstance$4 = new DefaultVisibility$4();
   var TimelineVisibilityActionProcessor = /*#__PURE__*/function (_CommonVisibilityActi) {
     function TimelineVisibilityActionProcessor() {
       var _this;
@@ -113548,7 +115034,7 @@
       value: function getEffectInstance() {
         var effect = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "default";
         var appear = arguments.length > 1 ? arguments[1] : undefined;
-        return "default" === effect ? defaultInstance$2 : _superPropGet(TimelineVisibilityActionProcessor, "getEffectInstance", this, 3)([effect, appear]);
+        return "default" === effect ? defaultInstance$4 : _superPropGet(TimelineVisibilityActionProcessor, "getEffectInstance", this, 3)([effect, appear]);
       }
     }]);
   }(CommonVisibilityActionProcessor);
@@ -113613,7 +115099,7 @@
     registerTimelineVisibilityAction();
   }
 
-  var DefaultVisibility$1 = /*#__PURE__*/function (_BaseVisibility) {
+  var DefaultVisibility$3 = /*#__PURE__*/function (_BaseVisibility) {
     function DefaultVisibility() {
       _classCallCheck(this, DefaultVisibility);
       return _callSuper(this, DefaultVisibility, arguments);
@@ -113640,7 +115126,7 @@
       }
     }]);
   }(BaseVisibility);
-  var defaultInstance$1 = new DefaultVisibility$1();
+  var defaultInstance$3 = new DefaultVisibility$3();
   var UnitVisibilityActionProcessor = /*#__PURE__*/function (_CommonVisibilityActi) {
     function UnitVisibilityActionProcessor() {
       var _this;
@@ -113654,7 +115140,7 @@
       value: function getEffectInstance() {
         var effect = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "default";
         var appear = arguments.length > 1 ? arguments[1] : undefined;
-        return "default" === effect ? defaultInstance$1 : _superPropGet(UnitVisibilityActionProcessor, "getEffectInstance", this, 3)([effect, appear]);
+        return "default" === effect ? defaultInstance$3 : _superPropGet(UnitVisibilityActionProcessor, "getEffectInstance", this, 3)([effect, appear]);
       }
     }]);
   }(CommonVisibilityActionProcessor);
@@ -116535,7 +118021,7 @@
     StoryFactory.registerCharacter(SinglePieCharacter.type, SinglePieCharacter);
   }
 
-  var DefaultVisibility = /*#__PURE__*/function (_BaseVisibility) {
+  var DefaultVisibility$2 = /*#__PURE__*/function (_BaseVisibility) {
     function DefaultVisibility() {
       _classCallCheck(this, DefaultVisibility);
       return _callSuper(this, DefaultVisibility, arguments);
@@ -116573,7 +118059,7 @@
       }
     }]);
   }(BaseVisibility);
-  var defaultInstance = new DefaultVisibility();
+  var defaultInstance$2 = new DefaultVisibility$2();
   var SinglePieVisibilityActionProcessor = /*#__PURE__*/function (_CommonVisibilityActi) {
     function SinglePieVisibilityActionProcessor() {
       var _this;
@@ -116585,7 +118071,7 @@
     return _createClass(SinglePieVisibilityActionProcessor, [{
       key: "getEffectInstance",
       value: function getEffectInstance(effect, appear) {
-        return "angle" === effect ? defaultInstance : _superPropGet(SinglePieVisibilityActionProcessor, "getEffectInstance", this, 3)([effect, appear]);
+        return "angle" === effect ? defaultInstance$2 : _superPropGet(SinglePieVisibilityActionProcessor, "getEffectInstance", this, 3)([effect, appear]);
       }
     }]);
   }(CommonVisibilityActionProcessor);
@@ -116703,6 +118189,311 @@
     registerDynamicLinePlayAction(), registerDynamicLineVisibilityAction();
   }
 
+  var PopTipComponent$1 = /*#__PURE__*/function (_BaseComponentWithTex) {
+    function PopTipComponent(attributes, options) {
+      _classCallCheck(this, PopTipComponent);
+      return _callSuper(this, PopTipComponent, [(null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, PopTipComponent.defaultAttributes, attributes)]);
+    }
+    _inherits(PopTipComponent, _BaseComponentWithTex);
+    return _createClass(PopTipComponent, [{
+      key: "render",
+      value: function render() {
+        _superPropGet(PopTipComponent, "render", this, 3)([]), this.renderPopTip();
+      }
+    }, {
+      key: "renderPopTip",
+      value: function renderPopTip() {
+        var _this$attribute = this.attribute,
+          graphic = _this$attribute.graphic,
+          padding = _this$attribute.padding,
+          width = _this$attribute.width,
+          height = _this$attribute.height,
+          attrs = Object.assign({}, graphic);
+        attrs.x || (attrs.x = padding.left), attrs.y || (attrs.y = padding.top), attrs.width || (attrs.width = width - padding.left - padding.right), attrs.height || (attrs.height = height - padding.top - padding.bottom);
+        var attribute = Object.assign(Object.assign({}, attrs), {
+          scaleX: 1,
+          scaleY: 1,
+          angle: 0,
+          postMatrix: null
+        });
+        if (this.vrComponent) this.vrComponent.setAttributes(attribute);else {
+          var poptip = new PopTip(attribute);
+          this.vrComponent = poptip, this.addChild(poptip);
+        }
+      }
+    }]);
+  }(BaseComponentWithText);
+  PopTipComponent$1.defaultAttributes = {
+    visible: !0,
+    textStyle: {},
+    width: 100,
+    height: 100,
+    padding: {
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    },
+    graphic: {
+      panel: {
+        visible: !0
+      }
+    }
+  };
+
+  var POPTIP = "PopTip";
+
+  var PopTipRuntime = /*#__PURE__*/function (_BaseRuntime) {
+    function PopTipRuntime() {
+      var _this;
+      _classCallCheck(this, PopTipRuntime);
+      _this = _callSuper(this, PopTipRuntime, arguments), _this.type = POPTIP;
+      return _this;
+    }
+    _inherits(PopTipRuntime, _BaseRuntime);
+    return _createClass(PopTipRuntime);
+  }(BaseRuntime);
+
+  var PopTipCharacter = /*#__PURE__*/function (_CharacterComponent) {
+    function PopTipCharacter() {
+      _classCallCheck(this, PopTipCharacter);
+      return _callSuper(this, PopTipCharacter, arguments);
+    }
+    _inherits(PopTipCharacter, _CharacterComponent);
+    return _createClass(PopTipCharacter, [{
+      key: "createAndAddGraphic",
+      value: function createAndAddGraphic(attribute) {
+        this._graphic = new PopTipComponent$1(attribute), this.canvas.addGraphic(this._graphic);
+      }
+    }, {
+      key: "_initRuntime",
+      value: function _initRuntime() {
+        var _this = this;
+        PopTipCharacter.RunTime.forEach(function (R) {
+          _this._runtime.push(new R(_this));
+        });
+      }
+    }, {
+      key: "getDefaultAttribute",
+      value: function getDefaultAttribute() {
+        return Object.assign(Object.assign({}, _superPropGet(PopTipCharacter, "getDefaultAttribute", this, 3)([])), {
+          width: 100,
+          height: 100
+        });
+      }
+    }, {
+      key: "_clearGraphic",
+      value: function _clearGraphic() {
+        _superPropGet(PopTipCharacter, "_clearGraphic", this, 3)([]);
+      }
+    }, {
+      key: "show",
+      value: function show() {
+        this._graphic.setAttribute("visibleAll", !0);
+      }
+    }, {
+      key: "hide",
+      value: function hide() {
+        this._graphic.setAttribute("visibleAll", !1);
+      }
+    }]);
+  }(CharacterComponent);
+  PopTipCharacter.type = POPTIP, PopTipCharacter.RunTime = [PopTipRuntime];
+
+  function registerPopTip() {
+    StoryFactory.registerCharacter(PopTipCharacter.type, PopTipCharacter);
+  }
+
+  var DefaultVisibility$1 = /*#__PURE__*/function (_BaseVisibility) {
+    function DefaultVisibility() {
+      _classCallCheck(this, DefaultVisibility);
+      return _callSuper(this, DefaultVisibility, arguments);
+    }
+    _inherits(DefaultVisibility, _BaseVisibility);
+    return _createClass(DefaultVisibility, [{
+      key: "_setInitAttributes",
+      value: function _setInitAttributes(graphic, params, appear) {}
+    }, {
+      key: "_run",
+      value: function _run(graphic, params, appear) {
+        return appear && graphic && graphic.appearAnimate ? graphic.appearAnimate(params) : !appear && graphic && graphic.disappearAnimate && graphic.disappearAnimate(params), !0;
+      }
+    }]);
+  }(BaseVisibility);
+  var defaultInstance$1 = new DefaultVisibility$1();
+  var PoptipVisibilityActionProcessor = /*#__PURE__*/function (_CommonVisibilityActi) {
+    function PoptipVisibilityActionProcessor() {
+      var _this;
+      _classCallCheck(this, PoptipVisibilityActionProcessor);
+      _this = _callSuper(this, PoptipVisibilityActionProcessor), _this.name = "appearOrDisAppear";
+      return _this;
+    }
+    _inherits(PoptipVisibilityActionProcessor, _CommonVisibilityActi);
+    return _createClass(PoptipVisibilityActionProcessor, [{
+      key: "getEffectInstance",
+      value: function getEffectInstance(effect, appear) {
+        return "default" === effect ? defaultInstance$1 : _superPropGet(PoptipVisibilityActionProcessor, "getEffectInstance", this, 3)([effect, appear]);
+      }
+    }]);
+  }(CommonVisibilityActionProcessor);
+  function registerPopTipVisibilityAction() {
+    globalProcessorRegistry.registerProcessor(POPTIP, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ACTION_TYPE.APPEAR, new PoptipVisibilityActionProcessor()), ACTION_TYPE.DISAPPEAR, new PoptipVisibilityActionProcessor()), ACTION_TYPE.STYLE, new CommonStyleActionProcessor()), ACTION_TYPE.MOVETO, new CommonMoveToActionProcessor()), ACTION_TYPE.SCALETO, new CommonScaleToActionProcessor()), ACTION_TYPE.BOUNCE, new CommonBounceActionProcessor()));
+  }
+
+  function registerPopTipAction() {
+    registerPopTipVisibilityAction();
+  }
+
+  var PopTipComponent = /*#__PURE__*/function (_BaseComponentWithTex) {
+    function PopTipComponent(attributes, options) {
+      _classCallCheck(this, PopTipComponent);
+      return _callSuper(this, PopTipComponent, [(null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, PopTipComponent.defaultAttributes, attributes)]);
+    }
+    _inherits(PopTipComponent, _BaseComponentWithTex);
+    return _createClass(PopTipComponent, [{
+      key: "render",
+      value: function render() {
+        _superPropGet(PopTipComponent, "render", this, 3)([]), this.renderPopTip();
+      }
+    }, {
+      key: "renderPopTip",
+      value: function renderPopTip() {
+        var _this$attribute = this.attribute,
+          graphic = _this$attribute.graphic,
+          padding = _this$attribute.padding,
+          width = _this$attribute.width,
+          height = _this$attribute.height,
+          attrs = Object.assign({}, graphic);
+        attrs.x || (attrs.x = padding.left), attrs.y || (attrs.y = padding.top), attrs.width || (attrs.width = width - padding.left - padding.right), attrs.height || (attrs.height = height - padding.top - padding.bottom);
+        var attribute = Object.assign(Object.assign({}, attrs), {
+          scaleX: 1,
+          scaleY: 1,
+          angle: 0,
+          postMatrix: null
+        });
+        if (this.vrComponent) this.vrComponent.setAttributes(attribute);else {
+          var labelItem = new StoryLabelItem(attribute);
+          this.vrComponent = labelItem, this.addChild(labelItem);
+        }
+      }
+    }]);
+  }(BaseComponentWithText);
+  PopTipComponent.defaultAttributes = {
+    visible: !0,
+    textStyle: {},
+    width: 100,
+    height: 100,
+    padding: {
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    }
+  };
+
+  var LABEL_ITEM = "LabelItem";
+
+  var LabelItemRuntime = /*#__PURE__*/function (_BaseRuntime) {
+    function LabelItemRuntime() {
+      var _this;
+      _classCallCheck(this, LabelItemRuntime);
+      _this = _callSuper(this, LabelItemRuntime, arguments), _this.type = LABEL_ITEM;
+      return _this;
+    }
+    _inherits(LabelItemRuntime, _BaseRuntime);
+    return _createClass(LabelItemRuntime);
+  }(BaseRuntime);
+
+  var LabelItemCharacter = /*#__PURE__*/function (_CharacterComponent) {
+    function LabelItemCharacter() {
+      _classCallCheck(this, LabelItemCharacter);
+      return _callSuper(this, LabelItemCharacter, arguments);
+    }
+    _inherits(LabelItemCharacter, _CharacterComponent);
+    return _createClass(LabelItemCharacter, [{
+      key: "createAndAddGraphic",
+      value: function createAndAddGraphic(attribute) {
+        this._graphic = new PopTipComponent(attribute), this.canvas.addGraphic(this._graphic);
+      }
+    }, {
+      key: "_initRuntime",
+      value: function _initRuntime() {
+        var _this = this;
+        LabelItemCharacter.RunTime.forEach(function (R) {
+          _this._runtime.push(new R(_this));
+        });
+      }
+    }, {
+      key: "getDefaultAttribute",
+      value: function getDefaultAttribute() {
+        return Object.assign(Object.assign({}, _superPropGet(LabelItemCharacter, "getDefaultAttribute", this, 3)([])), {
+          width: 100,
+          height: 100
+        });
+      }
+    }, {
+      key: "_clearGraphic",
+      value: function _clearGraphic() {
+        _superPropGet(LabelItemCharacter, "_clearGraphic", this, 3)([]);
+      }
+    }, {
+      key: "show",
+      value: function show() {
+        this._graphic.setAttribute("visibleAll", !0);
+      }
+    }, {
+      key: "hide",
+      value: function hide() {
+        this._graphic.setAttribute("visibleAll", !1);
+      }
+    }]);
+  }(CharacterComponent);
+  LabelItemCharacter.type = LABEL_ITEM, LabelItemCharacter.RunTime = [LabelItemRuntime];
+
+  function registerLabelItem() {
+    StoryFactory.registerCharacter(LabelItemCharacter.type, LabelItemCharacter);
+  }
+
+  var DefaultVisibility = /*#__PURE__*/function (_BaseVisibility) {
+    function DefaultVisibility() {
+      _classCallCheck(this, DefaultVisibility);
+      return _callSuper(this, DefaultVisibility, arguments);
+    }
+    _inherits(DefaultVisibility, _BaseVisibility);
+    return _createClass(DefaultVisibility, [{
+      key: "_setInitAttributes",
+      value: function _setInitAttributes(graphic, params, appear) {}
+    }, {
+      key: "_run",
+      value: function _run(graphic, params, appear) {
+        return appear && graphic && graphic.appearAnimate ? graphic.appearAnimate(params) : !appear && graphic && graphic.disappearAnimate && graphic.disappearAnimate(params), !0;
+      }
+    }]);
+  }(BaseVisibility);
+  var defaultInstance = new DefaultVisibility();
+  var LabelItemVisibilityActionProcessor = /*#__PURE__*/function (_CommonVisibilityActi) {
+    function LabelItemVisibilityActionProcessor() {
+      var _this;
+      _classCallCheck(this, LabelItemVisibilityActionProcessor);
+      _this = _callSuper(this, LabelItemVisibilityActionProcessor), _this.name = "appearOrDisAppear";
+      return _this;
+    }
+    _inherits(LabelItemVisibilityActionProcessor, _CommonVisibilityActi);
+    return _createClass(LabelItemVisibilityActionProcessor, [{
+      key: "getEffectInstance",
+      value: function getEffectInstance(effect, appear) {
+        return "default" === effect ? defaultInstance : _superPropGet(LabelItemVisibilityActionProcessor, "getEffectInstance", this, 3)([effect, appear]);
+      }
+    }]);
+  }(CommonVisibilityActionProcessor);
+  function registerLabelItemVisibilityAction() {
+    globalProcessorRegistry.registerProcessor(LABEL_ITEM, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ACTION_TYPE.APPEAR, new LabelItemVisibilityActionProcessor()), ACTION_TYPE.DISAPPEAR, new LabelItemVisibilityActionProcessor()), ACTION_TYPE.STYLE, new CommonStyleActionProcessor()), ACTION_TYPE.MOVETO, new CommonMoveToActionProcessor()), ACTION_TYPE.SCALETO, new CommonScaleToActionProcessor()), ACTION_TYPE.BOUNCE, new CommonBounceActionProcessor()));
+  }
+
+  function registerLabelItemAction() {
+    registerLabelItemVisibilityAction();
+  }
+
   function registerAll() {
       registerGraphics();
       registerCharacters();
@@ -116766,8 +118557,12 @@
   exports.registerDynamicLineAction = registerDynamicLineAction;
   exports.registerEasing = registerEasing;
   exports.registerGraphics = registerGraphics;
+  exports.registerLabelItem = registerLabelItem;
+  exports.registerLabelItemAction = registerLabelItemAction;
   exports.registerLottie = registerLottie;
   exports.registerLottieAction = registerLottieAction;
+  exports.registerPopTip = registerPopTip;
+  exports.registerPopTipAction = registerPopTipAction;
   exports.registerSinglePie = registerSinglePie;
   exports.registerSinglePieAction = registerSinglePieAction;
   exports.registerVChartAction = registerVChartAction;