tvcharts 0.6.12 → 0.6.14

package/dist/echarts.js

@@ -8278,7 +8278,7 @@ function estimateLength(text, contentWidth, ascCharWidth, cnCharWidth) {
 function parsePlainText(text, style) {
   text != null && (text += "");
   const overflow = style.overflow;
-  const padding = style.padding;
+  const padding2 = style.padding;
   const font = style.font;
   const truncate = overflow === "truncate";
   const calculatedLineHeight = getLineHeight(font);
@@ -8316,10 +8316,10 @@ function parsePlainText(text, style) {
     width = contentWidth;
   }
   let outerWidth = contentWidth;
-  if (padding) {
-    outerHeight += padding[0] + padding[2];
-    outerWidth += padding[1] + padding[3];
-    width += padding[1] + padding[3];
+  if (padding2) {
+    outerHeight += padding2[0] + padding2[2];
+    outerWidth += padding2[1] + padding2[3];
+    width += padding2[1] + padding2[3];
   }
   if (bgColorDrawn) {
     outerWidth = width;
@@ -15150,14 +15150,14 @@ function millisecondsSetterName(isUTC) {
 }
 
 // src/legacy/getTextRect.ts
-function getTextRect(text, font, align, verticalAlign, padding, rich, truncate, lineHeight) {
+function getTextRect(text, font, align, verticalAlign, padding2, rich, truncate, lineHeight) {
   const textEl = new Text_default({
     style: {
       text,
       font,
       align,
       verticalAlign,
-      padding,
+      padding: padding2,
       rich,
       overflow: truncate ? "truncate" : null,
       lineHeight
@@ -16125,6 +16125,7 @@ var BUILTIN_CHARTS_MAP = {
   effectScatter: "EffectScatterChart",
   lines: "LinesChart",
   linesPlot: "LinesPlotChart",
+  labels: "LabelsChart",
   hlines: "HLinesChart",
   bgcolor: "BgColorChart",
   heatmap: "HeatmapChart",
@@ -19717,8 +19718,8 @@ function retrieveVisualColorForTooltipMarker(series, dataIndex) {
   return convertToColorString(color2);
 }
 function getPaddingFromTooltipModel(model, renderMode) {
-  const padding = model.get("padding");
-  return padding != null ? padding : renderMode === "richText" ? [8, 10] : 10;
+  const padding2 = model.get("padding");
+  return padding2 != null ? padding2 : renderMode === "richText" ? [8, 10] : 10;
 }
 var TooltipMarkupStyleCreator = class {
   constructor() {
@@ -21677,6 +21678,404 @@ var Cross = Path_default.extend({
     ctx.closePath();
   }
 });
+var LabelDown = Path_default.extend({
+  type: "labelDown",
+  shape: {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    r: 0,
+    triangleWidth: 0
+  },
+  buildPath: function(ctx, shape) {
+    const {x, y, width, height, r, triangleWidth} = shape;
+    const triangleHeight = triangleWidth;
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + width - r, y);
+    ctx.arc(x + width - r, y + r, r, -Math.PI / 2, 0);
+    ctx.lineTo(x + width, y + height - r);
+    ctx.arc(x + width - r, y + height - r, r, 0, Math.PI / 2);
+    ctx.lineTo(x + width / 2 + triangleWidth, y + height);
+    ctx.lineTo(x + width / 2, y + height + triangleHeight);
+    ctx.lineTo(x + width / 2 - triangleWidth, y + height);
+    ctx.lineTo(x + r, y + height);
+    ctx.arc(x + r, y + height - r, r, Math.PI / 2, Math.PI);
+    ctx.lineTo(x, y + r);
+    ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
+  }
+});
+var LabelUp = Path_default.extend({
+  type: "labelUp",
+  shape: {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    r: 0,
+    triangleWidth: 0
+  },
+  buildPath: function(ctx, shape) {
+    const {x, y, width, height, r, triangleWidth} = shape;
+    const triangleHeight = triangleWidth;
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + width / 2 - triangleWidth, y);
+    ctx.lineTo(x + width / 2, y - triangleHeight);
+    ctx.lineTo(x + width / 2 + triangleWidth, y);
+    ctx.lineTo(x + width - r, y);
+    ctx.arc(x + width - r, y + r, r, -Math.PI / 2, 0);
+    ctx.lineTo(x + width, y + height - r);
+    ctx.arc(x + width - r, y + height - r, r, 0, Math.PI / 2);
+    ctx.lineTo(x + r, y + height);
+    ctx.arc(x + r, y + height - r, r, Math.PI / 2, Math.PI);
+    ctx.lineTo(x, y + r);
+    ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
+  }
+});
+var LabelLeft = Path_default.extend({
+  type: "labelLeft",
+  shape: {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    r: 0,
+    triangleWidth: 0
+  },
+  buildPath: function(ctx, shape) {
+    const {x, y, width, height, r, triangleWidth} = shape;
+    const triangleHeight = triangleWidth;
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + width - r, y);
+    ctx.arc(x + width - r, y + r, r, -Math.PI / 2, 0);
+    ctx.lineTo(x + width, y + height - r);
+    ctx.arc(x + width - r, y + height - r, r, 0, Math.PI / 2);
+    ctx.lineTo(x + r, y + height);
+    ctx.arc(x + r, y + height - r, r, Math.PI / 2, Math.PI);
+    ctx.lineTo(x, y + height / 2 + triangleWidth);
+    ctx.lineTo(x - triangleHeight, y + height / 2);
+    ctx.lineTo(x, y + height / 2 - triangleWidth);
+    ctx.lineTo(x, y + r);
+    ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
+  }
+});
+var LabelRight = Path_default.extend({
+  type: "labelRight",
+  shape: {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    r: 0,
+    triangleWidth: 0
+  },
+  buildPath: function(ctx, shape) {
+    const {x, y, width, height, r, triangleWidth} = shape;
+    const triangleHeight = triangleWidth;
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + width - r, y);
+    ctx.arc(x + width - r, y + r, r, -Math.PI / 2, 0);
+    ctx.lineTo(x + width, y + height / 2 - triangleWidth);
+    ctx.lineTo(x + width + triangleHeight, y + height / 2);
+    ctx.lineTo(x + width, y + height / 2 + triangleWidth);
+    ctx.lineTo(x + width, y + height - r);
+    ctx.arc(x + width - r, y + height - r, r, 0, Math.PI / 2);
+    ctx.lineTo(x + r, y + height);
+    ctx.arc(x + r, y + height - r, r, Math.PI / 2, Math.PI);
+    ctx.lineTo(x, y + r);
+    ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
+  }
+});
+var LabelLowerLeft = Path_default.extend({
+  type: "labelLowerLeft",
+  shape: {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    r: 0,
+    offsetY: 0,
+    offsetX: 0,
+    offsetWidth: 0
+  },
+  buildPath: function(ctx, shape) {
+    const height = shape.height;
+    const width = shape.width;
+    const x = shape.x;
+    const y = shape.y;
+    const r = shape.r;
+    const offsetY = shape.offsetY;
+    const offsetX = shape.offsetX;
+    const offsetWidth = shape.offsetWidth;
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + width - r, y);
+    ctx.arc(x + width - r, y + r, r, -Math.PI / 2, 0);
+    ctx.lineTo(x + width, y + height - r);
+    ctx.arc(x + width - r, y + height - r, r, 0, Math.PI / 2);
+    ctx.lineTo(x + r, y + height);
+    ctx.lineTo(x - offsetWidth, y + height + offsetY);
+    ctx.lineTo(x, y + height - offsetX);
+    ctx.lineTo(x, y + r);
+    ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
+  }
+});
+var LabelLowerRight = Path_default.extend({
+  type: "labelLowerRight",
+  shape: {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    r: 0,
+    offsetY: 0,
+    offsetX: 0,
+    offsetWidth: 0
+  },
+  buildPath: function(ctx, shape) {
+    const offsetY = shape.offsetY;
+    const offsetX = shape.offsetX;
+    const offsetWidth = shape.offsetWidth;
+    const height = shape.height;
+    const width = shape.width;
+    const x = shape.x;
+    const y = shape.y;
+    const r = shape.r;
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + width - r, y);
+    ctx.arc(x + width - r, y + r, r, -Math.PI / 2, 0);
+    ctx.lineTo(x + width, y + height - offsetWidth);
+    ctx.lineTo(x + width + offsetX, y + height + offsetY);
+    ctx.lineTo(x + width - r, y + height);
+    ctx.lineTo(x + r, y + height);
+    ctx.arc(x + r, y + height - r, r, Math.PI / 2, Math.PI);
+    ctx.lineTo(x, y + r);
+    ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
+  }
+});
+var LabelUpperLeft = Path_default.extend({
+  type: "labelUpperLeft",
+  shape: {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    r: 0,
+    offsetY: 0,
+    offsetX: 0,
+    offsetWidth: 0
+  },
+  buildPath: function(ctx, shape) {
+    const height = shape.height;
+    const width = shape.width;
+    const x = shape.x;
+    const y = shape.y;
+    const r = shape.r;
+    const offsetY = shape.offsetY;
+    const offsetX = shape.offsetX;
+    const offsetWidth = shape.offsetWidth;
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + width - r, y);
+    ctx.arc(x + width - r, y + r, r, -Math.PI / 2, 0);
+    ctx.lineTo(x + width, y + height - r);
+    ctx.arc(x + width - r, y + height - r, r, 0, Math.PI / 2);
+    ctx.lineTo(x + r, y + height);
+    ctx.arc(x + r, y + height - r, r, Math.PI / 2, Math.PI);
+    ctx.lineTo(x, y + offsetWidth);
+    ctx.lineTo(x - offsetX, y - offsetY);
+    ctx.lineTo(x + r, y);
+  }
+});
+var LabelUpperRight = Path_default.extend({
+  type: "labelUpperRight",
+  shape: {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    r: 0,
+    offsetY: 0,
+    offsetX: 0,
+    offsetWidth: 0
+  },
+  buildPath: function(ctx, shape) {
+    const height = shape.height;
+    const width = shape.width;
+    const x = shape.x;
+    const y = shape.y;
+    const r = shape.r;
+    const offsetY = shape.offsetY;
+    const offsetX = shape.offsetX;
+    const offsetWidth = shape.offsetWidth;
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + width - r, y);
+    ctx.lineTo(x + width + offsetX, y - offsetY);
+    ctx.lineTo(x + width, y + offsetWidth);
+    ctx.lineTo(x + width, y + height - r);
+    ctx.arc(x + width - r, y + height - r, r, 0, Math.PI / 2);
+    ctx.lineTo(x + r, y + height);
+    ctx.arc(x + r, y + height - r, r, Math.PI / 2, Math.PI);
+    ctx.lineTo(x, y);
+    ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
+  }
+});
+var LabelCenter = Path_default.extend({
+  type: "labelCenter",
+  shape: {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    r: 0
+  },
+  buildPath: function(ctx, shape) {
+    const height = shape.height;
+    const width = shape.width;
+    const x = shape.x;
+    const y = shape.y;
+    const r = shape.r;
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + width - r, y);
+    ctx.arc(x + width - r, y + r, r, -Math.PI / 2, 0);
+    ctx.lineTo(x + width, y + height - r);
+    ctx.arc(x + width - r, y + height - r, r, 0, Math.PI / 2);
+    ctx.lineTo(x + r, y + height);
+    ctx.arc(x + r, y + height - r, r, Math.PI / 2, Math.PI);
+    ctx.lineTo(x, y);
+    ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
+  }
+});
+var XCross = Path_default.extend({
+  type: "xCross",
+  shape: {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  },
+  buildPath: function(ctx, shape) {
+    const {x, y} = shape;
+    const width = shape.width / 2;
+    const height = shape.height / 2;
+    ctx.moveTo(x + width, y - height);
+    ctx.lineTo(x - width, y + height);
+    ctx.moveTo(x - width, y - height);
+    ctx.lineTo(x + width, y + height);
+  }
+});
+var LCross = Path_default.extend({
+  type: "lCross",
+  shape: {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  },
+  buildPath: function(ctx, shape) {
+    const {x, y} = shape;
+    const width = shape.width / 2;
+    const height = shape.height / 2;
+    ctx.moveTo(x, y - height);
+    ctx.lineTo(x, y + height);
+    ctx.moveTo(x - width, y);
+    ctx.lineTo(x + width, y);
+  }
+});
+var Flag = Path_default.extend({
+  type: "flag",
+  shape: {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  },
+  buildPath: function(ctx, shape) {
+    const {x, y} = shape;
+    const width = shape.width / 2;
+    const height = shape.height / 2;
+    const rectWidth = 0.2;
+    const range = 0.6;
+    const rangeHeight = 1;
+    const startX = x - width + rectWidth;
+    const endX = x + width;
+    const topY = y - height;
+    const bottomY = y + height;
+    ctx.moveTo(x - width, topY);
+    ctx.lineTo(startX, topY);
+    ctx.bezierCurveTo(startX + 1 / 3 * shape.width, topY - range, startX + 2 / 3 * shape.width, topY + range, endX, topY);
+    ctx.lineTo(endX, topY + rangeHeight);
+    ctx.bezierCurveTo(startX + 2 / 3 * shape.width, topY + range + rangeHeight, startX + 1 / 3 * shape.width, topY - range + rangeHeight, startX, topY + rangeHeight);
+    ctx.lineTo(startX, bottomY);
+    ctx.lineTo(x - width, bottomY);
+    ctx.lineTo(x - width, topY);
+  }
+});
+var TriangleDown = Path_default.extend({
+  type: "triangleDown",
+  shape: {
+    cx: 0,
+    cy: 0,
+    width: 0,
+    height: 0
+  },
+  buildPath: function(path, shape) {
+    const cx = shape.cx;
+    const cy = shape.cy;
+    const width = shape.width / 2;
+    const height = shape.height / 2;
+    path.moveTo(cx, cy + height);
+    path.lineTo(cx + width, cy - height);
+    path.lineTo(cx - width, cy - height);
+    path.closePath();
+  }
+});
+var ArrowUp = Path_default.extend({
+  type: "arrowUp",
+  shape: {
+    cx: 0,
+    cy: 0,
+    width: 0,
+    height: 0,
+    rectWidth: 0
+  },
+  buildPath: function(ctx, shape) {
+    const {cx, cy, rectWidth} = shape;
+    const width = shape.width / 2;
+    const height = shape.height / 2;
+    const triangleY = cy - 2;
+    ctx.moveTo(cx, cy - height);
+    ctx.lineTo(cx + width, triangleY);
+    ctx.lineTo(cx + width - rectWidth, triangleY);
+    ctx.lineTo(cx + width - rectWidth, cy + height);
+    ctx.lineTo(cx - width + rectWidth, cy + height);
+    ctx.lineTo(cx - width + rectWidth, triangleY);
+    ctx.lineTo(cx - width, triangleY);
+    ctx.closePath();
+  }
+});
+var ArrowDown = Path_default.extend({
+  type: "arrowDown",
+  shape: {
+    cx: 0,
+    cy: 0,
+    width: 0,
+    height: 0,
+    rectWidth: 0
+  },
+  buildPath: function(ctx, shape) {
+    const {cx, cy, rectWidth} = shape;
+    const width = shape.width / 2;
+    const height = shape.height / 2;
+    const triangleY = cy + 2;
+    ctx.moveTo(cx, cy + height);
+    ctx.lineTo(cx + width, triangleY);
+    ctx.lineTo(cx + width - rectWidth, triangleY);
+    ctx.lineTo(cx + width - rectWidth, cy - height);
+    ctx.lineTo(cx - width + rectWidth, cy - height);
+    ctx.lineTo(cx - width + rectWidth, triangleY);
+    ctx.lineTo(cx - width, triangleY);
+    ctx.closePath();
+  }
+});
 var symbolCtors = {
   line: Line_default,
   rect: Rect_default,
@@ -21687,7 +22086,22 @@ var symbolCtors = {
   pin: Pin,
   arrow: Arrow,
   triangle: Triangle,
-  cross: Cross
+  cross: Cross,
+  labelCenter: LabelCenter,
+  labelDown: LabelDown,
+  labelUp: LabelUp,
+  labelLeft: LabelLeft,
+  labelRight: LabelRight,
+  labelLowerLeft: LabelLowerLeft,
+  labelLowerRight: LabelLowerRight,
+  labelUpperLeft: LabelUpperLeft,
+  labelUpperRight: LabelUpperRight,
+  xCross: XCross,
+  lCross: LCross,
+  arrowUp: ArrowUp,
+  flag: Flag,
+  triangleDown: TriangleDown,
+  arrowDown: ArrowDown
 };
 var symbolShapeMakers = {
   line: function(x, y, w, h, shape) {
@@ -21750,6 +22164,147 @@ var symbolShapeMakers = {
     shape.y = y + h / 2;
     shape.width = w;
     shape.height = h;
+  },
+  labelCenter: function(x, y, w, h, shape) {
+    const r = 2;
+    const offset = 1;
+    shape.x = x - w / 2 + offset;
+    shape.y = y - h;
+    shape.width = w;
+    shape.height = h;
+    shape.r = r;
+  },
+  labelDown: function(x, y, w, h, shape, parentShape) {
+    const triangleWidth = parentShape.triangleWidth;
+    const r = 2;
+    const offset = 1;
+    shape.triangleWidth = triangleWidth;
+    shape.x = x - w / 2 + offset;
+    shape.y = y - h - triangleWidth;
+    shape.width = w;
+    shape.height = h;
+    shape.r = r;
+  },
+  labelUp: function(x, y, w, h, shape, parentShape) {
+    const r = 2;
+    const offset = 1;
+    shape.x = x - w / 2 + offset;
+    shape.triangleWidth = parentShape.triangleWidth;
+    shape.y = y - h;
+    shape.width = w;
+    shape.height = h;
+    shape.r = r;
+  },
+  labelLeft: function(x, y, w, h, shape, parentShape) {
+    const triangleWidth = parentShape.triangleWidth;
+    const r = 2;
+    shape.triangleWidth = triangleWidth;
+    shape.x = x + triangleWidth;
+    shape.y = y - h;
+    shape.width = w;
+    shape.height = h;
+    shape.r = r;
+  },
+  labelRight: function(x, y, w, h, shape, parentShape) {
+    const triangleWidth = parentShape.triangleWidth;
+    const r = 2;
+    shape.triangleWidth = triangleWidth;
+    shape.x = x - w - triangleWidth;
+    shape.y = y - h;
+    shape.width = w;
+    shape.height = h;
+    shape.r = r;
+  },
+  labelLowerLeft: function(x, y, w, h, shape, parentShape) {
+    const offsetY = parentShape.offsetY;
+    const offsetX = parentShape.offsetX;
+    const offsetWidth = parentShape.offsetWidth;
+    shape.x = x + offsetWidth;
+    shape.y = y - h - offsetY;
+    shape.width = w;
+    shape.height = h;
+    shape.r = 2;
+    shape.offsetY = offsetY;
+    shape.offsetX = offsetX;
+    shape.offsetWidth = offsetWidth;
+  },
+  labelLowerRight: function(x, y, w, h, shape, parentShape) {
+    const offsetY = parentShape.offsetY;
+    const offsetX = parentShape.offsetX;
+    const offsetWidth = parentShape.offsetWidth;
+    shape.x = x - w - offsetWidth;
+    shape.y = y - h - offsetY;
+    shape.width = w;
+    shape.height = h;
+    shape.r = 2;
+    shape.offsetY = offsetY;
+    shape.offsetX = offsetX;
+    shape.offsetWidth = offsetWidth;
+  },
+  labelUpperLeft: function(x, y, w, h, shape, parentShape) {
+    const offsetY = parentShape.offsetY;
+    const offsetX = parentShape.offsetX;
+    const offsetWidth = parentShape.offsetWidth;
+    shape.x = x + offsetX;
+    shape.y = y - h - offsetY;
+    shape.width = w;
+    shape.height = h;
+    shape.r = 2;
+    shape.offsetY = offsetY;
+    shape.offsetX = offsetX;
+    shape.offsetWidth = offsetWidth;
+  },
+  labelUpperRight: function(x, y, w, h, shape, parentShape) {
+    const offsetY = parentShape.offsetY;
+    const offsetX = parentShape.offsetX;
+    const offsetWidth = parentShape.offsetWidth;
+    shape.x = x - w - offsetX;
+    shape.y = y - h;
+    shape.width = w;
+    shape.height = h;
+    shape.r = 2;
+    shape.offsetY = offsetY;
+    shape.offsetX = offsetX;
+    shape.offsetWidth = offsetWidth;
+  },
+  xCross: function(x, y, w, h, shape) {
+    shape.x = x + w / 2;
+    ;
+    shape.y = y;
+    shape.width = w;
+    shape.height = h;
+  },
+  lCross: function(x, y, w, h, shape) {
+    shape.x = x + w / 2;
+    shape.y = y;
+    shape.width = w;
+    shape.height = h;
+  },
+  flag: function(x, y, w, h, shape) {
+    shape.x = x + w / 2;
+    shape.y = y;
+    shape.width = w;
+    shape.height = h;
+  },
+  triangleDown: function(x, y, w, h, shape) {
+    shape.cx = x + w / 2;
+    shape.cy = y + h / 2;
+    shape.width = w;
+    shape.height = h;
+  },
+  arrowUp: function(x, y, w, h, shape, parentShape) {
+    shape.rectWidth = parentShape.triangleWidth;
+    shape.cx = x + 1;
+    shape.cy = y - h / 2;
+    shape.width = w;
+    shape.height = h;
+  },
+  arrowDown: function(x, y, w, h, shape, parentShape) {
+    shape.rectWidth = parentShape.triangleWidth;
+    shape.cx = x + 1;
+    shape.cy = y - h / 2;
+    shape.width = w;
+    shape.height = h;
   }
 };
 var symbolBuildProxies = {};
@@ -21781,7 +22336,7 @@ var SymbolClz = Path_default.extend({
         symbolType = "rect";
         proxySymbol = symbolBuildProxies[symbolType];
       }
-      symbolShapeMakers[symbolType](shape.x, shape.y, shape.width, shape.height, proxySymbol.shape);
+      symbolShapeMakers[symbolType](shape.x, shape.y, shape.width, shape.height, proxySymbol.shape, shape);
       proxySymbol.buildPath(ctx, proxySymbol.shape, inBundle);
     }
   }
@@ -32768,6 +33323,7 @@ function getDefaultInterpolatedLabel(data, interpolatedValue) {
 }
 
 // src/chart/helper/Symbol.ts
+var variableTypes = ["labelCenter", "labelDown", "labelUp", "labelLeft", "labelRight", "labelLowerLeft", "labelLowerRight", "labelUpperLeft", "labelUpperRight", "arrowUp", "arrowDown"];
 var Symbol = class extends Group_default {
   constructor(data, idx, seriesScope, opts) {
     super();
@@ -32775,15 +33331,30 @@ var Symbol = class extends Group_default {
   }
   _createSymbol(symbolType, data, idx, symbolSize, keepAspect) {
     this.removeAll();
+    const isVariable = variableTypes.includes(symbolType);
     const symbolPath = createSymbol(symbolType, -1, -1, 2, 2, null, keepAspect);
-    symbolPath.attr({
-      z2: 100,
-      culling: true,
-      scaleX: symbolSize[0] / 2,
-      scaleY: symbolSize[1] / 2
-    });
+    if (isVariable) {
+      const symbolShape = data.getItemVisual(idx, "symbolShape");
+      symbolPath.attr({
+        z2: 100,
+        culling: true,
+        shape: {
+          width: symbolSize[0],
+          height: symbolSize[1],
+          ...symbolShape
+        }
+      });
+    } else {
+      symbolPath.attr({
+        z2: 100,
+        culling: true,
+        scaleX: symbolSize[0] / 2,
+        scaleY: symbolSize[1] / 2
+      });
+    }
     symbolPath.drift = driftSymbol;
     this._symbolType = symbolType;
+    this._isVariable = isVariable;
     this.add(symbolPath);
   }
   stopSymbolAnimation(toLastFrame) {
@@ -32824,10 +33395,20 @@ var Symbol = class extends Group_default {
     } else {
       const symbolPath = this.childAt(0);
       symbolPath.silent = false;
-      const target = {
+      let target = {
         scaleX: symbolSize[0] / 2,
         scaleY: symbolSize[1] / 2
       };
+      if (this._isVariable) {
+        const symbolShape = data.getItemVisual(idx, "symbolShape");
+        target = {
+          shape: {
+            width: symbolSize[0],
+            height: symbolSize[1],
+            ...symbolShape
+          }
+        };
+      }
       disableAnimation ? symbolPath.attr(target) : updateProps(symbolPath, target, seriesModel, idx);
       saveOldStyle(symbolPath);
     }
@@ -32835,15 +33416,29 @@ var Symbol = class extends Group_default {
     if (isInit) {
       const symbolPath = this.childAt(0);
       if (!disableAnimation) {
-        const target = {
+        let target = {
           scaleX: this._sizeX,
           scaleY: this._sizeY,
           style: {
             opacity: symbolPath.style.opacity
           }
         };
-        symbolPath.scaleX = symbolPath.scaleY = 0;
-        symbolPath.style.opacity = 0;
+        if (this._isVariable) {
+          const symbolShape = data.getItemVisual(idx, "symbolShape");
+          target = {
+            shape: {
+              width: this._sizeX * 2,
+              height: this._sizeY * 2,
+              ...symbolShape
+            },
+            style: {
+              opacity: symbolPath.style.opacity
+            }
+          };
+        } else {
+          symbolPath.scaleX = symbolPath.scaleY = 0;
+          symbolPath.style.opacity = 0;
+        }
         initProps(symbolPath, target, seriesModel, idx);
       }
     }
@@ -32945,8 +33540,13 @@ var Symbol = class extends Group_default {
     symbolPath.ensureState("select").style = selectItemStyle;
     symbolPath.ensureState("blur").style = blurItemStyle;
     const scaleRatio = hoverScale == null || hoverScale === true ? Math.max(1.1, 3 / this._sizeY) : isFinite(hoverScale) && hoverScale > 0 ? +hoverScale : 1;
-    emphasisState.scaleX = this._sizeX * scaleRatio;
-    emphasisState.scaleY = this._sizeY * scaleRatio;
+    if (this._isVariable) {
+      emphasisState.scaleX = scaleRatio;
+      emphasisState.scaleY = scaleRatio;
+    } else {
+      emphasisState.scaleX = this._sizeX * scaleRatio;
+      emphasisState.scaleY = this._sizeY * scaleRatio;
+    }
     this.setSymbolScale(1);
     toggleHoverEmphasis(this, focus, blurScope, emphasisDisabled);
   }
@@ -33032,7 +33632,7 @@ var SymbolDraw = class {
     const SymbolCtor = this._SymbolCtor;
     const disableAnimation = opt.disableAnimation;
     const seriesScope = makeSeriesScope(data);
-    const symbolUpdateOpt = {disableAnimation};
+    const symbolUpdateOpt = {disableAnimation, useNameLabel: opt.useNameLabel};
     const getSymbolPoint = opt.getSymbolPoint || function(idx) {
       return data.getItemLayout(idx);
     };
@@ -36202,8 +36802,8 @@ function avoidOverlap(labelLayoutList, cx, cy, r, viewWidth, viewHeight, viewLef
       const label = layout18.label;
       const linePoints = layout18.linePoints;
       const isAlignToEdge = layout18.labelAlignTo === "edge";
-      const padding = label.style.padding;
-      const paddingH = padding ? padding[1] + padding[3] : 0;
+      const padding2 = label.style.padding;
+      const paddingH = padding2 ? padding2[1] + padding2[3] : 0;
       const extraPaddingH = label.style.backgroundColor ? 0 : paddingH;
       const realTextWidth = layout18.rect.width + extraPaddingH;
       const dist3 = linePoints[1][0] - linePoints[2][0];
@@ -36233,8 +36833,8 @@ function constrainTextWidth(layout18, availableWidth, forceRecalculate = false)
   const style = label.style;
   const textRect = layout18.rect;
   const bgColor = style.backgroundColor;
-  const padding = style.padding;
-  const paddingH = padding ? padding[1] + padding[3] : 0;
+  const padding2 = style.padding;
+  const paddingH = padding2 ? padding2[1] + padding2[3] : 0;
   const overflow = style.overflow;
   const oldOuterWidth = textRect.width + (bgColor ? 0 : paddingH);
   if (availableWidth < oldOuterWidth || forceRecalculate) {
@@ -37129,7 +37729,8 @@ var ScatterView2 = class extends Chart_default {
     const data = seriesModel.getData();
     const symbolDraw = this._updateSymbolDraw(data, seriesModel);
     symbolDraw.updateData(data, {
-      clipShape: this._getClipShape(seriesModel)
+      clipShape: this._getClipShape(seriesModel),
+      useNameLabel: true
     });
     this._finished = true;
   }
@@ -54264,8 +54865,6 @@ LinesPlotView.type = "linesPlot";
 var LinesPlotView_default = LinesPlotView;
 
 // src/chart/linesPlot/LinesPlotSeries.ts
-var Uint32Arr2 = typeof Uint32Array === "undefined" ? Array : Uint32Array;
-var Float64Arr2 = typeof Float64Array === "undefined" ? Array : Float64Array;
 var LinesPlotSeriesModel2 = class extends Series_default {
   constructor() {
     super(...arguments);
@@ -54300,8 +54899,6 @@ LinesPlotSeriesModel.defaultOption = {
   yAxisIndex: 0,
   symbol: "emptyCircle",
   symbolSize: 10,
-  showSymbol: true,
-  showAllSymbol: "auto",
   geoIndex: 0,
   large: true,
   largeThreshold: 600,
@@ -54330,11 +54927,9 @@ var linesPlotLayout = {
     }
     const data = seriesModel.getData();
     const pipelineContext = seriesModel.pipelineContext;
-    const useTypedArray = pipelineContext.large;
     const dims = map(coordSys.dimensions, function(dim) {
       return data.mapDimension(dim);
     }).slice(0, 2);
-    const dimLen = dims.length;
     const store = data.getStore();
     const dimIdx0 = data.getDimensionIndex(dims[0]);
     const dimIdx1 = data.getDimensionIndex(dims[1]);
@@ -54343,6 +54938,9 @@ var linesPlotLayout = {
     const isSingle = seriesModel.get("histogramVisible") || seriesModel.get("barVisible");
     const symbolByStep = seriesModel.get("symbolByStep");
     const xOffset = seriesModel.get("offset") || 0;
+    const symbolVisible = seriesModel.get("symbolVisible");
+    const symbolSize = seriesModel.get("symbolSize");
+    const globalSymbol = seriesModel.get("symbol");
     return {
       progress(params, lineData) {
         const segCount = params.end - params.start;
@@ -54391,7 +54989,11 @@ var linesPlotLayout = {
             nextPoint[0] = midX;
           }
           const itemModel = lineData.getItemModel(isSingle ? i : i + 1);
-          const {color: color2 = defaultColor, type = "solid", width = "1"} = itemModel.get("lineStyle");
+          const {
+            color: color2 = defaultColor,
+            type = "solid",
+            width = "1"
+          } = itemModel.get("lineStyle");
           const key = `${color2}_${type}_${width}`;
           const points4 = linePointsByKey[key] || [];
           if (!isSingle && lastKey !== key) {
@@ -54402,21 +55004,18 @@ var linesPlotLayout = {
             points4.push(0);
           }
           points4.push(point);
-          allLinePoints.push(point);
           if (isStep) {
             points4.push(nextPoint);
             if (symbolByStep) {
               symbolPoints[offset++] = nextPoint[0];
               symbolPoints[offset++] = nextPoint[1];
             }
-            allLinePoints.push(nextPoint);
           }
           linePointsByKey[key] = points4;
           lastKey = key;
         }
         lineData.setLayout({
           linePointsByKey,
-          allLinePoints,
           points: symbolPoints
         });
       }
@@ -54432,6 +55031,391 @@ function install24(registers) {
   registers.registerLayout(linesPlotLayout_default);
 }
 
+// src/chart/labels/LabelsSeries.ts
+var LabelsSeriesModel2 = class extends Series_default {
+  constructor() {
+    super(...arguments);
+    this.type = LabelsSeriesModel2.type;
+  }
+  getInitialData(option, ecModel) {
+    return createSeriesData_default(null, this, {
+      useEncodeDefaulter: true
+    });
+  }
+  getProgressive() {
+    const progressive = this.option.progressive;
+    if (progressive == null) {
+      return this.option.large ? 5e3 : this.get("progressive");
+    }
+    return progressive;
+  }
+  getProgressiveThreshold() {
+    const progressiveThreshold = this.option.progressiveThreshold;
+    if (progressiveThreshold == null) {
+      return this.option.large ? 1e4 : this.get("progressiveThreshold");
+    }
+    return progressiveThreshold;
+  }
+  brushSelector(dataIndex, data, selectors) {
+    return selectors.point(data.getItemLayout(dataIndex));
+  }
+  getZLevelKey() {
+    return this.getData().count() > this.getProgressiveThreshold() ? this.id : "";
+  }
+};
+var LabelsSeriesModel = LabelsSeriesModel2;
+LabelsSeriesModel.type = "series.labels";
+LabelsSeriesModel.dependencies = ["grid", "polar", "geo", "singleAxis", "calendar"];
+LabelsSeriesModel.defaultOption = {
+  coordinateSystem: "cartesian2d",
+  z: 2,
+  legendHoverLink: true,
+  symbolSize: 10,
+  large: false,
+  largeThreshold: 2e3,
+  itemStyle: {},
+  emphasis: {
+    scale: true
+  },
+  clip: true
+};
+var LabelsSeries_default = LabelsSeriesModel;
+
+// src/chart/labels/LabelsView.ts
+var ScatterView4 = class extends Chart_default {
+  constructor() {
+    super(...arguments);
+    this.type = ScatterView4.type;
+  }
+  render(seriesModel, ecModel, api2) {
+    const data = seriesModel.getData();
+    const symbolDraw = this._updateSymbolDraw(data, seriesModel);
+    symbolDraw.updateData(data, {
+      clipShape: this._getClipShape(seriesModel)
+    });
+    this._finished = true;
+  }
+  incrementalPrepareRender(seriesModel, ecModel, api2) {
+    const data = seriesModel.getData();
+    const symbolDraw = this._updateSymbolDraw(data, seriesModel);
+    symbolDraw.incrementalPrepareUpdate(data);
+    this._finished = false;
+  }
+  incrementalRender(taskParams, seriesModel, ecModel) {
+    this._symbolDraw.incrementalUpdate(taskParams, seriesModel.getData(), {
+      clipShape: this._getClipShape(seriesModel)
+    });
+    this._finished = taskParams.end === seriesModel.getData().count();
+  }
+  updateTransform(seriesModel, ecModel, api2) {
+    const data = seriesModel.getData();
+    this.group.dirty();
+    if (!this._finished || data.count() > 1e4) {
+      return {
+        update: true
+      };
+    } else {
+      const res = pointsLayout("").reset(seriesModel, ecModel, api2);
+      if (res.progress) {
+        res.progress({start: 0, end: data.count(), count: data.count()}, data);
+      }
+      this._symbolDraw.updateLayout(data);
+    }
+  }
+  eachRendered(cb) {
+    this._symbolDraw && this._symbolDraw.eachRendered(cb);
+  }
+  _getClipShape(seriesModel) {
+    if (!seriesModel.get("clip", true)) {
+      return;
+    }
+    const coordSys = seriesModel.coordinateSystem;
+    return coordSys && coordSys.getArea && coordSys.getArea(0.1);
+  }
+  _updateSymbolDraw(data, seriesModel) {
+    let symbolDraw = this._symbolDraw;
+    const pipelineContext = seriesModel.pipelineContext;
+    const isLargeDraw = pipelineContext.large;
+    if (!symbolDraw || isLargeDraw !== this._isLargeDraw) {
+      symbolDraw && symbolDraw.remove();
+      symbolDraw = this._symbolDraw = isLargeDraw ? new LargeSymbolDraw_default() : new SymbolDraw_default();
+      this._isLargeDraw = isLargeDraw;
+      this.group.removeAll();
+    }
+    this.group.add(symbolDraw.group);
+    return symbolDraw;
+  }
+  remove(ecModel, api2) {
+    this._symbolDraw && this._symbolDraw.remove(true);
+    this._symbolDraw = null;
+  }
+  dispose() {
+  }
+};
+var ScatterView3 = ScatterView4;
+ScatterView3.type = "labels";
+var LabelsView_default = ScatterView3;
+
+// src/util/symbolSize.ts
+var xCrossMapping = {
+  huge: () => ({w: 61, h: 65}),
+  large: () => ({w: 46, h: 39}),
+  normal: () => ({w: 31, h: 27}),
+  small: () => ({w: 25, h: 21}),
+  tiny: () => ({w: 20, h: 17}),
+  auto: (width) => {
+    return {w: width, h: width};
+  }
+};
+var lCrossMapping = {
+  huge: () => ({w: 60, h: 50}),
+  large: () => ({w: 46, h: 38}),
+  normal: () => ({w: 30, h: 26}),
+  small: () => ({w: 24, h: 20}),
+  tiny: () => ({w: 18, h: 16}),
+  auto: (width) => {
+    return {w: width, h: width};
+  }
+};
+var triangleMapping = {
+  huge: () => ({w: 63, h: 51}),
+  large: () => ({w: 47, h: 39}),
+  normal: () => ({w: 33, h: 26}),
+  small: () => ({w: 27, h: 21}),
+  tiny: () => ({w: 21, h: 16}),
+  auto: (width) => {
+    return {w: width, h: Math.max(width - 6, 1)};
+  }
+};
+var flagMapping = {
+  huge: () => ({w: 61, h: 57}),
+  large: () => ({w: 47, h: 43}),
+  normal: () => ({w: 31, h: 29}),
+  small: () => ({w: 25, h: 24}),
+  tiny: () => ({w: 19, h: 18}),
+  auto: (width) => {
+    return {w: width, h: Math.max(width - 2, 1)};
+  }
+};
+var circleMapping = {
+  huge: () => ({w: 61, h: 61}),
+  large: () => ({w: 47, h: 47}),
+  normal: () => ({w: 31, h: 31}),
+  small: () => ({w: 25, h: 25}),
+  tiny: () => ({w: 19, h: 19}),
+  auto: (width) => {
+    return {w: width, h: width};
+  }
+};
+var labelMapping = {
+  huge: () => ({w: 33, h: 28, shape: {triangleWidth: 16}}),
+  large: () => ({w: 25, h: 21, shape: {triangleWidth: 12}}),
+  normal: () => ({w: 17, h: 14, shape: {triangleWidth: 8}}),
+  small: () => ({w: 13, h: 11, shape: {triangleWidth: 6}}),
+  tiny: () => ({w: 11, h: 9, shape: {triangleWidth: 5}}),
+  auto: (width) => {
+    return {w: width, h: width - 2, shape: {triangleWidth: Math.min(Math.max(width / 2, 4), 16)}};
+  }
+};
+var labelAngleMapping = {
+  huge: () => ({w: 33, h: 28, shape: {offsetY: 22, offsetX: 22, offsetWidth: 11}}),
+  large: () => ({w: 25, h: 21, shape: {offsetY: 18, offsetX: 18, offsetWidth: 9}}),
+  normal: () => ({w: 17, h: 14, shape: {offsetY: 12, offsetX: 12, offsetWidth: 6}}),
+  small: () => ({w: 13, h: 11, shape: {offsetY: 8, offsetX: 8, offsetWidth: 4}}),
+  tiny: () => ({w: 11, h: 9, shape: {offsetY: 8, offsetX: 8, offsetWidth: 4}}),
+  auto: (width) => {
+    const w = Math.min(Math.max(width / 2, 8), 22);
+    return {w: width, h: width - 2, shape: {offsetY: w, offsetX: w, offsetWidth: Math.min(w / 2, 11)}};
+  }
+};
+var rectMapping = {
+  huge: () => ({w: 51, h: 51}),
+  large: () => ({w: 39, h: 39}),
+  normal: () => ({w: 27, h: 27}),
+  small: () => ({w: 21, h: 21}),
+  tiny: () => ({w: 17, h: 17}),
+  auto: (width) => {
+    return {w: width, h: width};
+  }
+};
+var arrowMapping = {
+  huge: () => ({w: 40, h: 45, shape: {triangleWidth: 12}}),
+  large: () => ({w: 30, h: 35, shape: {triangleWidth: 8}}),
+  normal: () => ({w: 25, h: 27, shape: {triangleWidth: 6}}),
+  small: () => ({w: 17, h: 21, shape: {triangleWidth: 4}}),
+  tiny: () => ({w: 15, h: 17, shape: {triangleWidth: 3}}),
+  auto: (width) => {
+    return {w: width, h: width + 4, shape: {triangleWidth: Math.max(width / 3, 3)}};
+  }
+};
+var symbolSizeMapping = {
+  xCross: xCrossMapping,
+  lCross: lCrossMapping,
+  triangle: triangleMapping,
+  triangleDown: triangleMapping,
+  flag: flagMapping,
+  circle: circleMapping,
+  labelUp: labelMapping,
+  labelDown: labelMapping,
+  labelLeft: labelMapping,
+  labelRight: labelMapping,
+  labelLowerLeft: labelAngleMapping,
+  labelLowerRight: labelAngleMapping,
+  labelUpperLeft: labelAngleMapping,
+  labelUpperRight: labelAngleMapping,
+  rect: rectMapping,
+  diamond: rectMapping,
+  arrowUp: arrowMapping,
+  arrowDown: arrowMapping
+};
+function getSymbolSize2(type, size, width) {
+  const fn = symbolSizeMapping[type]?.[size];
+  return fn ? fn(width) : {w: 0, h: 0};
+}
+var labelFontSizeMapping = {
+  huge: 22,
+  large: 18,
+  normal: 14,
+  small: 10,
+  tiny: 6
+};
+function getSymbolLabelFontSize(size, width) {
+  if (size === "auto") {
+    return Math.max(6, width / 2);
+  }
+  return labelFontSizeMapping[size] ?? 12;
+}
+
+// src/chart/labels/labelsVisual.ts
+var SYMBOL_PROPS_WITH_CB2 = [
+  "symbol",
+  "symbolSize",
+  "symbolRotate",
+  "symbolOffset"
+];
+var SYMBOL_PROPS2 = SYMBOL_PROPS_WITH_CB2.concat([
+  "symbolKeepAspect"
+]);
+var labelSymbols = ["labelDown", "labelUp", "labelLeft", "labelRight", "labelLowerLeft", "labelLowerRight", "labelUpperLeft", "labelUpperRight", "labelCenter"];
+var labelSymbolByType = {};
+each(labelSymbols, function(type) {
+  labelSymbolByType[type] = 1;
+});
+var lineSymbols = ["xCross", "lCross"];
+var padding = 10;
+function changeLabelOffsetBySymbol(symbol, label, shape, oldOffset) {
+  const [offsetX, offsetY] = [0, 0];
+  switch (symbol) {
+    case "labelDown":
+      label.option.offset = [offsetX, offsetY - shape.triangleWidth / 2];
+      break;
+    case "labelUp":
+      label.option.offset = [offsetX, offsetY + shape.triangleWidth / 2];
+      break;
+    case "labelLeft":
+      label.option.offset = [offsetX + shape.triangleWidth / 2, offsetY];
+      break;
+    case "labelRight":
+      label.option.offset = [offsetX - shape.triangleWidth / 2, offsetY];
+      break;
+    case "labelLowerLeft":
+      label.option.offset = [offsetX + shape.offsetX / 2, offsetY - shape.offsetY / 2];
+      break;
+    case "labelLowerRight":
+      label.option.offset = [offsetX - shape.offsetX / 2, offsetY - shape.offsetY / 2];
+      break;
+    case "labelUpperLeft":
+      label.option.offset = [offsetX + shape.offsetX / 2, offsetY + shape.offsetY / 2];
+      break;
+    case "labelUpperRight":
+      label.option.offset = [offsetX - shape.offsetX / 2, offsetY + shape.offsetY / 2];
+      break;
+  }
+}
+var LabelsLayout = {
+  createOnAllSeries: true,
+  performRawSeries: true,
+  reset: function(seriesModel) {
+    const bandWidth = Math.max(1, Math.round(seriesModel.coordinateSystem.getAxesByScale("ordinal")[0].scale.barSpace * 0.8));
+    const data = seriesModel.getData();
+    const symbolOptions = {};
+    for (let i = 0; i < SYMBOL_PROPS_WITH_CB2.length; i++) {
+      const symbolPropName = SYMBOL_PROPS_WITH_CB2[i];
+      const val = seriesModel.get(symbolPropName);
+      symbolOptions[symbolPropName] = val;
+    }
+    symbolOptions.symbol = symbolOptions.symbol || seriesModel.defaultSymbol;
+    data.setVisual(extend({
+      symbolKeepAspect: seriesModel.get("symbolKeepAspect")
+    }, symbolOptions));
+    function dataEach(data2, idx) {
+      const itemModel = data2.getItemModel(idx);
+      let symbol = itemModel.getShallow("symbol");
+      let symbolSize = itemModel.getShallow("symbolSize");
+      let symbolRotate = itemModel.getShallow("symbolRotate");
+      let symbolOffset = itemModel.getShallow("symbolOffset");
+      let symbolShape = {};
+      const symbolKeepAspect = itemModel.getShallow("symbolKeepAspect");
+      const style = itemModel.getModel("itemStyle").getItemStyle();
+      let oldOffset = [];
+      const labelModel = itemModel.getModel("label");
+      const align = labelModel.get("align");
+      const size = itemModel.get("size") ?? "normal";
+      const text = labelModel.get("formatter");
+      const isLabel = labelSymbolByType[symbol];
+      const labelShow = labelModel.get("show");
+      labelModel.option.position = isLabel ? "inside" : "top";
+      labelModel.option.fontSize = getSymbolLabelFontSize(size, bandWidth);
+      if (labelShow && text && (isLabel || ["left", "right"].includes(align))) {
+        const rect = labelModel.getTextRect(text);
+        if (isLabel) {
+          symbolSize = [rect.width + padding, rect.height + padding];
+        }
+        const align2 = labelModel.get("align");
+        if (align2 === "left") {
+          labelModel.option.offset = oldOffset = [-rect.width / 2, 0];
+        } else if (align2 === "right") {
+          labelModel.option.offset = oldOffset = [rect.width / 2, 0];
+        }
+      }
+      const {w, h, shape} = getSymbolSize2(symbol, size, bandWidth);
+      if (isLabel ? !labelShow || !text : true) {
+        symbolSize = [w, h];
+      }
+      if (shape) {
+        symbolShape = shape;
+        if (labelShow) {
+          changeLabelOffsetBySymbol(symbol, labelModel, shape, oldOffset);
+        }
+      }
+      if (lineSymbols.includes(symbol)) {
+        style.stroke = style.fill;
+        if (symbol === "lCross")
+          style.lineWidth = 2;
+      }
+      data2.setItemVisual(idx, {
+        symbol,
+        symbolSize,
+        symbolRotate,
+        symbolOffset,
+        symbolShape,
+        symbolKeepAspect,
+        style
+      });
+    }
+    return {dataEach: data.hasItemOption ? dataEach : null};
+  }
+};
+var labelsVisual_default = LabelsLayout;
+
+// src/chart/labels/install.ts
+function install25(registers) {
+  registers.registerSeriesModel(LabelsSeries_default);
+  registers.registerChartView(LabelsView_default);
+  registers.registerLayout(pointsLayout("labels"));
+  registers.registerVisual(labelsVisual_default);
+}
+
 // src/chart/hlines/HLinesSeries.ts
 var HLineSeriesModel2 = class extends Series_default {
   constructor() {
@@ -54557,7 +55541,7 @@ var hLinesLayout = {
 var hLinesLayout_default = hLinesLayout;
 
 // src/chart/hlines/install.ts
-function install25(registers) {
+function install26(registers) {
   registers.registerChartView(HLinesView_default);
   registers.registerSeriesModel(HLinesSeries_default);
   registers.registerLayout(hLinesLayout_default);
@@ -54658,7 +55642,7 @@ var BgColorView2 = class extends Chart_default {
     }
     const bgColorGroup = this._bgColorGroup;
     const width = Math.ceil(seriesModel.coordinateSystem.getBaseAxis().scale.barSpace);
-    const isLine = width <= 4;
+    const isLine = width <= 8;
     each(rectsByColor, function(rects, color2) {
       const el = new BgColorPath_default({
         shape: {
@@ -54684,7 +55668,10 @@ var BgColorView2 = class extends Chart_default {
     traverseElements(this._bgColorGroup, cb);
   }
   remove(ecModel, api2) {
-    this.group.remove(this._bgColorGroup);
+    if (this._bgColorGroup) {
+      this.group.remove(this._bgColorGroup);
+      this._bgColorGroup = null;
+    }
   }
   dispose(ecModel, api2) {
     this.remove(ecModel, api2);
@@ -54753,7 +55740,7 @@ var bgColorLayout = {
 var BgColorLayout_default = bgColorLayout;
 
 // src/chart/bgColor/install.ts
-function install26(registers) {
+function install27(registers) {
   registers.registerChartView(BgColorView_default);
   registers.registerSeriesModel(BgColorSeries_default);
   registers.registerLayout(BgColorLayout_default);
@@ -55151,7 +56138,7 @@ HeatmapSeriesModel.defaultOption = {
 var HeatmapSeries_default = HeatmapSeriesModel;
 
 // src/chart/heatmap/install.ts
-function install27(registers) {
+function install28(registers) {
   registers.registerChartView(HeatmapView_default);
   registers.registerSeriesModel(HeatmapSeries_default);
 }
@@ -55714,7 +56701,7 @@ PictorialBarSeriesModel.defaultOption = inheritDefaultOption(BaseBarSeries_defau
 var PictorialBarSeries_default = PictorialBarSeriesModel;
 
 // src/chart/bar/installPictorialBar.ts
-function install28(registers) {
+function install29(registers) {
   registers.registerChartView(PictorialBarView_default);
   registers.registerSeriesModel(PictorialBarSeries_default);
   registers.registerLayout(registers.PRIORITY.VISUAL.LAYOUT, curry(layout2, "pictorialBar"));
@@ -56115,7 +57102,7 @@ function computeBaseline(data) {
 }
 
 // src/chart/themeRiver/install.ts
-function install29(registers) {
+function install30(registers) {
   registers.registerChartView(ThemeRiverView_default);
   registers.registerSeriesModel(ThemeRiverSeries_default);
   registers.registerLayout(themeRiverLayout);
@@ -56753,7 +57740,7 @@ function sunburstVisual(ecModel) {
 }
 
 // src/chart/sunburst/install.ts
-function install30(registers) {
+function install31(registers) {
   registers.registerChartView(SunburstView_default);
   registers.registerSeriesModel(SunburstSeries_default);
   registers.registerLayout(curry(sunburstLayout, "sunburst"));
@@ -58201,7 +59188,7 @@ function hasOwnPathData(shape) {
 }
 
 // src/chart/custom/install.ts
-function install31(registers) {
+function install32(registers) {
   registers.registerChartView(CustomView_default);
   registers.registerSeriesModel(CustomSeries_default);
 }
@@ -59419,7 +60406,7 @@ function illegalPoint(point) {
 }
 
 // src/component/axisPointer/install.ts
-function install32(registers) {
+function install33(registers) {
   AxisView_default.registerAxisPointerClass("CartesianAxisPointer", CartesianAxisPointer_default);
   registers.registerComponentModel(AxisPointerModel_default);
   registers.registerComponentView(AxisPointerView_default);
@@ -59448,9 +60435,9 @@ function install32(registers) {
 }
 
 // src/component/grid/install.ts
-function install33(registers) {
+function install34(registers) {
   use(install6);
-  use(install32);
+  use(install33);
 }
 
 // src/component/axisPointer/PolarAxisPointer.ts
@@ -60504,8 +61491,8 @@ var PolarView2 = class extends Component_default2 {
 };
 var PolarView = PolarView2;
 PolarView.type = "polar";
-function install34(registers) {
-  use(install32);
+function install35(registers) {
+  use(install33);
   AxisView_default.registerAxisPointerClass("PolarAxisPointer", PolarAxisPointer_default);
   registers.registerCoordinateSystem("polar", polarCreator_default);
   registers.registerComponentModel(PolarModel_default);
@@ -60968,8 +61955,8 @@ var SingleView2 = class extends Component_default2 {
 };
 var SingleView = SingleView2;
 SingleView.type = "single";
-function install35(registers) {
-  use(install32);
+function install36(registers) {
+  use(install33);
   AxisView_default.registerAxisPointerClass("SingleAxisPointer", SingleAxisPointer_default);
   registers.registerComponentView(SingleView);
   registers.registerComponentView(SingleAxisView_default);
@@ -61659,7 +62646,7 @@ function getCoordSys5(finder) {
 var Calendar_default = Calendar;
 
 // src/component/calendar/install.ts
-function install36(registers) {
+function install37(registers) {
   registers.registerComponentModel(CalendarModel_default);
   registers.registerComponentView(CalendarView_default);
   registers.registerCoordinateSystem("calendar", Calendar_default);
@@ -62048,7 +63035,7 @@ function setEventData(el, graphicModel, elOption) {
 }
 
 // src/component/graphic/install.ts
-function install37(registers) {
+function install38(registers) {
   registers.registerComponentModel(GraphicComponentModel);
   registers.registerComponentView(GraphicComponentView);
   registers.registerPreprocessor(function(option) {
@@ -62902,7 +63889,7 @@ function installCommon(registers) {
 }
 
 // src/component/dataZoom/installDataZoomSelect.ts
-function install38(registers) {
+function install39(registers) {
   registers.registerComponentModel(SelectZoomModel_default);
   registers.registerComponentView(SelectZoomView_default);
   installCommon(registers);
@@ -62978,22 +63965,22 @@ var ToolboxModel_default = ToolboxModel;
 // src/component/helper/listComponent.ts
 function layout13(group, componentModel, api2) {
   const boxLayoutParams = componentModel.getBoxLayoutParams();
-  const padding = componentModel.get("padding");
+  const padding2 = componentModel.get("padding");
   const viewportSize = {width: api2.getWidth(), height: api2.getHeight()};
-  const rect = getLayoutRect(boxLayoutParams, viewportSize, padding);
+  const rect = getLayoutRect(boxLayoutParams, viewportSize, padding2);
   box(componentModel.get("orient"), group, componentModel.get("itemGap"), rect.width, rect.height);
-  positionElement(group, boxLayoutParams, viewportSize, padding);
+  positionElement(group, boxLayoutParams, viewportSize, padding2);
 }
 function makeBackground(rect, componentModel) {
-  const padding = normalizeCssArray2(componentModel.get("padding"));
+  const padding2 = normalizeCssArray2(componentModel.get("padding"));
   const style = componentModel.getItemStyle(["color", "opacity"]);
   style.fill = componentModel.get("backgroundColor");
   rect = new Rect_default({
     shape: {
-      x: rect.x - padding[3],
-      y: rect.y - padding[0],
-      width: rect.width + padding[1] + padding[3],
-      height: rect.height + padding[0] + padding[2],
+      x: rect.x - padding2[3],
+      y: rect.y - padding2[0],
+      width: rect.width + padding2[1] + padding2[3],
+      height: rect.height + padding2[0] + padding2[2],
       r: componentModel.get("borderRadius")
     },
     style,
@@ -64302,7 +65289,7 @@ registerInternalOptionCreator("dataZoom", function(ecModel) {
 var DataZoom_default = DataZoomFeature;
 
 // src/component/toolbox/install.ts
-function install39(registers) {
+function install40(registers) {
   registers.registerComponentModel(ToolboxModel_default);
   registers.registerComponentView(ToolboxView_default);
   registerFeature("saveAsImage", SaveAsImage_default);
@@ -64310,7 +65297,7 @@ function install39(registers) {
   registerFeature("dataView", DataView_default);
   registerFeature("dataZoom", DataZoom_default);
   registerFeature("restore", Restore_default);
-  use(install38);
+  use(install39);
 }
 
 // src/component/tooltip/TooltipModel.ts
@@ -64488,7 +65475,7 @@ function assembleCssText(tooltipModel, enableTransition, onlyFade) {
   const shadowOffsetX = tooltipModel.get("shadowOffsetX");
   const shadowOffsetY = tooltipModel.get("shadowOffsetY");
   const textStyleModel = tooltipModel.getModel("textStyle");
-  const padding = getPaddingFromTooltipModel(tooltipModel, "html");
+  const padding2 = getPaddingFromTooltipModel(tooltipModel, "html");
   const boxShadow = `${shadowOffsetX}px ${shadowOffsetY}px ${shadowBlur}px ${shadowColor}`;
   cssText.push("box-shadow:" + boxShadow);
   enableTransition && transitionDuration && cssText.push(assembleTransition(transitionDuration, onlyFade));
@@ -64502,8 +65489,8 @@ function assembleCssText(tooltipModel, enableTransition, onlyFade) {
     val != null && cssText.push(borderName + ":" + val + (name === "color" ? "" : "px"));
   });
   cssText.push(assembleFont(textStyleModel));
-  if (padding != null) {
-    cssText.push("padding:" + normalizeCssArray2(padding).join("px ") + "px");
+  if (padding2 != null) {
+    cssText.push("padding:" + normalizeCssArray2(padding2).join("px ") + "px");
   }
   return cssText.join(";") + ";";
 }
@@ -65478,8 +66465,8 @@ function findComponentReference(payload, ecModel, api2) {
 var TooltipView_default = TooltipView;
 
 // src/component/tooltip/install.ts
-function install40(registers) {
-  use(install32);
+function install41(registers) {
+  use(install33);
   registers.registerComponentModel(TooltipModel_default);
   registers.registerComponentView(TooltipView_default);
   registers.registerAction({
@@ -66095,7 +67082,7 @@ var BrushFeature = class extends ToolboxFeature {
 var Brush_default = BrushFeature;
 
 // src/component/brush/install.ts
-function install41(registers) {
+function install42(registers) {
   registers.registerComponentView(BrushView_default);
   registers.registerComponentModel(BrushModel_default);
   registers.registerPreprocessor(brushPreprocessor);
@@ -66242,7 +67229,7 @@ var TitleView2 = class extends Component_default2 {
 };
 var TitleView = TitleView2;
 TitleView.type = "title";
-function install42(registers) {
+function install43(registers) {
   registers.registerComponentModel(TitleModel);
   registers.registerComponentView(TitleView);
 }
@@ -67096,7 +68083,7 @@ function has(obj, attr) {
 }
 
 // src/component/timeline/install.ts
-function install43(registers) {
+function install44(registers) {
   registers.registerComponentModel(SliderTimelineModel_default);
   registers.registerComponentView(SliderTimelineView_default);
   registers.registerSubTypeDefaulter("timeline", function() {
@@ -67537,7 +68524,7 @@ function createData(coordSys, seriesModel, mpModel) {
 var MarkPointView_default = MarkPointView;
 
 // src/component/marker/installMarkPoint.ts
-function install44(registers) {
+function install45(registers) {
   registers.registerComponentModel(MarkPointModel_default);
   registers.registerComponentView(MarkPointView_default);
   registers.registerPreprocessor(function(opt) {
@@ -67855,7 +68842,7 @@ function createList2(coordSys, seriesModel, mlModel) {
 var MarkLineView_default = MarkLineView;
 
 // src/component/marker/installMarkLine.ts
-function install45(registers) {
+function install46(registers) {
   registers.registerComponentModel(MarkLineModel_default);
   registers.registerComponentView(MarkLineView_default);
   registers.registerPreprocessor(function(opt) {
@@ -68169,7 +69156,7 @@ function createList3(coordSys, seriesModel, maModel) {
 var MarkAreaView_default = MarkAreaView;
 
 // src/component/marker/installMarkArea.ts
-function install46(registers) {
+function install47(registers) {
   registers.registerComponentModel(MarkAreaModel_default);
   registers.registerComponentView(MarkAreaView_default);
   registers.registerPreprocessor(function(opt) {
@@ -68765,7 +69752,7 @@ function updateLabel({x, y, labelData, markerModel, gridRect, position: position
 var MarkLabelView_default = MarkLabelView;
 
 // src/component/marker/installMarkLabel.ts
-function install47(registers) {
+function install48(registers) {
   registers.registerComponentModel(MarkLabelModal_default);
   registers.registerComponentView(MarkLabelView_default);
   registers.registerPreprocessor(function(opt) {
@@ -69047,13 +70034,13 @@ var LegendView2 = class extends Component_default2 {
     this.renderInner(itemAlign, legendModel, ecModel, api2, selector2, orient, selectorPosition);
     const positionInfo = legendModel.getBoxLayoutParams();
     const viewportSize = {width: api2.getWidth(), height: api2.getHeight()};
-    const padding = legendModel.get("padding");
-    const maxSize = getLayoutRect(positionInfo, viewportSize, padding);
+    const padding2 = legendModel.get("padding");
+    const maxSize = getLayoutRect(positionInfo, viewportSize, padding2);
     const mainRect = this.layoutInner(legendModel, itemAlign, maxSize, isFirstRender, selector2, selectorPosition);
     const layoutRect = getLayoutRect(defaults({
       width: mainRect.width,
       height: mainRect.height
-    }, positionInfo), viewportSize, padding);
+    }, positionInfo), viewportSize, padding2);
     this.group.x = layoutRect.x - mainRect.x;
     this.group.y = layoutRect.y - mainRect.y;
     this.group.markRedraw();
@@ -69447,7 +70434,7 @@ function installLegendAction(registers) {
 }
 
 // src/component/legend/installLegendPlain.ts
-function install48(registers) {
+function install49(registers) {
   registers.registerComponentModel(LegendModel_default);
   registers.registerComponentView(LegendView_default);
   registers.registerProcessor(registers.PRIORITY.PROCESSOR.SERIES_FILTER, legendFilter);
@@ -69777,17 +70764,17 @@ function installScrollableLegendAction(registers) {
 }
 
 // src/component/legend/installLegendScroll.ts
-function install49(registers) {
-  use(install48);
+function install50(registers) {
+  use(install49);
   registers.registerComponentModel(ScrollableLegendModel_default);
   registers.registerComponentView(ScrollableLegendView_default);
   installScrollableLegendAction(registers);
 }
 
 // src/component/legend/install.ts
-function install50(registers) {
-  use(install48);
+function install51(registers) {
   use(install49);
+  use(install50);
 }
 
 // src/component/dataZoom/InsideZoomModel.ts
@@ -70203,7 +71190,7 @@ var getDirectionInfo = {
 var InsideZoomView_default = InsideZoomView;
 
 // src/component/dataZoom/installDataZoomInside.ts
-function install51(registers) {
+function install52(registers) {
   installCommon(registers);
   registers.registerComponentModel(InsideZoomModel_default);
   registers.registerComponentView(InsideZoomView_default);
@@ -70959,16 +71946,16 @@ function getCursor(orient) {
 var SliderZoomView_default = SliderZoomView;
 
 // src/component/dataZoom/installDataZoomSlider.ts
-function install52(registers) {
+function install53(registers) {
   registers.registerComponentModel(SliderZoomModel_default);
   registers.registerComponentView(SliderZoomView_default);
   installCommon(registers);
 }
 
 // src/component/dataZoom/install.ts
-function install53(registers) {
-  use(install51);
+function install54(registers) {
   use(install52);
+  use(install53);
 }
 
 // src/visual/visualDefault.ts
@@ -71452,16 +72439,16 @@ var VisualMapView2 = class extends Component_default2 {
   }
   renderBackground(group) {
     const visualMapModel = this.visualMapModel;
-    const padding = normalizeCssArray2(visualMapModel.get("padding") || 0);
+    const padding2 = normalizeCssArray2(visualMapModel.get("padding") || 0);
     const rect = group.getBoundingRect();
     group.add(new Rect_default({
       z2: -1,
       silent: true,
       shape: {
-        x: rect.x - padding[3],
-        y: rect.y - padding[0],
-        width: rect.width + padding[3] + padding[1],
-        height: rect.height + padding[0] + padding[2]
+        x: rect.x - padding2[3],
+        y: rect.y - padding2[0],
+        width: rect.width + padding2[3] + padding2[1],
+        height: rect.height + padding2[0] + padding2[2]
       },
       style: {
         fill: visualMapModel.get("backgroundColor"),
@@ -72233,7 +73220,7 @@ function installCommon2(registers) {
 }
 
 // src/component/visualMap/installVisualMapContinuous.ts
-function install54(registers) {
+function install55(registers) {
   registers.registerComponentModel(ContinuousModel_default);
   registers.registerComponentView(ContinuousView_default);
   installCommon2(registers);
@@ -72673,16 +73660,16 @@ PiecewiseVisualMapView.type = "visualMap.piecewise";
 var PiecewiseView_default = PiecewiseVisualMapView;
 
 // src/component/visualMap/installVisualMapPiecewise.ts
-function install55(registers) {
+function install56(registers) {
   registers.registerComponentModel(PiecewiseModel_default);
   registers.registerComponentView(PiecewiseView_default);
   installCommon2(registers);
 }
 
 // src/component/visualMap/install.ts
-function install56(registers) {
-  use(install54);
+function install57(registers) {
   use(install55);
+  use(install56);
 }
 
 // src/visual/aria.ts
@@ -72878,7 +73865,7 @@ function ariaPreprocessor(option) {
 }
 
 // src/component/aria/install.ts
-function install57(registers) {
+function install58(registers) {
   registers.registerPreprocessor(ariaPreprocessor);
   registers.registerVisual(registers.PRIORITY.VISUAL.ARIA, ariaVisual);
 }
@@ -73216,7 +74203,7 @@ var sortTransform = {
 };
 
 // src/component/transform/install.ts
-function install58(registers) {
+function install59(registers) {
   registers.registerTransform(filterTransform);
   registers.registerTransform(sortTransform);
 }
@@ -73254,7 +74241,7 @@ var DatasetView = class extends Component_default2 {
   }
 };
 DatasetView.type = "dataset";
-function install59(registers) {
+function install60(registers) {
   registers.registerComponentModel(DatasetModel);
   registers.registerComponentView(DatasetView);
 }
@@ -74976,35 +75963,36 @@ use([
   install28,
   install29,
   install30,
-  install31
+  install31,
+  install32
 ]);
-use(install33);
 use(install34);
-use(install10);
 use(install35);
-use(install17);
+use(install10);
 use(install36);
+use(install17);
 use(install37);
-use(install39);
+use(install38);
 use(install40);
-use(install32);
 use(install41);
+use(install33);
 use(install42);
 use(install43);
 use(install44);
 use(install45);
 use(install46);
 use(install47);
-use(install50);
-use(install53);
+use(install48);
 use(install51);
-use(install52);
-use(install56);
 use(install54);
-use(install55);
+use(install52);
+use(install53);
 use(install57);
+use(install55);
+use(install56);
 use(install58);
 use(install59);
+use(install60);
 use(installUniversalTransition);
 use(installLabelLayout);