tvcharts 0.8.65 → 0.8.67

package/dist/echarts.js

@@ -32,11 +32,13 @@ __export(exports, {
   color: () => color_exports,
   colorToRgba: () => colorToRgba,
   connect: () => connect,
+  connectLayoutAction: () => connectLayoutAction,
   connectLayouts: () => connectLayouts,
   dataTool: () => dataTool,
   dependencies: () => dependencies,
   disConnect: () => disConnect,
   disconnect: () => disconnect,
+  disconnectLayoutAction: () => disconnectLayoutAction,
   disconnectLayouts: () => disconnectLayouts,
   dispose: () => dispose2,
   env: () => env_default,
@@ -230,16 +232,16 @@ var OFFSET = 20;
 var SCALE = 100;
 var defaultWidthMapStr = `007LLmW'55;N0500LLLLLLLLLL00NNNLzWW\\\\WQb\\0FWLg\\bWb\\WQ\\WrWWQ000CL5LLFLL0LL**F*gLLLL5F0LF\\FFF5.5N`;
 function getTextWidthMap(mapStr) {
-  const map7 = {};
+  const map9 = {};
   if (typeof JSON === "undefined") {
-    return map7;
+    return map9;
   }
   for (let i = 0; i < mapStr.length; i++) {
     const char = String.fromCharCode(i + 32);
     const size = (mapStr.charCodeAt(i) - OFFSET) / SCALE;
-    map7[char] = size;
+    map9[char] = size;
   }
-  return map7;
+  return map9;
 }
 var DEFAULT_TEXT_WIDTH_MAP = getTextWidthMap(defaultWidthMapStr);
 var platformApi = {
@@ -3591,15 +3593,15 @@ var LRU = class {
   }
   put(key, value) {
     const list = this._list;
-    const map7 = this._map;
+    const map9 = this._map;
     let removed = null;
-    if (map7[key] == null) {
+    if (map9[key] == null) {
       const len2 = list.len();
       let entry = this._lastRemovedEntry;
       if (len2 >= this._maxSize && len2 > 0) {
         const leastUsedEntry = list.head;
         list.remove(leastUsedEntry);
-        delete map7[leastUsedEntry.key];
+        delete map9[leastUsedEntry.key];
         removed = leastUsedEntry.value;
         this._lastRemovedEntry = leastUsedEntry;
       }
@@ -3610,7 +3612,7 @@ var LRU = class {
       }
       entry.key = key;
       list.insertEntry(entry);
-      map7[key] = entry;
+      map9[key] = entry;
     }
     return removed;
   }
@@ -7878,7 +7880,7 @@ function compressBatches(batchA, batchB) {
   makeMap(batchA || [], mapA);
   makeMap(batchB || [], mapB, mapA);
   return [mapToArray(mapA), mapToArray(mapB)];
-  function makeMap(sourceBatch, map7, otherMap) {
+  function makeMap(sourceBatch, map9, otherMap) {
     for (let i = 0, len2 = sourceBatch.length; i < len2; i++) {
       const seriesId = convertOptionIdName(sourceBatch[i].seriesId, null);
       if (seriesId == null) {
@@ -7891,19 +7893,19 @@ function compressBatches(batchA, batchB) {
         if (otherDataIndices && otherDataIndices[dataIndex]) {
           otherDataIndices[dataIndex] = null;
         } else {
-          (map7[seriesId] || (map7[seriesId] = {}))[dataIndex] = 1;
+          (map9[seriesId] || (map9[seriesId] = {}))[dataIndex] = 1;
         }
       }
     }
   }
-  function mapToArray(map7, isData) {
+  function mapToArray(map9, isData) {
     const result = [];
-    for (const i in map7) {
-      if (map7.hasOwnProperty(i) && map7[i] != null) {
+    for (const i in map9) {
+      if (map9.hasOwnProperty(i) && map9[i] != null) {
         if (isData) {
           result.push(+i);
         } else {
-          const dataIndices = mapToArray(map7[i], true);
+          const dataIndices = mapToArray(map9[i], true);
           dataIndices.length && result.push({seriesId: i, dataIndex: dataIndices});
         }
       }
@@ -11504,9 +11506,9 @@ function isPlot(type) {
 
 // src/chart/helper/createRenderPlanner.ts
 function createRenderPlanner() {
-  const inner24 = makeInner();
+  const inner25 = makeInner();
   return function(seriesModel) {
-    const fields = inner24(seriesModel);
+    const fields = inner25(seriesModel);
     const pipelineContext = seriesModel.pipelineContext;
     const originalLarge = !!fields.large;
     const originalProgressive = !!fields.progressiveRender;
@@ -14325,9 +14327,9 @@ function setTextStyleCommon(textStyle, textStyleModel, opt, isNotNormal, isAttac
   if (overflow) {
     textStyle.overflow = overflow;
   }
-  const margin2 = textStyleModel.get("minMargin");
-  if (margin2 != null) {
-    textStyle.margin = margin2;
+  const margin3 = textStyleModel.get("minMargin");
+  if (margin3 != null) {
+    textStyle.margin = margin3;
   }
   setTokenTextStyle(textStyle, textStyleModel, globalTextStyle, opt, isNotNormal, isAttached, true, false);
 }
@@ -15644,7 +15646,7 @@ function boxLayout(orient, group, gap, maxWidth, maxHeight) {
 var box = boxLayout;
 var vbox = curry(boxLayout, "vertical");
 var hbox = curry(boxLayout, "horizontal");
-function getAvailableSize(positionInfo, containerRect, margin2) {
+function getAvailableSize(positionInfo, containerRect, margin3) {
   const containerWidth = containerRect.width;
   const containerHeight = containerRect.height;
   let x = parsePercent2(positionInfo.left, containerWidth);
@@ -15655,14 +15657,14 @@ function getAvailableSize(positionInfo, containerRect, margin2) {
   (isNaN(x2) || isNaN(parseFloat(positionInfo.right))) && (x2 = containerWidth);
   (isNaN(y) || isNaN(parseFloat(positionInfo.top))) && (y = 0);
   (isNaN(y2) || isNaN(parseFloat(positionInfo.bottom))) && (y2 = containerHeight);
-  margin2 = normalizeCssArray2(margin2 || 0);
+  margin3 = normalizeCssArray2(margin3 || 0);
   return {
-    width: Math.max(x2 - x - margin2[1] - margin2[3], 0),
-    height: Math.max(y2 - y - margin2[0] - margin2[2], 0)
+    width: Math.max(x2 - x - margin3[1] - margin3[3], 0),
+    height: Math.max(y2 - y - margin3[0] - margin3[2], 0)
   };
 }
-function getLayoutRect(positionInfo, containerRect, margin2) {
-  margin2 = normalizeCssArray2(margin2 || 0);
+function getLayoutRect(positionInfo, containerRect, margin3) {
+  margin3 = normalizeCssArray2(margin3 || 0);
   const containerWidth = containerRect.width;
   const containerHeight = containerRect.height;
   let left = parsePercent2(positionInfo.left, containerWidth);
@@ -15671,8 +15673,8 @@ function getLayoutRect(positionInfo, containerRect, margin2) {
   const bottom = parsePercent2(positionInfo.bottom, containerHeight);
   let width = parsePercent2(positionInfo.width, containerWidth);
   let height = parsePercent2(positionInfo.height, containerHeight);
-  const verticalMargin = margin2[2] + margin2[0];
-  const horizontalMargin = margin2[1] + margin2[3];
+  const verticalMargin = margin3[2] + margin3[0];
+  const horizontalMargin = margin3[1] + margin3[3];
   const aspect = positionInfo.aspect;
   if (isNaN(width)) {
     width = containerWidth - right - horizontalMargin - left;
@@ -15703,7 +15705,7 @@ function getLayoutRect(positionInfo, containerRect, margin2) {
   }
   switch (positionInfo.left || positionInfo.right) {
     case "center":
-      left = containerWidth / 2 - width / 2 - margin2[3];
+      left = containerWidth / 2 - width / 2 - margin3[3];
       break;
     case "right":
       left = containerWidth - width - horizontalMargin;
@@ -15712,7 +15714,7 @@ function getLayoutRect(positionInfo, containerRect, margin2) {
   switch (positionInfo.top || positionInfo.bottom) {
     case "middle":
     case "center":
-      top = containerHeight / 2 - height / 2 - margin2[0];
+      top = containerHeight / 2 - height / 2 - margin3[0];
       break;
     case "bottom":
       top = containerHeight - height - verticalMargin;
@@ -15726,11 +15728,11 @@ function getLayoutRect(positionInfo, containerRect, margin2) {
   if (isNaN(height)) {
     height = containerHeight - verticalMargin - top - (bottom || 0);
   }
-  const rect = new BoundingRect_default(left + margin2[3], top + margin2[0], width, height);
-  rect.margin = margin2;
+  const rect = new BoundingRect_default(left + margin3[3], top + margin3[0], width, height);
+  rect.margin = margin3;
   return rect;
 }
-function positionElement(el, positionInfo, containerRect, margin2, opt, out2) {
+function positionElement(el, positionInfo, containerRect, margin3, opt, out2) {
   const h = !opt || !opt.hv || opt.hv[0];
   const v = !opt || !opt.hv || opt.hv[1];
   const boundingMode = opt && opt.boundingMode || "all";
@@ -15751,7 +15753,7 @@ function positionElement(el, positionInfo, containerRect, margin2, opt, out2) {
       rect.applyTransform(transform2);
     }
   }
-  const layoutRect = getLayoutRect(defaults({width: rect.width, height: rect.height}, positionInfo), containerRect, margin2);
+  const layoutRect = getLayoutRect(defaults({width: rect.width, height: rect.height}, positionInfo), containerRect, margin3);
   const dx = h ? layoutRect.x - rect.x : 0;
   const dy = v ? layoutRect.y - rect.y : 0;
   if (boundingMode === "raw") {
@@ -16323,9 +16325,9 @@ function getNearestPalette(palettes, requestColorNum) {
   }
   return palettes[paletteNum - 1];
 }
-function getFromPalette(that, inner24, defaultPalette, layeredPalette, name, scope, requestNum) {
+function getFromPalette(that, inner25, defaultPalette, layeredPalette, name, scope, requestNum) {
   scope = scope || that;
-  const scopeFields = inner24(scope);
+  const scopeFields = inner25(scope);
   const paletteIdx = scopeFields.paletteIdx || 0;
   const paletteNameMap = scopeFields.paletteNameMap = scopeFields.paletteNameMap || {};
   if (paletteNameMap.hasOwnProperty(name)) {
@@ -16343,9 +16345,9 @@ function getFromPalette(that, inner24, defaultPalette, layeredPalette, name, sco
   scopeFields.paletteIdx = (paletteIdx + 1) % palette.length;
   return pickedPaletteItem;
 }
-function clearPalette(that, inner24) {
-  inner24(that).paletteIdx = 0;
-  inner24(that).paletteNameMap = {};
+function clearPalette(that, inner25) {
+  inner25(that).paletteIdx = 0;
+  inner25(that).paletteNameMap = {};
 }
 
 // src/model/Global.ts
@@ -16408,6 +16410,7 @@ var BUILTIN_CHARTS_MAP = {
   lines: "LinesChart",
   linesPlot: "LinesPlotChart",
   strategy: "StrategyChart",
+  playbackOrder: "PlaybackOrderChart",
   mineLines: "MineLinesChart",
   minePolyLines: "MinePolyLinesChart",
   lineFills: "LineFillsChart",
@@ -16755,6 +16758,9 @@ echarts.use([${seriesImportName}]);`);
     const nameStr = convertOptionIdName(name, null);
     return filter(this._componentsMap.get("series"), (oneSeries) => !!oneSeries && nameStr != null && oneSeries.name === nameStr);
   }
+  getMainSeries() {
+    return find(this._componentsMap.get("series"), (oneSeries) => !!oneSeries && oneSeries.option.isMain);
+  }
   getSeriesByIndex(seriesIndex) {
     return this._componentsMap.get("series")[seriesIndex];
   }
@@ -16930,7 +16936,8 @@ var availableMethods = [
   "getOption",
   "getId",
   "updateLabelLayout",
-  "trigger"
+  "trigger",
+  "getComponentView"
 ];
 var ExtensionAPI = class {
   constructor(ecInstance) {
@@ -22531,6 +22538,29 @@ var TriangleLeft = Path_default.extend({
     path.closePath();
   }
 });
+var LineTriangleLeft = Path_default.extend({
+  type: "lineTriangleLeft",
+  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;
+    const lineWidth = 2;
+    path.moveTo(cx + width, cy + height);
+    path.lineTo(cx - width, cy);
+    path.lineTo(cx + width, cy - height);
+    path.lineTo(cx + width + lineWidth, cy - height + lineWidth);
+    path.lineTo(cx - width + lineWidth + 2, cy);
+    path.lineTo(cx + width + lineWidth, cy + height - lineWidth);
+    path.lineTo(cx + width, cy + height);
+  }
+});
 var TriangleRight = Path_default.extend({
   type: "triangleRight",
   shape: {
@@ -22550,6 +22580,29 @@ var TriangleRight = Path_default.extend({
     path.closePath();
   }
 });
+var LineTriangleRight = Path_default.extend({
+  type: "lineTriangleRight",
+  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;
+    const lineWidth = 2;
+    path.moveTo(cx - width, cy + height);
+    path.lineTo(cx + width, cy);
+    path.lineTo(cx - width, cy - height);
+    path.lineTo(cx - width - lineWidth, cy - height + lineWidth);
+    path.lineTo(cx + width - lineWidth - 2, cy);
+    path.lineTo(cx - width - lineWidth, cy + height - lineWidth);
+    path.lineTo(cx - width, cy + height);
+  }
+});
 var ArrowUp = Path_default.extend({
   type: "arrowUp",
   shape: {
@@ -22575,6 +22628,33 @@ var ArrowUp = Path_default.extend({
     ctx2.lineTo(cx, cy - height);
   }
 });
+var marginArrow = 4;
+var LineArrowUp = Path_default.extend({
+  type: "lineArrowUp",
+  shape: {
+    cx: 0,
+    cy: 0,
+    width: 0,
+    height: 0,
+    triangleHeight: 0,
+    count: 1
+  },
+  buildPath: function(ctx2, shape) {
+    const {cx, cy, triangleHeight, count: count2} = shape;
+    const width = shape.width / 2;
+    const height = shape.height / 2;
+    let baseY = cy;
+    for (let index = 0; index < count2; index++) {
+      const triangleY = baseY - height + triangleHeight;
+      ctx2.moveTo(cx + width, triangleY);
+      ctx2.lineTo(cx, baseY - height);
+      ctx2.lineTo(cx - width, triangleY);
+      baseY = baseY + marginArrow;
+    }
+    ctx2.moveTo(cx, baseY - height - marginArrow);
+    ctx2.lineTo(cx, baseY + height - marginArrow);
+  }
+});
 var ArrowUpClose = Path_default.extend({
   type: "arrowUpClose",
   shape: {
@@ -22627,6 +22707,32 @@ var ArrowDown = Path_default.extend({
     ctx2.lineTo(cx, cy + height);
   }
 });
+var LineArrowDown = Path_default.extend({
+  type: "lineArrowDown",
+  shape: {
+    cx: 0,
+    cy: 0,
+    width: 0,
+    height: 0,
+    triangleHeight: 0,
+    count: 1
+  },
+  buildPath: function(ctx2, shape) {
+    const {cx, cy, triangleHeight, count: count2} = shape;
+    const width = shape.width / 2;
+    const height = shape.height / 2;
+    let baseY = cy;
+    for (let index = 0; index < count2; index++) {
+      const triangleY = baseY + height - triangleHeight;
+      ctx2.moveTo(cx + width, triangleY);
+      ctx2.lineTo(cx, baseY + height);
+      ctx2.lineTo(cx - width, triangleY);
+      baseY = baseY - marginArrow;
+    }
+    ctx2.moveTo(cx, baseY + height + marginArrow);
+    ctx2.lineTo(cx, baseY - height + marginArrow);
+  }
+});
 var ArrowDownClose = Path_default.extend({
   type: "arrowDownClose",
   shape: {
@@ -22677,11 +22783,15 @@ var symbolCtors = {
   xCross: XCross,
   lCross: LCross,
   arrowUp: ArrowUp,
+  lineArrowUp: LineArrowUp,
   flag: Flag,
   triangleDown: TriangleDown,
   triangleLeft: TriangleLeft,
   triangleRight: TriangleRight,
+  lineTriangleLeft: LineTriangleLeft,
+  lineTriangleRight: LineTriangleRight,
   arrowDown: ArrowDown,
+  lineArrowDown: LineArrowDown,
   arrowUpClose: ArrowUpClose,
   arrowDownClose: ArrowDownClose
 };
@@ -22885,6 +22995,18 @@ var symbolShapeMakers = {
     shape.width = w;
     shape.height = h;
   },
+  lineTriangleLeft: function(x, y, w, h, shape) {
+    shape.cx = x + w / 2;
+    shape.cy = y;
+    shape.width = w;
+    shape.height = h;
+  },
+  lineTriangleRight: function(x, y, w, h, shape) {
+    shape.cx = x - w / 2;
+    shape.cy = y;
+    shape.width = w;
+    shape.height = h;
+  },
   arrowUp: function(x, y, w, h, shape, parentShape) {
     shape.rectWidth = parentShape.triangleWidth;
     shape.triangleHeight = parentShape.triangleHeight;
@@ -22893,6 +23015,14 @@ var symbolShapeMakers = {
     shape.width = w;
     shape.height = h;
   },
+  lineArrowUp: function(x, y, w, h, shape, parentShape) {
+    shape.triangleHeight = parentShape.triangleHeight;
+    shape.count = parentShape.count;
+    shape.cx = x;
+    shape.cy = y;
+    shape.width = w;
+    shape.height = h;
+  },
   arrowDown: function(x, y, w, h, shape, parentShape) {
     shape.rectWidth = parentShape.triangleWidth;
     shape.triangleHeight = parentShape.triangleHeight;
@@ -22901,6 +23031,14 @@ var symbolShapeMakers = {
     shape.width = w;
     shape.height = h;
   },
+  lineArrowDown: function(x, y, w, h, shape, parentShape) {
+    shape.triangleHeight = parentShape.triangleHeight;
+    shape.count = parentShape.count;
+    shape.cx = x;
+    shape.cy = y;
+    shape.width = w;
+    shape.height = h;
+  },
   arrowUpClose: function(x, y, w, h, shape, parentShape) {
     shape.rectWidth = parentShape.triangleWidth;
     shape.triangleHeight = parentShape.triangleHeight;
@@ -24171,6 +24309,9 @@ var ECharts = class extends Eventful_default {
   getDom() {
     return this._dom;
   }
+  getComponentView(viewId) {
+    return this._componentsMap[viewId];
+  }
   getId() {
     return this.id;
   }
@@ -24658,6 +24799,20 @@ var ECharts = class extends Eventful_default {
     const axis = seriesModel.getBaseAxis();
     return axis.scale.getLabel({value: dataIndex});
   }
+  getPlaybackLastBarRightSideDiffBarCount(time) {
+    const xAxisModal = this._model.getComponent("xAxis", 0);
+    const scale4 = xAxisModal.axis.scale;
+    const startIndex = scale4.getOrdinalMeta().getClosestTime(String(time));
+    const extend2 = scale4.getExtent();
+    const axis = xAxisModal.axis;
+    const lastIndex = extend2[1];
+    const minLength = extend2[0] - extend2[1];
+    const axisWidth = axis.getExtent()[1];
+    const startX = Math.max(axis.dataToCoord(startIndex), 0);
+    const endX = Math.min(axis.dataToCoord(lastIndex), axisWidth);
+    console.log("%c [ minLength ]-1359", "font-size:13px; background:pink; color:#bf2c9f;", xAxisModal, minLength, startIndex, extend2[1]);
+    return (endX - startX) / scale4.barSpace + 0.5;
+  }
   getViewOfComponentModel(componentModel) {
     return this._componentsMap[componentModel.__viewId];
   }
@@ -24731,7 +24886,8 @@ var ECharts = class extends Eventful_default {
       "alarmdelete",
       "selectidchanged",
       "playbackselected",
-      "snapshotzoom"
+      "snapshotzoom",
+      "playbackorder"
     ], (eventType) => {
       this._messageCenter.on(eventType, function(event) {
         this.trigger(eventType, event);
@@ -24902,6 +25058,13 @@ var ECharts = class extends Eventful_default {
           });
         }
         break;
+      case "playbackselect":
+        if (payload.playbackSelect.time) {
+          const xAxisModal2 = this._model.getComponent("xAxis", 0);
+          const scale5 = xAxisModal2.axis.scale;
+          payload.playbackSelect.startIndex = scale5.getOrdinalMeta().getClosestTime(payload.playbackSelect.time);
+        }
+        break;
     }
     return payload;
   }
@@ -25086,6 +25249,7 @@ var ECharts = class extends Eventful_default {
     }
   }
   scrollByDistance(distance2, animationDuration) {
+    console.log("%c [ distance ]-2002", "font-size:13px; background:pink; color:#bf2c9f;", distance2);
     const xAxisModal = this._model.getComponent("xAxis", 0);
     const scale4 = xAxisModal.axis.scale;
     const duration = isNumber(animationDuration) && animationDuration > 0 ? animationDuration : 0;
@@ -25125,7 +25289,7 @@ var ECharts = class extends Eventful_default {
     }
     const xAxisModal = this._model.getComponent("xAxis", 0);
     const scale4 = xAxisModal.axis.scale;
-    const initDistance = scale4.lastBarRightSideDiffBarCount > 0 ? scale4.lastBarRightSideDiffBarCount * scale4.barSpace : defaultLastBarRightSideDiffBarCount ? defaultLastBarRightSideDiffBarCount * scale4.barSpace : 50;
+    const initDistance = defaultLastBarRightSideDiffBarCount ? defaultLastBarRightSideDiffBarCount * scale4.barSpace : 50;
     const distance2 = scale4.lastBarRightSideDiffBarCount * scale4.barSpace - initDistance;
     this.scrollByDistance(distance2, animationDuration);
   }
@@ -26095,7 +26259,8 @@ var actions = {};
 var eventActionMap = {};
 var layoutEventActionMap = {
   updateaxispointer: "updateAxisPointer",
-  visiblechanged: "visiblechanged"
+  visiblechanged: "visiblechanged",
+  playbackselect: "playbackSelect"
 };
 var layoutEventAbleMap = {};
 var dataProcessorFuncs = [];
@@ -26164,6 +26329,19 @@ function connectLayouts(layoutId, actionAuth) {
   layoutEventAbleMap[layoutId] = actionAuth;
   return layoutId;
 }
+function connectLayoutAction(layoutId, action) {
+  connectedLayouts[layoutId] = true;
+  const auths = layoutEventAbleMap[layoutId] || [];
+  if (!auths.includes(action)) {
+    auths.push(action);
+  }
+  layoutEventAbleMap[layoutId] = auths;
+  return layoutId;
+}
+function disconnectLayoutAction(layoutId, action) {
+  layoutEventAbleMap[layoutId] = layoutEventAbleMap[layoutId].filter((item) => item !== action);
+  return layoutId;
+}
 function disconnectLayouts(layoutId) {
   connectedLayouts[layoutId] = false;
 }
@@ -26500,25 +26678,25 @@ var DataDiffer = class {
       newDataIndexMap[newKey] = null;
     }
   }
-  _initIndexMap(arr, map7, keyArr, keyGetterName) {
+  _initIndexMap(arr, map9, keyArr, keyGetterName) {
     const cbModeMultiple = this._diffModeMultiple;
     for (let i = 0; i < arr.length; i++) {
       const key = "_ec_" + this[keyGetterName](arr[i], i);
       if (!cbModeMultiple) {
         keyArr[i] = key;
       }
-      if (!map7) {
+      if (!map9) {
         continue;
       }
-      const idxMapVal = map7[key];
+      const idxMapVal = map9[key];
       const idxMapValLen = dataIndexMapValueLength(idxMapVal);
       if (idxMapValLen === 0) {
-        map7[key] = i;
+        map9[key] = i;
         if (cbModeMultiple) {
           keyArr.push(key);
         }
       } else if (idxMapValLen === 1) {
-        map7[key] = [idxMapVal, i];
+        map9[key] = [idxMapVal, i];
       } else {
         idxMapVal.push(i);
       }
@@ -27655,15 +27833,15 @@ function getDimCount(source, sysDims, dimsDef, optDimCount) {
   });
   return dimCount;
 }
-function genCoordDimName(name, map7, fromZero) {
-  if (fromZero || map7.hasKey(name)) {
+function genCoordDimName(name, map9, fromZero) {
+  if (fromZero || map9.hasKey(name)) {
     let i = 0;
-    while (map7.hasKey(name + i)) {
+    while (map9.hasKey(name + i)) {
       i++;
     }
     name += i;
   }
-  map7.set(name, true);
+  map9.set(name, true);
   return name;
 }
 
@@ -28306,13 +28484,13 @@ var OrdinalMeta = class {
       this.categories[index] = category;
       return index;
     }
-    const map7 = this._getOrCreateMap();
-    index = map7.get(category);
+    const map9 = this._getOrCreateMap();
+    index = map9.get(category);
     if (index == null) {
       if (needCollect) {
         index = this.categories.length;
         this.categories[index] = category;
-        map7.set(category, index);
+        map9.set(category, index);
       } else {
         index = NaN;
       }
@@ -30518,6 +30696,11 @@ function contrastColor2(color2) {
   const brightness = (r * 299 + g * 587 + b * 114) / 1e3;
   return brightness >= 130 ? "#000000" : "#ffffff";
 }
+function getIsLightColor(color2) {
+  const [r, g, b] = parseColor(color2);
+  const brightness = (r * 299 + g * 587 + b * 114) / 1e3;
+  return brightness >= 130;
+}
 function removeTransparency(color2) {
   const [r, g, b] = parseColor(color2);
   return `rgb(${r}, ${g}, ${b})`;
@@ -30527,6 +30710,49 @@ function isColorSimilarManhattan(rgbas1, rgbas2, threshold01 = 0.1, weightAlpha
   const sum2 = Math.abs(rgbas1[0] - rgbas2[0]) + Math.abs(rgbas1[1] - rgbas2[1]) + Math.abs(rgbas1[2] - rgbas2[2]) + Math.abs((rgbas1[3] - rgbas2[3]) * weightAlpha);
   return sum2 <= maxSum;
 }
+function blendColors(foreground, background) {
+  const fg = parseColorToRgba(foreground);
+  const bg = parseColorToRgba(background);
+  const fgAlpha = fg.a !== void 0 ? fg.a : 1;
+  const bgAlpha = bg.a !== void 0 ? bg.a : 1;
+  const alpha = fgAlpha + bgAlpha * (1 - fgAlpha);
+  const r = Math.round((fg.r * fgAlpha + bg.r * bgAlpha * (1 - fgAlpha)) / alpha);
+  const g = Math.round((fg.g * fgAlpha + bg.g * bgAlpha * (1 - fgAlpha)) / alpha);
+  const b = Math.round((fg.b * fgAlpha + bg.b * bgAlpha * (1 - fgAlpha)) / alpha);
+  return rgbToHex(r, g, b);
+}
+function parseColorToRgba(color2) {
+  color2 = color2.trim().toLowerCase();
+  if (color2.startsWith("rgba")) {
+    const match = color2.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
+    if (match) {
+      return {
+        r: parseInt(match[1]),
+        g: parseInt(match[2]),
+        b: parseInt(match[3]),
+        a: match[4] ? parseFloat(match[4]) : void 0
+      };
+    }
+  }
+  if (color2.startsWith("#")) {
+    color2 = color2.substring(1);
+    if (color2.length === 3) {
+      color2 = color2[0] + color2[0] + color2[1] + color2[1] + color2[2] + color2[2];
+    }
+    const r = parseInt(color2.substring(0, 2), 16);
+    const g = parseInt(color2.substring(2, 4), 16);
+    const b = parseInt(color2.substring(4, 6), 16);
+    const result = {r, g, b};
+    if (color2.length === 8) {
+      result.a = parseInt(color2.substring(6, 8), 16) / 255;
+    }
+    return result;
+  }
+  throw new Error(`\u65E0\u6CD5\u89E3\u6790\u7684\u989C\u8272\u683C\u5F0F: ${color2}`);
+}
+function rgbToHex(r, g, b) {
+  return `#${Math.round(r).toString(16).padStart(2, "0")}${Math.round(g).toString(16).padStart(2, "0")}${Math.round(b).toString(16).padStart(2, "0")}`;
+}
 
 // src/data/scale-time/default-tick-mark-formatter.ts
 function weightToTickMarkType(weight, timeVisible, secondsVisible) {
@@ -31006,9 +31232,9 @@ var Axis = class {
 function fixExtentWithBands(extent3, nTick) {
   const size = extent3[1] - extent3[0];
   const len2 = nTick;
-  const margin2 = size / len2 / 2;
-  extent3[0] += margin2;
-  extent3[1] -= margin2;
+  const margin3 = size / len2 / 2;
+  extent3[0] += margin3;
+  extent3[1] -= margin3;
 }
 function fixOnBandTicksCoords(axis, ticksCoords, alignWithLabel, clamp2) {
   const ticksLen = ticksCoords.length;
@@ -33126,19 +33352,19 @@ function isDef(s) {
   return s !== void 0;
 }
 function createKeyToOldIdx(children, beginIdx, endIdx) {
-  const map7 = {};
+  const map9 = {};
   for (let i = beginIdx; i <= endIdx; ++i) {
     const key = children[i].key;
     if (key !== void 0) {
       if (true) {
-        if (map7[key] != null) {
+        if (map9[key] != null) {
           console.error(`Duplicate key ${key}`);
         }
       }
-      map7[key] = i;
+      map9[key] = i;
     }
   }
-  return map7;
+  return map9;
 }
 function sameVnode(vnode1, vnode2) {
   const isSameKey = vnode1.key === vnode2.key;
@@ -36428,9 +36654,9 @@ var LineView = class extends Chart_default {
         });
       }
       if (valueAnimation) {
-        const inner24 = labelInner(endLabel);
-        if (typeof inner24.setLabelText === "function") {
-          inner24.setLabelText(value);
+        const inner25 = labelInner(endLabel);
+        if (typeof inner25.setLabelText === "function") {
+          inner25.setLabelText(value);
         }
       }
     }
@@ -38180,8 +38406,8 @@ function constrainTextWidth(layout18, availableWidth, forceRecalculate = false)
     }
     const newRect = label.getBoundingRect();
     textRect.width = newRect.width;
-    const margin2 = (label.style.margin || 0) + 2.1;
-    textRect.height = newRect.height + margin2;
+    const margin3 = (label.style.margin || 0) + 2.1;
+    textRect.height = newRect.height + margin3;
     textRect.y -= (textRect.height - oldHeight) / 2;
   }
 }
@@ -38309,9 +38535,9 @@ function pieLabelLayout(seriesModel) {
     if (!isLabelInside) {
       const textRect = label.getBoundingRect().clone();
       textRect.applyTransform(label.getComputedTransform());
-      const margin2 = (label.style.margin || 0) + 2.1;
-      textRect.y -= margin2 / 2;
-      textRect.height += margin2;
+      const margin3 = (label.style.margin || 0) + 2.1;
+      textRect.y -= margin3 / 2;
+      textRect.height += margin3;
       labelLayoutList.push({
         label,
         labelLine,
@@ -39731,12 +39957,12 @@ var Grid2 = class {
           const labelUnionRect = estimateLabelUnionRect(axis);
           if (labelUnionRect) {
             const dim = axis.isHorizontal() ? "height" : "width";
-            const margin2 = axis.model.get(["axisLabel", "margin"]);
-            gridRect[dim] -= labelUnionRect[dim] + margin2;
+            const margin3 = axis.model.get(["axisLabel", "margin"]);
+            gridRect[dim] -= labelUnionRect[dim] + margin3;
             if (axis.position === "top") {
-              gridRect.y += labelUnionRect.height + margin2;
+              gridRect.y += labelUnionRect.height + margin3;
             } else if (axis.position === "left") {
-              gridRect.x += labelUnionRect.width + margin2;
+              gridRect.x += labelUnionRect.width + margin3;
             }
           }
         }
@@ -44119,15 +44345,15 @@ var GEO_DEFAULT_PARAMS = {
 };
 var geo2DDimensions = ["lng", "lat"];
 var Geo = class extends View_default {
-  constructor(name, map7, opt) {
+  constructor(name, map9, opt) {
     super(name);
     this.dimensions = geo2DDimensions;
     this.type = "geo";
     this._nameCoordMap = createHashMap();
-    this.map = map7;
+    this.map = map9;
     let projection = opt.projection;
-    const source = geoSourceManager_default.load(map7, opt.nameMap, opt.nameProperty);
-    const resource = geoSourceManager_default.getGeoResource(map7);
+    const source = geoSourceManager_default.load(map9, opt.nameMap, opt.nameProperty);
+    const resource = geoSourceManager_default.getGeoResource(map9);
     const resourceType = this.resourceType = resource ? resource.type : null;
     const regions = this.regions = source.regions;
     const defaultParams = GEO_DEFAULT_PARAMS[resource.type];
@@ -44136,7 +44362,7 @@ var Geo = class extends View_default {
     if (projection) {
       if (resourceType === "geoSVG") {
         if (true) {
-          warn(`Map ${map7} with SVG source can't use projection. Only GeoJSON source supports projection.`);
+          warn(`Map ${map9} with SVG source can't use projection. Only GeoJSON source supports projection.`);
         }
         projection = null;
       }
@@ -52417,9 +52643,9 @@ function getTransform2(controller) {
   return getTransform(controller.group);
 }
 function getGlobalDirection1(controller, localDirName) {
-  const map7 = {w: "left", e: "right", n: "top", s: "bottom"};
+  const map9 = {w: "left", e: "right", n: "top", s: "bottom"};
   const inverseMap = {left: "w", right: "e", top: "n", bottom: "s"};
-  const dir3 = transformDirection(map7[localDirName], getTransform2(controller));
+  const dir3 = transformDirection(map9[localDirName], getTransform2(controller));
   return inverseMap[dir3];
 }
 function getGlobalDirection2(controller, localDirNameSeq) {
@@ -57335,6 +57561,480 @@ function install25(registers) {
   registers.registerLayout(StrategyLayout_default);
 }
 
+// src/chart/playbackOrder/constants.ts
+var LongColor2 = "rgb(41, 98, 255)";
+var ShortColor2 = "rgb(255, 23, 68)";
+var LongBg = "rgba(41, 98, 255, 0.2)";
+var ShortBG = "rgba(255, 23, 68, 0.2)";
+var ArrowSize2 = [10, 16];
+var TriangleSize2 = [6, 10];
+
+// src/chart/playbackOrder/PlaybackHtmlContent.ts
+function formatAmount(amount, decimalPlaces = 2) {
+  if (amount === 0)
+    return "0";
+  const units = [
+    {value: 1, symbol: ""},
+    {value: 1e3, symbol: "K"},
+    {value: 1e6, symbol: "M"}
+  ];
+  let selectedUnit = units[0];
+  for (let i = units.length - 1; i >= 0; i--) {
+    if (amount >= units[i].value) {
+      selectedUnit = units[i];
+      break;
+    }
+  }
+  const formattedValue = (amount / selectedUnit.value).toFixed(decimalPlaces);
+  const cleanValue = formattedValue.replace(/\.0+$|(\.[0-9]*[1-9])0+$/, "$1");
+  return `${cleanValue}${selectedUnit.symbol}`;
+}
+function formatTimestamp(timestamp) {
+  const date = new Date(timestamp);
+  const months = [
+    "1\u6708",
+    "2\u6708",
+    "3\u6708",
+    "4\u6708",
+    "5\u6708",
+    "6\u6708",
+    "7\u6708",
+    "8\u6708",
+    "9\u6708",
+    "10\u6708",
+    "11\u6708",
+    "12\u6708"
+  ];
+  const weekdays = ["\u5468\u65E5", "\u5468\u4E00", "\u5468\u4E8C", "\u5468\u4E09", "\u5468\u56DB", "\u5468\u4E94", "\u5468\u516D"];
+  const month = months[date.getMonth()];
+  const day = date.getDate();
+  const weekday = weekdays[date.getDay()];
+  const hours2 = date.getHours().toString().padStart(2, "0");
+  const minutes2 = date.getMinutes().toString().padStart(2, "0");
+  const time = `${hours2}:${minutes2}`;
+  return `${month}${day}\u65E5${weekday} ${time}`;
+}
+var margin = 10;
+var TooltipHTMLContent = class {
+  constructor(api2) {
+    this._show = false;
+    this._enterable = true;
+    if (env_default.wxa) {
+      return null;
+    }
+    const el = document.createElement("div");
+    el.domBelongToZr = true;
+    this.el = el;
+    const container = api2.getDom();
+    (container || api2.getDom()).appendChild(el);
+    el.onmouseenter = function() {
+      api2.dispatchAction({
+        type: "updateAxisPointer",
+        currTrigger: "globalout"
+      });
+    };
+    this._api = api2;
+    this._container = container;
+  }
+  show({isUp, orders, time, x, y, precision}) {
+    const el = this.el;
+    const style = el.style;
+    style.position = "absolute";
+    style.left = x + margin + "px";
+    style.top = y - margin + "px";
+    style.visibility = "visible";
+    style.opacity = "1";
+    const isMuti = orders.length > 1;
+    const formatTime2 = formatTimestamp(time * 1e3);
+    const order = orders[0];
+    let title = `${formatAmount(order.size)} @ ${order.price.toFixed(precision)}<span style="margin-left: 12px; color: var(--placeholder-text-color);">${formatTime2}</span>`;
+    let ordersHtml = "";
+    if (isMuti) {
+      let totalPrice = 0;
+      let totalSize = 0;
+      ordersHtml = `<div style="margin-bottom: 12px; font-size: 12px; color: var(--placeholder-text-color);">TRADES</div>`;
+      each(orders, (item) => {
+        totalPrice = totalPrice + item.price;
+        totalSize += item.size;
+        ordersHtml = `${ordersHtml}<div style="height: 18px; margin-bottom: 2px; font-size: 12px; margin-left: 4px;">${formatAmount(item.size)} @ ${item.price.toFixed(precision)}<span style="margin-left: 12px; color: var(--placeholder-text-color);">8\u670813\u65E5\u5468\u4E09 05:00</span></div>`;
+      });
+      title = `${formatAmount(totalSize)} @ ${(totalPrice / orders.length).toFixed(precision)} avg price`;
+    }
+    const primaryColor = isUp ? "--primary-color" : "--color-kl-red";
+    el.innerHTML = `<div style="padding-left: 4px;border-left: 4px solid var(${primaryColor});width: 290px;z-index: 10;border-radius: 6px;background: var(--container-bg);box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px 0px;color: var(--title-color);">
+        <div style="padding: 16px 12px;"><div style="display: flex; align-items: center; margin-bottom: 12px;">
+        <div style="height: 20px; border-radius: 50px; min-width: 20px; margin-right: 8px; text-align: center; background-color: var(${primaryColor}); font-size: 12px; color: #fff;line-height:20px;">${orders.length}</div>
+        <div style="font-weight: 600; font-size: 18px;">\u4E70\u5165</div></div><div style="font-size: 13px; margin-bottom: 12px;">${title}</div>
+        ${ordersHtml}
+        </div>
+        </div>
+        `;
+    console.log("====", el.clientHeight, el.clientWidth);
+    if (x + el.clientWidth > this._container.clientWidth) {
+      style.left = x - el.clientWidth - margin + "px";
+    }
+    if (y + el.clientHeight > this._container.clientHeight) {
+      style.top = y - el.clientHeight - margin + "px";
+    }
+  }
+  getSize() {
+    const el = this.el;
+    return [el.offsetWidth, el.offsetHeight];
+  }
+  hide() {
+    const style = this.el.style;
+    style.visibility = "hidden";
+    style.opacity = "0";
+    env_default.transform3dSupported && (style.willChange = "");
+    this._show = false;
+  }
+  isShow() {
+    return this._show;
+  }
+  dispose() {
+    const parentNode2 = this.el.parentNode;
+    parentNode2 && parentNode2.removeChild(this.el);
+    this.el = this._container = null;
+  }
+};
+var PlaybackHtmlContent_default = TooltipHTMLContent;
+
+// src/chart/playbackOrder/PlaybackOrderView.ts
+var inner11 = makeInner();
+var PlaybackOrderView2 = class extends Chart_default {
+  constructor() {
+    super(...arguments);
+    this.type = PlaybackOrderView2.type;
+  }
+  render(seriesModel, ecModel, api2) {
+    const data = seriesModel.getData();
+    this.seriesModel = seriesModel;
+    this._renderSymbol(data, seriesModel);
+    this._renderHover();
+    if (!this.htmlContent) {
+      this.htmlContent = new PlaybackHtmlContent_default(api2);
+      api2.getZr().on("click", this._clickGlobal, this);
+    }
+    const clipPath = seriesModel.get("clip", true) && createClipPath(seriesModel.coordinateSystem, false, seriesModel);
+    if (clipPath) {
+      this.group.setClipPath(clipPath);
+    } else {
+      this.group.removeClipPath();
+    }
+  }
+  _renderHover() {
+    const obj = this._hoverParams;
+    if (!obj) {
+      return;
+    }
+    const seriesModel = this.seriesModel;
+    const data = seriesModel.getData();
+    const isUp = obj.type === "up";
+    const dataModal = data.getItemModel(obj.index);
+    const orders = dataModal.get(isUp ? "upOrders" : "downOrders");
+    if (!orders) {
+      return;
+    }
+    let totalPrice = 0;
+    each(orders, (item) => {
+      totalPrice = item.price + totalPrice;
+    });
+    const coordSys = seriesModel.coordinateSystem;
+    const avgPrice = totalPrice / orders.length;
+    const store = data.getStore();
+    const x = store.get(0, obj.index);
+    const [triangleX, triangleY] = coordSys.dataToPoint([x, avgPrice]);
+    const z = seriesModel.get("z");
+    this._hoverGroup.childAt(0).attr({
+      style: {
+        fill: isUp ? LongColor2 : ShortColor2,
+        lineWidth: 1,
+        stroke: "#000"
+      },
+      shape: {
+        x: triangleX,
+        y: triangleY,
+        width: TriangleSize2[0],
+        height: TriangleSize2[1]
+      },
+      z
+    });
+    const arrows = data.getLayout(isUp ? "upArrow" : "downArrow");
+    const arrow = arrows[obj.orderIndex];
+    const width = ArrowSize2[0] + 8;
+    const height = ArrowSize2[1] + 8;
+    this._hoverGroup.childAt(1).attr({
+      style: {
+        fill: isUp ? LongBg : ShortBG
+      },
+      shape: {
+        r: 8,
+        x: arrow[0] - width / 2,
+        y: arrow[1] - height / 2,
+        width,
+        height
+      },
+      z
+    });
+  }
+  _clickGlobal() {
+    this.htmlContent.hide();
+    if (this._hoverParams) {
+      this._mouseout();
+    }
+  }
+  _getClipShape(seriesModel) {
+    if (!seriesModel.get("clip", true)) {
+      return;
+    }
+    const coordSys = seriesModel.coordinateSystem;
+    return coordSys && coordSys.getArea && coordSys.getArea(0.1);
+  }
+  _mouseClick(e2) {
+    const obj = inner11(e2.target);
+    if (!obj) {
+      return;
+    }
+    e2.cancelBubble = true;
+    const seriesModel = this.seriesModel;
+    const data = seriesModel.getData();
+    const isUp = obj.type === "up";
+    const dataModal = data.getItemModel(obj.index);
+    const orders = dataModal.get(isUp ? "upOrders" : "downOrders");
+    if (!orders) {
+      return;
+    }
+    this.htmlContent.show({isUp, orders, x: e2.offsetX, y: e2.offsetY, time: dataModal.get("time"), precision: seriesModel.get("precision")});
+  }
+  _mouseover(e2) {
+    const obj = inner11(e2.target);
+    if (!obj) {
+      return;
+    }
+    const seriesModel = this.seriesModel;
+    if (!this._hoverGroup) {
+      const z2 = seriesModel.get("z2");
+      const z = seriesModel.get("z");
+      this._hoverGroup = new Group_default();
+      const downTriangleEl = createSymbol(obj.type === "up" ? "lineTriangleRight" : "lineTriangleLeft", 0, 0, 0, 0);
+      downTriangleEl.z2 = z2 - 1;
+      downTriangleEl.z2 = z;
+      const rectEl = new Rect_default();
+      rectEl.z2 = z2 - 1;
+      rectEl.z2 = z;
+      this._hoverGroup.add(downTriangleEl);
+      this._hoverGroup.add(rectEl);
+      this.group.add(this._hoverGroup);
+    }
+    this._hoverParams = obj;
+    this._renderHover();
+  }
+  _mouseout() {
+    this._hoverParams = null;
+    this.group.remove(this._hoverGroup);
+    this._hoverGroup = null;
+  }
+  _renderSymbol(data, seriesModel) {
+    if (!this._symbolGroup) {
+      this._symbolGroup = new Group_default();
+      this.group.add(this._symbolGroup);
+      this.group.on("mouseover", this._mouseover, this);
+      this.group.on("mouseout", this._mouseout, this);
+      this.group.on("click", this._mouseClick, this);
+    } else {
+      this._symbolGroup.removeAll();
+    }
+    const symbolGroup = this._symbolGroup;
+    const z2 = seriesModel.get("z2");
+    const emphasisState = seriesModel.get("emphasis").emphasisState;
+    const groupId = seriesModel.get("groupId");
+    const upArrow = data.getLayout("upArrow");
+    if (upArrow && upArrow.length) {
+      each(upArrow, (item, i) => {
+        const [x, y, count2, index] = item;
+        const symbolProxy = createSymbol("lineArrowUp", 0, 0, ArrowSize2[0], ArrowSize2[1]);
+        symbolProxy.shape = {
+          ...symbolProxy.shape,
+          triangleWidth: 4,
+          triangleHeight: 6,
+          x,
+          y,
+          count: count2
+        };
+        symbolProxy.style = {
+          stroke: LongColor2,
+          fill: "none",
+          lineWidth: 2
+        };
+        symbolProxy.z2 = z2;
+        symbolProxy.states.emphasis = emphasisState;
+        inner11(symbolProxy).index = index;
+        inner11(symbolProxy).type = "up";
+        inner11(symbolProxy).orderIndex = i;
+        symbolGroup.add(symbolProxy);
+      });
+    }
+    const downArrow = data.getLayout("downArrow");
+    if (downArrow && downArrow.length) {
+      each(downArrow, (item, i) => {
+        const [x, y, count2, index] = item;
+        const symbolProxy = createSymbol("lineArrowDown", 0, 0, ArrowSize2[0], ArrowSize2[1]);
+        symbolProxy.shape = {
+          ...symbolProxy.shape,
+          triangleWidth: 4,
+          triangleHeight: 6,
+          x,
+          y,
+          count: count2
+        };
+        symbolProxy.style = {
+          stroke: ShortColor2,
+          fill: "none",
+          lineWidth: 2
+        };
+        symbolProxy.z2 = z2;
+        symbolProxy.states.emphasis = emphasisState;
+        inner11(symbolProxy).index = index;
+        inner11(symbolProxy).type = "down";
+        inner11(symbolProxy).orderIndex = i;
+        symbolGroup.add(symbolProxy);
+      });
+    }
+    toggleHoverEmphasis(this.group, null, null, false);
+    getECData(this.group).groupId = groupId;
+  }
+  remove(ecModel, api2) {
+    this.seriesModel = null;
+    this._symbolGroup && this._symbolGroup.removeAll();
+    this._symbolGroup = null;
+    this.group.removeAll();
+  }
+  dispose(ecModel, api2) {
+    this.remove(ecModel, api2);
+    this.htmlContent.dispose();
+    api2.getZr().off("click", this._clickGlobal);
+    this.htmlContent = null;
+  }
+};
+var PlaybackOrderView = PlaybackOrderView2;
+PlaybackOrderView.type = "playbackOrder";
+var PlaybackOrderView_default = PlaybackOrderView;
+
+// src/chart/playbackOrder/PlaybackOrderSeries.ts
+var PlaybackOrderSeriesModel2 = class extends Series_default {
+  constructor() {
+    super(...arguments);
+    this.type = PlaybackOrderSeriesModel2.type;
+    this.ignoreStyleOnData = true;
+  }
+  getInitialData(option) {
+    if (true) {
+      const coordSys = option.coordinateSystem;
+      if (coordSys !== "polar" && coordSys !== "cartesian2d") {
+        throw new Error("PlaybackOrder not support coordinateSystem besides cartesian and polar");
+      }
+    }
+    return createSeriesData_default(null, this, {
+      useEncodeDefaulter: true
+    });
+  }
+  getZLevelKey() {
+    return this.getData().count() > this.getProgressiveThreshold() ? this.id : "";
+  }
+  getResetData(data) {
+    this.option.data = data;
+    return this.option.data;
+  }
+};
+var PlaybackOrderSeriesModel = PlaybackOrderSeriesModel2;
+PlaybackOrderSeriesModel.type = "series.playbackOrder";
+PlaybackOrderSeriesModel.dependencies = ["grid", "polar"];
+PlaybackOrderSeriesModel.defaultOption = {
+  coordinateSystem: "cartesian2d",
+  z: 2,
+  z2: 0,
+  legendHoverLink: true,
+  precision: 2,
+  xAxisIndex: 0,
+  yAxisIndex: 0,
+  emphasis: {
+    emphasisState: {
+      zlevel: 1
+    }
+  },
+  clip: true
+};
+var PlaybackOrderSeries_default = PlaybackOrderSeriesModel;
+
+// src/chart/playbackOrder/PlaybackOrderLayout.ts
+var arrowHeight2 = ArrowSize2[1];
+var closeArrowHeight2 = ArrowSize2[1] + 3;
+var arrowMargin2 = 10;
+var PlaybackOrderLayout = {
+  seriesType: "playbackOrder",
+  plan: createRenderPlanner(),
+  reset: function(seriesModel, ecModel) {
+    const coordSys = seriesModel.coordinateSystem;
+    if (!coordSys) {
+      if (true) {
+        error("The lines series must have a coordinate system.");
+      }
+      return;
+    }
+    const mainSeriesModal = ecModel.getMainSeries();
+    if (!mainSeriesModal) {
+      return;
+    }
+    const mainData = mainSeriesModal.getData();
+    const dimLow = Math.max(mainData.getDimensionIndex("lowest"), 1);
+    const dimHigh = Math.max(mainData.getDimensionIndex("highest"), 1);
+    const mainStore = mainData.getStore();
+    const data = seriesModel.getData();
+    const dims = map(coordSys.dimensions, function(dim) {
+      return data.mapDimension(dim);
+    }).slice(0, 2);
+    const store = data.getStore();
+    const dimIdx0 = data.getDimensionIndex(dims[0]);
+    return {
+      progress(params, playbackorderData) {
+        const upArrow = [];
+        const downArrow = [];
+        for (let i = params.start; i < params.end; i++) {
+          const x = store.get(dimIdx0, i);
+          const baseUp = mainStore.getByRawIndex(dimLow, x);
+          const baseDown = mainStore.getByRawIndex(dimHigh, x);
+          const dataModal = playbackorderData.getItemModel(i);
+          const upOrders = dataModal.get("upOrders");
+          const downOrders = dataModal.get("downOrders");
+          const baseUpPoint = coordSys.dataToPoint([x, baseUp]);
+          const baseDownPoint = coordSys.dataToPoint([x, baseDown]);
+          const optimizeX = baseUpPoint[0] + 0.5;
+          if (upOrders && upOrders.length) {
+            const arrowY = baseUpPoint[1] + arrowMargin2 + arrowHeight2 / 2;
+            upArrow.push([optimizeX, arrowY, upOrders.length, i]);
+          }
+          if (downOrders && downOrders.length) {
+            const arrowY = baseDownPoint[1] - arrowMargin2 - arrowHeight2 / 2;
+            downArrow.push([optimizeX, arrowY, downOrders.length, i]);
+          }
+        }
+        data.setLayout({
+          upArrow,
+          downArrow
+        });
+      }
+    };
+  }
+};
+var PlaybackOrderLayout_default = PlaybackOrderLayout;
+
+// src/chart/playbackOrder/install.ts
+function install26(registers) {
+  registers.registerChartView(PlaybackOrderView_default);
+  registers.registerSeriesModel(PlaybackOrderSeries_default);
+  registers.registerLayout(PlaybackOrderLayout_default);
+}
+
 // src/chart/mineLines/util.ts
 function findIntersectionPoint(A, B, rectangle, bias = "start") {
   const [xA, yA] = A;
@@ -57710,7 +58410,7 @@ var MineLinesLayout = {
 var MineLinesLayout_default = MineLinesLayout;
 
 // src/chart/mineLines/install.ts
-function install26(registers) {
+function install27(registers) {
   registers.registerChartView(MineLinesView_default);
   registers.registerSeriesModel(MineLinesSeries_default);
   registers.registerLayout(MineLinesLayout_default);
@@ -58001,7 +58701,7 @@ var MinePolyLinesLayout = {
 var MinePolyLinesLayout_default = MinePolyLinesLayout;
 
 // src/chart/minePolyLines/install.ts
-function install27(registers) {
+function install28(registers) {
   registers.registerChartView(MinePolyLinesView_default);
   registers.registerSeriesModel(MinePolyLinesSeries_default);
   registers.registerLayout(MinePolyLinesLayout_default);
@@ -58243,7 +58943,7 @@ var LineFillsLayout = {
 var LineFillsLayout_default = LineFillsLayout;
 
 // src/chart/lineFills/install.ts
-function install28(registers) {
+function install29(registers) {
   registers.registerChartView(LineFillsView_default);
   registers.registerSeriesModel(LineFillsSeries_default);
   registers.registerLayout(LineFillsLayout_default);
@@ -58637,7 +59337,7 @@ var BoxesLayout = {
 var BoxesLayout_default = BoxesLayout;
 
 // src/chart/boxes/install.ts
-function install29(registers) {
+function install30(registers) {
   registers.registerChartView(BoxesView_default);
   registers.registerSeriesModel(BoxesSeries_default);
   registers.registerLayout(BoxesLayout_default);
@@ -58885,7 +59585,7 @@ var CharPlotLayout = {
 var CharPlotLayout_default = CharPlotLayout;
 
 // src/chart/charPlot/install.ts
-function install30(registers) {
+function install31(registers) {
   registers.registerSeriesModel(CharPlotSeries_default);
   registers.registerChartView(CharPlotView_default);
   registers.registerLayout(CharPlotLayout_default);
@@ -59230,7 +59930,7 @@ function calculateCandleWidth2(seriesModel, data) {
 var candlePlotLayout_default = candlePlotLayout;
 
 // src/chart/candlePlot/install.ts
-function install31(registers) {
+function install32(registers) {
   registers.registerChartView(CandlePlotView_default);
   registers.registerSeriesModel(CandlePlotSeries_default);
   registers.registerLayout(candlePlotLayout_default);
@@ -59478,7 +60178,7 @@ function calculateCandleWidth3(seriesModel, data) {
 var barPlotLayout_default = barPlotLayout;
 
 // src/chart/barPlot/install.ts
-function install32(registers) {
+function install33(registers) {
   registers.registerChartView(BarPlotView_default);
   registers.registerSeriesModel(BarPlotSeries_default);
   registers.registerLayout(barPlotLayout_default);
@@ -59700,7 +60400,7 @@ var ArrowsPlotLayout = {
 var ArrowsPlotLayout_default = ArrowsPlotLayout;
 
 // src/chart/arrowsPlot/install.ts
-function install33(registers) {
+function install34(registers) {
   registers.registerSeriesModel(ArrowsPlotSeries_default);
   registers.registerChartView(ArrowPlotView_default);
   registers.registerLayout(ArrowsPlotLayout_default);
@@ -60390,7 +61090,7 @@ var labelsLayout = {
 var labelsLayout_default = labelsLayout;
 
 // src/chart/labels/install.ts
-function install34(registers) {
+function install35(registers) {
   registers.registerSeriesModel(LabelsSeries_default);
   registers.registerChartView(LabelsView_default);
   registers.registerLayout(labelsLayout_default);
@@ -60534,7 +61234,7 @@ var hLinesLayout = {
 var hLinesLayout_default = hLinesLayout;
 
 // src/chart/hlines/install.ts
-function install35(registers) {
+function install36(registers) {
   registers.registerChartView(HLinesView_default);
   registers.registerSeriesModel(HLinesSeries_default);
   registers.registerLayout(hLinesLayout_default);
@@ -60826,7 +61526,7 @@ var fillsLayout = {
 var fillsLayout_default = fillsLayout;
 
 // src/chart/fills/install.ts
-function install36(registers) {
+function install37(registers) {
   registers.registerChartView(FillsView_default);
   registers.registerSeriesModel(FillsSeries_default);
   registers.registerLayout(fillsLayout_default);
@@ -61056,7 +61756,7 @@ var bgColorLayout = {
 var BgColorLayout_default = bgColorLayout;
 
 // src/chart/bgColor/install.ts
-function install37(registers) {
+function install38(registers) {
   registers.registerChartView(BgColorView_default);
   registers.registerSeriesModel(BgColorSeries_default);
   registers.registerLayout(BgColorLayout_default);
@@ -61454,7 +62154,7 @@ HeatmapSeriesModel.defaultOption = {
 var HeatmapSeries_default = HeatmapSeriesModel;
 
 // src/chart/heatmap/install.ts
-function install38(registers) {
+function install39(registers) {
   registers.registerChartView(HeatmapView_default);
   registers.registerSeriesModel(HeatmapSeries_default);
 }
@@ -62017,7 +62717,7 @@ PictorialBarSeriesModel.defaultOption = inheritDefaultOption(BaseBarSeries_defau
 var PictorialBarSeries_default = PictorialBarSeriesModel;
 
 // src/chart/bar/installPictorialBar.ts
-function install39(registers) {
+function install40(registers) {
   registers.registerChartView(PictorialBarView_default);
   registers.registerSeriesModel(PictorialBarSeries_default);
   registers.registerLayout(registers.PRIORITY.VISUAL.LAYOUT, curry(layout2, "pictorialBar"));
@@ -62070,7 +62770,7 @@ var ThemeRiverView2 = class extends Chart_default {
       let polygon;
       const textLayout = data.getItemLayout(indices[0]);
       const labelModel = seriesModel.getModel("label");
-      const margin2 = labelModel.get("margin");
+      const margin3 = labelModel.get("margin");
       const emphasisModel = seriesModel.getModel("emphasis");
       if (status === "add") {
         const layerGroup = newLayersGroups[idx] = new Group_default();
@@ -62119,7 +62819,7 @@ var ThemeRiverView2 = class extends Chart_default {
       });
       const labelEl = polygon.getTextContent();
       if (labelEl) {
-        labelEl.x = textLayout.x - margin2;
+        labelEl.x = textLayout.x - margin3;
         labelEl.y = textLayout.y0 + textLayout.y / 2;
       }
       polygon.useStyle(style);
@@ -62418,7 +63118,7 @@ function computeBaseline(data) {
 }
 
 // src/chart/themeRiver/install.ts
-function install40(registers) {
+function install41(registers) {
   registers.registerChartView(ThemeRiverView_default);
   registers.registerSeriesModel(ThemeRiverSeries_default);
   registers.registerLayout(themeRiverLayout);
@@ -63056,7 +63756,7 @@ function sunburstVisual(ecModel) {
 }
 
 // src/chart/sunburst/install.ts
-function install41(registers) {
+function install42(registers) {
   registers.registerChartView(SunburstView_default);
   registers.registerSeriesModel(SunburstSeries_default);
   registers.registerLayout(curry(sunburstLayout, "sunburst"));
@@ -64504,7 +65204,7 @@ function hasOwnPathData(shape) {
 }
 
 // src/chart/custom/install.ts
-function install42(registers) {
+function install43(registers) {
   registers.registerChartView(CustomView_default);
   registers.registerSeriesModel(CustomSeries_default);
 }
@@ -64676,10 +65376,10 @@ GraphicComponentModel.defaultOption = {
 };
 
 // src/component/axisPointer/BaseAxisPointer.ts
-var inner11 = makeInner();
+var inner12 = makeInner();
 var elInner = makeInner();
 var clone4 = clone;
-var bind2 = bind;
+var bind3 = bind;
 var BaseAxisPointer = class {
   constructor() {
     this._dragging = false;
@@ -64762,26 +65462,26 @@ var BaseAxisPointer = class {
   createPointerEl(group, elOption, axisModel, axisPointerModel) {
     const pointerOption = elOption.pointer;
     if (pointerOption) {
-      const pointerEl = inner11(group).pointerEl = new graphic_exports[pointerOption.type](clone4(elOption.pointer));
+      const pointerEl = inner12(group).pointerEl = new graphic_exports[pointerOption.type](clone4(elOption.pointer));
       group.add(pointerEl);
     }
   }
   createLabelEl(group, elOption, axisModel, axisPointerModel) {
     if (elOption.label) {
-      const labelEl = inner11(group).labelEl = new Text_default(clone4(elOption.label));
+      const labelEl = inner12(group).labelEl = new Text_default(clone4(elOption.label));
       group.add(labelEl);
       updateLabelShowHide(labelEl, axisPointerModel);
     }
   }
   updatePointerEl(group, elOption, updateProps3) {
-    const pointerEl = inner11(group).pointerEl;
+    const pointerEl = inner12(group).pointerEl;
     if (pointerEl && elOption.pointer) {
       pointerEl.setStyle(elOption.pointer.style);
       updateProps3(pointerEl, {shape: elOption.pointer.shape});
     }
   }
   updateLabelEl(group, elOption, updateProps3, axisPointerModel) {
-    const labelEl = inner11(group).labelEl;
+    const labelEl = inner12(group).labelEl;
     if (labelEl) {
       labelEl.setStyle(elOption.label.style);
       updateProps3(labelEl, {
@@ -64903,9 +65603,9 @@ var BaseAxisPointer = class {
         onmousemove(e2) {
           stop(e2.event);
         },
-        onmousedown: bind2(this._onHandleDragMove, this, 0, 0),
-        drift: bind2(this._onHandleDragMove, this),
-        ondragend: bind2(this._onHandleDragEnd, this)
+        onmousedown: bind3(this._onHandleDragMove, this, 0, 0),
+        drift: bind3(this._onHandleDragMove, this),
+        ondragend: bind3(this._onHandleDragEnd, this)
       });
       zr.add(handle);
     }
@@ -64942,7 +65642,7 @@ var BaseAxisPointer = class {
     this._payloadInfo = trans;
     handle.stopAnimation();
     handle.attr(getHandleTransProps(trans));
-    inner11(handle).lastProp = null;
+    inner12(handle).lastProp = null;
     this._doDispatchAxisPointer();
   }
   _doDispatchAxisPointer() {
@@ -65007,8 +65707,8 @@ var BaseAxisPointer = class {
   }
 };
 function updateProps2(animationModel, moveAnimation, el, props) {
-  if (!propsEqual(inner11(el).lastProp, props)) {
-    inner11(el).lastProp = props;
+  if (!propsEqual(inner12(el).lastProp, props)) {
+    inner12(el).lastProp = props;
     moveAnimation ? updateProps(el, props, animationModel) : (el.stopAnimation(), el.attr(props));
   }
 }
@@ -65333,23 +66033,23 @@ AxisPointerModel.defaultOption = {
 var AxisPointerModel_default = AxisPointerModel;
 
 // src/component/axisPointer/globalListener.ts
-var inner12 = makeInner();
-var each13 = each;
+var inner13 = makeInner();
+var each14 = each;
 function register(key, api2, handler) {
   if (env_default.node) {
     return;
   }
   const zr = api2.getZr();
-  inner12(zr).records || (inner12(zr).records = {});
+  inner13(zr).records || (inner13(zr).records = {});
   initGlobalListeners(zr, api2);
-  const record = inner12(zr).records[key] || (inner12(zr).records[key] = {});
+  const record = inner13(zr).records[key] || (inner13(zr).records[key] = {});
   record.handler = handler;
 }
 function initGlobalListeners(zr, api2) {
-  if (inner12(zr).initialized) {
+  if (inner13(zr).initialized) {
     return;
   }
-  inner12(zr).initialized = true;
+  inner13(zr).initialized = true;
   useHandler("click", curry(doEnter, "click"));
   useHandler("mousemove", curry(doEnter, "mousemove"));
   useHandler("mouseup", curry(doEnter, "mouseup"));
@@ -65358,7 +66058,7 @@ function initGlobalListeners(zr, api2) {
   function useHandler(eventType, cb) {
     zr.on(eventType, function(e2) {
       const dis = makeDispatchAction(api2);
-      each13(inner12(zr).records, function(record) {
+      each14(inner13(zr).records, function(record) {
         record && cb(record, e2, dis.dispatchAction);
       });
       dispatchTooltipFinally(dis.pendings, api2);
@@ -65409,9 +66109,9 @@ function unregister(key, api2) {
     return;
   }
   const zr = api2.getZr();
-  const record = (inner12(zr).records || {})[key];
+  const record = (inner13(zr).records || {})[key];
   if (record) {
-    inner12(zr).records[key] = null;
+    inner13(zr).records[key] = null;
   }
 }
 
@@ -65439,7 +66139,7 @@ var AxisPointerView2 = class extends Component_default2 {
         this.xLock = false;
       }
       const updatePointDisable = globalTooltipModel && globalTooltipModel.option.updatePointDisable;
-      if (updatePointDisable || playbackSelectModel.option.show) {
+      if (updatePointDisable || playbackSelectModel?.option.show || globalAxisPointerModel.option.updatePointDisable) {
         return;
       }
       if (triggerOn !== "none" && (currTrigger === "leave" || triggerOn.indexOf(currTrigger) >= 0)) {
@@ -65529,7 +66229,7 @@ function findPointFromSeries(finder, ecModel) {
 }
 
 // src/component/axisPointer/axisTrigger.ts
-var inner13 = makeInner();
+var inner14 = makeInner();
 function axisTrigger(payload, ecModel, api2) {
   const currTrigger = payload.currTrigger;
   let point = [payload.x, payload.y];
@@ -65793,8 +66493,8 @@ function dispatchPointer(ecModel, shouldHide, point, dispatchAction3) {
 function dispatchHighDownActually(axesInfo, dispatchAction3, api2) {
   const zr = api2.getZr();
   const highDownKey = "axisPointerLastHighlights";
-  const lastHighlights = inner13(zr)[highDownKey] || {};
-  const newHighlights = inner13(zr)[highDownKey] = {};
+  const lastHighlights = inner14(zr)[highDownKey] || {};
+  const newHighlights = inner14(zr)[highDownKey] = {};
   each(axesInfo, function(axisInfo, key) {
     const option = axisInfo.axisPointerModel.option;
     option.status === "show" && axisInfo.triggerEmphasis && each(option.seriesDataIndices, function(batchItem) {
@@ -65845,7 +66545,7 @@ function illegalPoint(point) {
 }
 
 // src/component/axisPointer/install.ts
-function install43(registers) {
+function install44(registers) {
   AxisView_default.registerAxisPointerClass("CartesianAxisPointer", CartesianAxisPointer_default);
   registers.registerComponentModel(AxisPointerModel_default);
   registers.registerComponentView(AxisPointerView_default);
@@ -65874,9 +66574,9 @@ function install43(registers) {
 }
 
 // src/component/grid/install.ts
-function install44(registers) {
+function install45(registers) {
   use(install6);
-  use(install43);
+  use(install44);
 }
 
 // src/component/axisPointer/PolarAxisPointer.ts
@@ -66029,7 +66729,7 @@ RadiusAxis.prototype.radiusToData = Axis_default.prototype.coordToData;
 var RadiusAxis_default = RadiusAxis;
 
 // src/coord/polar/AngleAxis.ts
-var inner14 = makeInner();
+var inner15 = makeInner();
 var AngleAxis = class extends Axis_default {
   constructor(scale4, angleExtent) {
     super("angle", scale4, angleExtent || [0, 360]);
@@ -66054,7 +66754,7 @@ var AngleAxis = class extends Axis_default {
     let dh = maxH / unitH;
     isNaN(dh) && (dh = Infinity);
     let interval = Math.max(0, Math.floor(dh));
-    const cache = inner14(axis.model);
+    const cache = inner15(axis.model);
     const lastAutoInterval = cache.lastAutoInterval;
     const lastTickCount = cache.lastTickCount;
     if (lastAutoInterval != null && lastTickCount != null && Math.abs(lastAutoInterval - interval) <= 1 && Math.abs(lastTickCount - tickCount) <= 1 && lastAutoInterval > interval) {
@@ -66930,8 +67630,8 @@ var PolarView2 = class extends Component_default2 {
 };
 var PolarView = PolarView2;
 PolarView.type = "polar";
-function install45(registers) {
-  use(install43);
+function install46(registers) {
+  use(install44);
   AxisView_default.registerAxisPointerClass("PolarAxisPointer", PolarAxisPointer_default);
   registers.registerCoordinateSystem("polar", polarCreator_default);
   registers.registerComponentModel(PolarModel_default);
@@ -67394,8 +68094,8 @@ var SingleView2 = class extends Component_default2 {
 };
 var SingleView = SingleView2;
 SingleView.type = "single";
-function install46(registers) {
-  use(install43);
+function install47(registers) {
+  use(install44);
   AxisView_default.registerAxisPointerClass("SingleAxisPointer", SingleAxisPointer_default);
   registers.registerComponentView(SingleView);
   registers.registerComponentView(SingleAxisView_default);
@@ -67603,20 +68303,20 @@ var CalendarView2 = class extends Component_default2 {
     }
     return params.nameMap;
   }
-  _yearTextPositionControl(textEl, point, orient, position2, margin2) {
+  _yearTextPositionControl(textEl, point, orient, position2, margin3) {
     let x = point[0];
     let y = point[1];
     let aligns = ["center", "bottom"];
     if (position2 === "bottom") {
-      y += margin2;
+      y += margin3;
       aligns = ["center", "top"];
     } else if (position2 === "left") {
-      x -= margin2;
+      x -= margin3;
     } else if (position2 === "right") {
-      x += margin2;
+      x += margin3;
       aligns = ["center", "top"];
     } else {
-      y -= margin2;
+      y -= margin3;
     }
     let rotate2 = 0;
     if (position2 === "left" || position2 === "right") {
@@ -67637,7 +68337,7 @@ var CalendarView2 = class extends Component_default2 {
     if (!yearLabel.get("show")) {
       return;
     }
-    const margin2 = yearLabel.get("margin");
+    const margin3 = yearLabel.get("margin");
     let pos = yearLabel.get("position");
     if (!pos) {
       pos = orient !== "horizontal" ? "top" : "left";
@@ -67669,16 +68369,16 @@ var CalendarView2 = class extends Component_default2 {
         text: content
       })
     });
-    yearText.attr(this._yearTextPositionControl(yearText, posPoints[pos], orient, pos, margin2));
+    yearText.attr(this._yearTextPositionControl(yearText, posPoints[pos], orient, pos, margin3));
     group.add(yearText);
   }
-  _monthTextPositionControl(point, isCenter, orient, position2, margin2) {
+  _monthTextPositionControl(point, isCenter, orient, position2, margin3) {
     let align = "left";
     let vAlign = "top";
     let x = point[0];
     let y = point[1];
     if (orient === "horizontal") {
-      y = y + margin2;
+      y = y + margin3;
       if (isCenter) {
         align = "center";
       }
@@ -67686,7 +68386,7 @@ var CalendarView2 = class extends Component_default2 {
         vAlign = "bottom";
       }
     } else {
-      x = x + margin2;
+      x = x + margin3;
       if (isCenter) {
         vAlign = "middle";
       }
@@ -67707,7 +68407,7 @@ var CalendarView2 = class extends Component_default2 {
       return;
     }
     let nameMap = monthLabel.get("nameMap");
-    let margin2 = monthLabel.get("margin");
+    let margin3 = monthLabel.get("margin");
     const pos = monthLabel.get("position");
     const align = monthLabel.get("align");
     const termPoints = [this._tlpoints, this._blpoints];
@@ -67719,7 +68419,7 @@ var CalendarView2 = class extends Component_default2 {
     }
     const idx = pos === "start" ? 0 : 1;
     const axis = orient === "horizontal" ? 0 : 1;
-    margin2 = pos === "start" ? -margin2 : margin2;
+    margin3 = pos === "start" ? -margin3 : margin3;
     const isCenter = align === "center";
     for (let i = 0; i < termPoints[idx].length - 1; i++) {
       const tmp = termPoints[idx][i].slice();
@@ -67740,22 +68440,22 @@ var CalendarView2 = class extends Component_default2 {
       const content = this._formatterLabel(formatter, params);
       const monthText = new Text_default({
         z2: 30,
-        style: extend(createTextStyle(monthLabel, {text: content}), this._monthTextPositionControl(tmp, isCenter, orient, pos, margin2))
+        style: extend(createTextStyle(monthLabel, {text: content}), this._monthTextPositionControl(tmp, isCenter, orient, pos, margin3))
       });
       group.add(monthText);
     }
   }
-  _weekTextPositionControl(point, orient, position2, margin2, cellSize) {
+  _weekTextPositionControl(point, orient, position2, margin3, cellSize) {
     let align = "center";
     let vAlign = "middle";
     let x = point[0];
     let y = point[1];
     const isStart = position2 === "start";
     if (orient === "horizontal") {
-      x = x + margin2 + (isStart ? 1 : -1) * cellSize[0] / 2;
+      x = x + margin3 + (isStart ? 1 : -1) * cellSize[0] / 2;
       align = isStart ? "right" : "left";
     } else {
-      y = y + margin2 + (isStart ? 1 : -1) * cellSize[1] / 2;
+      y = y + margin3 + (isStart ? 1 : -1) * cellSize[1] / 2;
       vAlign = isStart ? "bottom" : "top";
     }
     return {
@@ -67773,7 +68473,7 @@ var CalendarView2 = class extends Component_default2 {
     const coordSys = calendarModel.coordinateSystem;
     const pos = dayLabel.get("position");
     let nameMap = dayLabel.get("nameMap");
-    let margin2 = dayLabel.get("margin");
+    let margin3 = dayLabel.get("margin");
     const firstDayOfWeek = coordSys.getFirstDayOfWeek();
     if (!nameMap || isString(nameMap)) {
       if (nameMap) {
@@ -67784,10 +68484,10 @@ var CalendarView2 = class extends Component_default2 {
     }
     let start2 = coordSys.getNextNDay(rangeData.end.time, 7 - rangeData.lweek).time;
     const cellSize = [coordSys.getCellWidth(), coordSys.getCellHeight()];
-    margin2 = parsePercent2(margin2, Math.min(cellSize[1], cellSize[0]));
+    margin3 = parsePercent2(margin3, Math.min(cellSize[1], cellSize[0]));
     if (pos === "start") {
       start2 = coordSys.getNextNDay(rangeData.start.time, -(7 + rangeData.fweek)).time;
-      margin2 = -margin2;
+      margin3 = -margin3;
     }
     for (let i = 0; i < 7; i++) {
       const tmpD = coordSys.getNextNDay(start2, i);
@@ -67796,7 +68496,7 @@ var CalendarView2 = class extends Component_default2 {
       day = Math.abs((i + firstDayOfWeek) % 7);
       const weekText = new Text_default({
         z2: 30,
-        style: extend(createTextStyle(dayLabel, {text: nameMap[day]}), this._weekTextPositionControl(point, orient, pos, margin2, cellSize))
+        style: extend(createTextStyle(dayLabel, {text: nameMap[day]}), this._weekTextPositionControl(point, orient, pos, margin3, cellSize))
       });
       group.add(weekText);
     }
@@ -68085,7 +68785,7 @@ function getCoordSys5(finder) {
 var Calendar_default = Calendar;
 
 // src/component/calendar/install.ts
-function install47(registers) {
+function install48(registers) {
   registers.registerComponentModel(CalendarModel_default);
   registers.registerComponentView(CalendarView_default);
   registers.registerCoordinateSystem("calendar", Calendar_default);
@@ -68099,7 +68799,7 @@ var nonShapeGraphicElements = {
   image: Image_default,
   text: Text_default
 };
-var inner15 = makeInner();
+var inner16 = makeInner();
 var GraphicComponentView2 = class extends Component_default2 {
   constructor() {
     super(...arguments);
@@ -68200,7 +68900,7 @@ var GraphicComponentView2 = class extends Component_default2 {
           }
           el2 = createEl2(id, targetElParent, elOption.type, elMap);
         } else {
-          el2 && (inner15(el2).isNew = false);
+          el2 && (inner16(el2).isNew = false);
           stopPreviousKeyframeAnimationAndRestore(el2);
         }
         if (el2) {
@@ -68238,7 +68938,7 @@ var GraphicComponentView2 = class extends Component_default2 {
           let isInit = false;
           if (isMerge) {
             const oldClipPath = el.getClipPath();
-            isInit = !oldClipPath || inner15(oldClipPath).type !== clipPathType;
+            isInit = !oldClipPath || inner16(oldClipPath).type !== clipPathType;
             clipPath = isInit ? newEl(clipPathType) : oldClipPath;
           } else if (isReplace) {
             isInit = true;
@@ -68248,7 +68948,7 @@ var GraphicComponentView2 = class extends Component_default2 {
           applyUpdateTransition(clipPath, clipPathOption, graphicModel, {isInit});
           applyKeyframeAnimation(clipPath, clipPathOption.keyframeAnimation, graphicModel);
         }
-        const elInner2 = inner15(el);
+        const elInner2 = inner16(el);
         el.setTextConfig(textConfig);
         elInner2.option = elOption;
         setEventData(el, graphicModel, elOption);
@@ -68278,8 +68978,8 @@ var GraphicComponentView2 = class extends Component_default2 {
       }
       const parentEl = el.parent;
       const isParentRoot = parentEl === rootGroup;
-      const elInner2 = inner15(el);
-      const parentElInner = inner15(parentEl);
+      const elInner2 = inner16(el);
+      const parentElInner = inner16(parentEl);
       elInner2.width = parsePercent2(elInner2.option.width, isParentRoot ? apiWidth : parentElInner.width) || 0;
       elInner2.height = parsePercent2(elInner2.option.height, isParentRoot ? apiHeight : parentElInner.height) || 0;
     }
@@ -68291,7 +68991,7 @@ var GraphicComponentView2 = class extends Component_default2 {
         continue;
       }
       const parentEl = el.parent;
-      const parentElInner = inner15(parentEl);
+      const parentElInner = inner16(parentEl);
       const containerInfo = parentEl === rootGroup ? {
         width: apiWidth,
         height: apiHeight
@@ -68301,7 +69001,7 @@ var GraphicComponentView2 = class extends Component_default2 {
       };
       const layoutPos = {};
       const layouted = positionElement(el, elOption, containerInfo, null, {hv: elOption.hv, boundingMode: elOption.bounding}, layoutPos);
-      if (!inner15(el).isNew && layouted) {
+      if (!inner16(el).isNew && layouted) {
         const transition = elOption.transition;
         const animatePos = {};
         for (let k = 0; k < xy.length; k++) {
@@ -68332,13 +69032,13 @@ var GraphicComponentView2 = class extends Component_default2 {
     if (isInit) {
       el = createEl2(id, targetElParent, labelOption.type, elLabelMap);
     } else {
-      el && (inner15(el).isNew = false);
+      el && (inner16(el).isNew = false);
     }
     if (el) {
       const elOptionCleaned = getCleanedElOption(labelOption);
       updateCommonAttrs(el, labelOption, globalZ, globalZLevel);
       applyUpdateTransition(el, elOptionCleaned, graphicModel, {isInit});
-      inner15(el).y = el.y;
+      inner16(el).y = el.y;
     }
     if (labelOption.children) {
       each(labelOption.children, (childLabelOption) => {
@@ -68365,10 +69065,10 @@ var GraphicComponentView2 = class extends Component_default2 {
     const elMap = this._elMap;
     const elLabelMap = this._elLabelMap;
     elMap.each((el) => {
-      removeEl(el, inner15(el).option, elMap, this._lastGraphicModel);
+      removeEl(el, inner16(el).option, elMap, this._lastGraphicModel);
     });
     elLabelMap.each((el) => {
-      removeEl(el, inner15(el).option, elLabelMap, this._lastGraphicModel);
+      removeEl(el, inner16(el).option, elLabelMap, this._lastGraphicModel);
     });
     this._clearSeriesLabels();
     this._elMap = createHashMap();
@@ -68392,15 +69092,15 @@ function newEl(graphicType) {
     assert(Clz, `graphic type ${graphicType} can not be found`);
   }
   const el = new Clz({});
-  inner15(el).type = graphicType;
+  inner16(el).type = graphicType;
   return el;
 }
 function createEl2(id, targetElParent, graphicType, elMap) {
   const el = newEl(graphicType);
   targetElParent.add(el);
   elMap.set(id, el);
-  inner15(el).id = id;
-  inner15(el).isNew = true;
+  inner16(el).id = id;
+  inner16(el).isNew = true;
   return el;
 }
 function removeEl(elExisting, elOption, elMap, graphicModel) {
@@ -68410,7 +69110,7 @@ function removeEl(elExisting, elOption, elMap, graphicModel) {
       removeEl(el, elOption, elMap, graphicModel);
     });
     applyLeaveTransition(elExisting, elOption, graphicModel);
-    elMap.removeKey(inner15(elExisting).id);
+    elMap.removeKey(inner16(elExisting).id);
   }
 }
 function removeLabelEl(elOption, elMap) {
@@ -68424,7 +69124,7 @@ function removeLabelEl(elOption, elMap) {
         removeLabelEl(option, elMap);
       });
     }
-    elMap.removeKey(inner15(elExisting).id);
+    elMap.removeKey(inner16(elExisting).id);
   }
 }
 function updateCommonAttrs(el, elOption, defaultZ, defaultZlevel) {
@@ -68478,7 +69178,7 @@ function setEventData(el, graphicModel, elOption) {
 }
 
 // src/component/graphic/install.ts
-function install48(registers) {
+function install49(registers) {
   registers.registerComponentModel(GraphicComponentModel);
   registers.registerComponentView(GraphicComponentView);
   registers.registerPreprocessor(function(option) {
@@ -68994,7 +69694,7 @@ SelectDataZoomView.type = "dataZoom.select";
 var SelectZoomView_default = SelectDataZoomView;
 
 // src/component/dataZoom/AxisProxy.ts
-var each14 = each;
+var each15 = each;
 var asc2 = asc;
 var leftMinVisibleBarCount = 2;
 var rightMinVisibleBarCount = 2;
@@ -69053,7 +69753,7 @@ var AxisProxy = class {
     const percentWindow = [];
     const valueWindow = [];
     let hasPropModeValue;
-    each14(["start", "end"], function(prop, idx) {
+    each15(["start", "end"], function(prop, idx) {
       let boundPercent = opt[prop];
       let boundValue = opt[prop + "Value"];
       if (rangePropMode[idx] === "percent") {
@@ -69215,7 +69915,7 @@ var AxisProxy = class {
     if (filterMode === "none") {
       return;
     }
-    each14(seriesModels, function(seriesModel) {
+    each15(seriesModels, function(seriesModel) {
       let seriesData = seriesModel.getData();
       const dataDims = seriesData.mapDimensionsAll(axisDim);
       if (!dataDims.length || seriesModel.get("notFilterData")) {
@@ -69256,7 +69956,7 @@ var AxisProxy = class {
       } else {
         const offset = seriesModel.get("offset") || 0;
         const offset1 = seriesModel.get("offset1") || 0;
-        each14(dataDims, function(dim) {
+        each15(dataDims, function(dim) {
           if (filterMode === "empty") {
             seriesModel.setData(seriesData = seriesData.map(dim, function(value) {
               return !isInWindow(value) ? NaN : value;
@@ -69285,7 +69985,7 @@ var AxisProxy = class {
           }
         });
       }
-      each14(dataDims, function(dim) {
+      each15(dataDims, function(dim) {
         seriesData.setApproximateExtent(valueWindow, dim);
       });
     });
@@ -69300,7 +70000,7 @@ var AxisProxy = class {
     const minMaxSpan = this._minMaxSpan = {};
     const dataZoomModel = this._dataZoomModel;
     const dataExtent = this._dataExtent;
-    each14(["min", "max"], function(minMax) {
+    each15(["min", "max"], function(minMax) {
       let percentSpan = dataZoomModel.get(minMax + "Span");
       let valueSpan = dataZoomModel.get(minMax + "ValueSpan");
       valueSpan != null && (valueSpan = this.getAxisModel().axis.scale.parse(valueSpan));
@@ -69337,7 +70037,7 @@ function calculateDataExtent(axisProxy, axisDim, seriesModels) {
   const dataExtent = [Infinity, -Infinity];
   const axisModel = axisProxy.getAxisModel();
   const dataFromSeriesName = axisModel.axis.model.get("dataFromSeriesName");
-  each14(seriesModels, function(seriesModel) {
+  each15(seriesModels, function(seriesModel) {
     const location = seriesModel.get("location");
     if (seriesModel.get("invisible") || dataFromSeriesName && seriesModel.name !== dataFromSeriesName || location && ["bottom", "top"].includes(location)) {
       return;
@@ -69461,7 +70161,7 @@ function installCommon(registers) {
 }
 
 // src/component/dataZoom/installDataZoomSelect.ts
-function install49(registers) {
+function install50(registers) {
   registers.registerComponentModel(SelectZoomModel_default);
   registers.registerComponentView(SelectZoomView_default);
   installCommon(registers);
@@ -70348,11 +71048,11 @@ registerAction({
 var DataView_default = DataView;
 
 // src/component/dataZoom/history.ts
-var each15 = each;
-var inner16 = makeInner();
+var each16 = each;
+var inner17 = makeInner();
 function push(ecModel, newSnapshot) {
   const storedSnapshots = getStoreSnapshots(ecModel);
-  each15(newSnapshot, function(batchItem, dataZoomId) {
+  each16(newSnapshot, function(batchItem, dataZoomId) {
     let i = storedSnapshots.length - 1;
     for (; i >= 0; i--) {
       const snapshot = storedSnapshots[i];
@@ -70379,7 +71079,7 @@ function pop(ecModel) {
   const head = storedSnapshots[storedSnapshots.length - 1];
   storedSnapshots.length > 1 && storedSnapshots.pop();
   const snapshot = {};
-  each15(head, function(batchItem, dataZoomId) {
+  each16(head, function(batchItem, dataZoomId) {
     for (let i = storedSnapshots.length - 1; i >= 0; i--) {
       batchItem = storedSnapshots[i][dataZoomId];
       if (batchItem) {
@@ -70391,13 +71091,13 @@ function pop(ecModel) {
   return snapshot;
 }
 function clear2(ecModel) {
-  inner16(ecModel).snapshots = null;
+  inner17(ecModel).snapshots = null;
 }
 function count(ecModel) {
   return getStoreSnapshots(ecModel).length;
 }
 function getStoreSnapshots(ecModel) {
-  const store = inner16(ecModel);
+  const store = inner17(ecModel);
   if (!store.snapshots) {
     store.snapshots = [{}];
   }
@@ -70692,7 +71392,7 @@ function getSize2(xyMinMax) {
 var BrushTargetManager_default = BrushTargetManager;
 
 // src/component/toolbox/feature/DataZoom.ts
-var each16 = each;
+var each17 = each;
 var DATA_ZOOM_ID_BASE = makeInternalComponentId("toolbox-dataZoom_");
 var DataZoomFeature = class extends ToolboxFeature {
   render(featureModel, ecModel, api2, payload) {
@@ -70760,7 +71460,7 @@ var DataZoomFeature = class extends ToolboxFeature {
   }
   _dispatchZoomAction(snapshot) {
     const batch = [];
-    each16(snapshot, function(batchItem, dataZoomId) {
+    each17(snapshot, function(batchItem, dataZoomId) {
       batch.push(clone(batchItem));
     });
     batch.length && this.api.dispatchAction({
@@ -70843,8 +71543,8 @@ registerInternalOptionCreator("dataZoom", function(ecModel) {
   const dzOptions = [];
   const finder = makeAxisFinder(dzFeatureModel);
   const finderResult = parseFinder(ecModel, finder);
-  each16(finderResult.xAxisModels, (axisModel) => buildInternalOptions(axisModel, "xAxis", "xAxisIndex"));
-  each16(finderResult.yAxisModels, (axisModel) => buildInternalOptions(axisModel, "yAxis", "yAxisIndex"));
+  each17(finderResult.xAxisModels, (axisModel) => buildInternalOptions(axisModel, "xAxis", "xAxisIndex"));
+  each17(finderResult.yAxisModels, (axisModel) => buildInternalOptions(axisModel, "yAxis", "yAxisIndex"));
   function buildInternalOptions(axisModel, axisMainType, axisIndexPropName) {
     const axisIndex = axisModel.componentIndex;
     const newOpt = {
@@ -70861,7 +71561,7 @@ registerInternalOptionCreator("dataZoom", function(ecModel) {
 var DataZoom_default = DataZoomFeature;
 
 // src/component/toolbox/install.ts
-function install50(registers) {
+function install51(registers) {
   registers.registerComponentModel(ToolboxModel_default);
   registers.registerComponentView(ToolboxView_default);
   registerFeature("saveAsImage", SaveAsImage_default);
@@ -70869,7 +71569,7 @@ function install50(registers) {
   registerFeature("dataView", DataView_default);
   registerFeature("dataZoom", DataZoom_default);
   registerFeature("restore", Restore_default);
-  use(install49);
+  use(install50);
 }
 
 // src/component/tooltip/TooltipModel.ts
@@ -71089,7 +71789,7 @@ function makeStyleCoord(out2, zr, container, zrX, zrY) {
   out2[2] = out2[0] / zr.getWidth();
   out2[3] = out2[1] / zr.getHeight();
 }
-var TooltipHTMLContent = class {
+var TooltipHTMLContent2 = class {
   constructor(api2, opt) {
     this._show = false;
     this._styleCoord = [0, 0, 0, 0];
@@ -71247,7 +71947,7 @@ var TooltipHTMLContent = class {
     this.el = this._container = null;
   }
 };
-var TooltipHTMLContent_default = TooltipHTMLContent;
+var TooltipHTMLContent_default = TooltipHTMLContent2;
 
 // src/component/tooltip/TooltipRichContent.ts
 var TooltipRichContent = class {
@@ -72098,8 +72798,8 @@ function findComponentReference(payload, ecModel, api2) {
 var TooltipView_default = TooltipView;
 
 // src/component/tooltip/install.ts
-function install51(registers) {
-  use(install43);
+function install52(registers) {
+  use(install44);
   registers.registerComponentModel(TooltipModel_default);
   registers.registerComponentView(TooltipView_default);
   registers.registerAction({
@@ -72156,18 +72856,18 @@ function brushPreprocessor(option, isNew) {
   }
 }
 function removeDuplicate(arr) {
-  const map7 = {};
+  const map9 = {};
   each(arr, function(val) {
-    map7[val] = 1;
+    map9[val] = 1;
   });
   arr.length = 0;
-  each(map7, function(flag, val) {
+  each(map9, function(flag, val) {
     arr.push(val);
   });
 }
 
 // src/visual/visualSolution.ts
-var each17 = each;
+var each18 = each;
 function hasKeys(obj) {
   if (obj) {
     for (const name in obj) {
@@ -72179,9 +72879,9 @@ function hasKeys(obj) {
 }
 function createVisualMappings(option, stateList, supplementVisualOption) {
   const visualMappings = {};
-  each17(stateList, function(state) {
+  each18(stateList, function(state) {
     const mappings = visualMappings[state] = createMappings();
-    each17(option[state], function(visualData, visualType) {
+    each18(option[state], function(visualData, visualType) {
       if (!VisualMapping_default.isValidType(visualType)) {
         return;
       }
@@ -72725,7 +73425,7 @@ var BrushFeature = class extends ToolboxFeature {
 var Brush_default = BrushFeature;
 
 // src/component/brush/install.ts
-function install52(registers) {
+function install53(registers) {
   registers.registerComponentView(BrushView_default);
   registers.registerComponentModel(BrushModel_default);
   registers.registerPreprocessor(brushPreprocessor);
@@ -72872,7 +73572,7 @@ var TitleView2 = class extends Component_default2 {
 };
 var TitleView = TitleView2;
 TitleView.type = "title";
-function install53(registers) {
+function install54(registers) {
   registers.registerComponentModel(TitleModel);
   registers.registerComponentView(TitleView);
 }
@@ -72948,7 +73648,7 @@ var CursorPointerView2 = class extends Component_default2 {
 };
 var CursorPointerView = CursorPointerView2;
 CursorPointerView.type = "cursorPointer";
-function install54(registers) {
+function install55(registers) {
   registers.registerComponentModel(CursorPointerModel);
   registers.registerComponentView(CursorPointerView);
 }
@@ -73033,7 +73733,7 @@ function getTextYOffset(height, align, paddings) {
       return paddings;
   }
 }
-var margin = 6;
+var margin2 = 6;
 function getXYByPosition(rect, position2, width, height, frame_width = 0) {
   let x = rect.x;
   let y = rect.y;
@@ -73050,16 +73750,16 @@ function getXYByPosition(rect, position2, width, height, frame_width = 0) {
         x = x + (rect.width - width) / 2 + frame_width;
         break;
       case "top":
-        y = y + frame_width + margin;
+        y = y + frame_width + margin2;
         break;
       case "bottom":
-        y = y + rect.height - height - frame_width - margin;
+        y = y + rect.height - height - frame_width - margin2;
         break;
       case "middle":
         y = y + (rect.height - height) / 2 + frame_width;
         break;
       default:
-        y = y + frame_width + margin;
+        y = y + frame_width + margin2;
         break;
     }
   }
@@ -73365,7 +74065,7 @@ TableView.type = "table";
 var TableView_default = TableView;
 
 // src/component/table/install.ts
-function install55(registers) {
+function install56(registers) {
   registers.registerComponentModel(TableModel_default);
   registers.registerComponentView(TableView_default);
 }
@@ -73820,7 +74520,7 @@ AlarmModel.defaultOption = {
 var AlarmModel_default = AlarmModel;
 
 // src/component/alarm/install.ts
-function install56(registers) {
+function install57(registers) {
   registers.registerComponentView(AlarmView_default);
   registers.registerComponentModel(AlarmModel_default);
   registers.registerAction({type: "alarm", event: "alarm", update: "updateVisual"}, function(payload, ecModel) {
@@ -73898,7 +74598,7 @@ var BgRectView2 = class extends Component_default2 {
 };
 var BgRectView = BgRectView2;
 BgRectView.type = "bgRect";
-function install57(registers) {
+function install58(registers) {
   registers.registerComponentModel(BgRectModel);
   registers.registerComponentView(BgRectView);
 }
@@ -73920,9 +74620,9 @@ PlaybackSelectModel.type = "playbackSelect";
 PlaybackSelectModel.defaultOption = {
   zlevel: 1,
   z: 2,
-  show: true,
+  show: false,
   color: "rgb(41,98,255)",
-  bgColor: "rgb(255,255,255,0.5)",
+  bgColor: "rgb(255,255,255)",
   startIndex: 10,
   icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAABYlAAAWJQFJUiTwAAAD/UlEQVRYhb1ZjXWbMBCWO0BNJ7A7QRiBDcoIjMAIZANvUHsDugHZAG/ACHiBXN+HOeU4nQQkfb337gUL6fTp/kUcEW3hgohaetKViM4b1zFnYv1ARPU8Zs1dcDBg8Pn9/f1BIZU7AHbBaqJxC8hgwOCGJdZ1TX3f79qAiCpe0DTNJENQbczfDXA6fdd15JyjPM/lBq0xX/Mg14PFIS/G/AV/cxup7/tpIv6+vr7yol/OuTIhoXHOnaaHpvGDbdvyYx6s0GShtjR4vV69BpQWYqbO5nfUtu1iLWTN1BnrPueDACQ32WDqC788n8+LtTA3u6WxbjfAkqVlWbbYCE4vSEa1R3+5XBZrnkbzVBn77QaYeWlVFWwWMfWkonEcg0OVZSkBrubTYCDCrWXmiKmr1IGE/w2RvT4F0B+7KIpgU2XqUacVZmgTWt3qf3sAmvksYuqJoNmVg2wql8FAgr3pLC1KUwOIfo9IFtq7Jvb5NECvxWEYAudnDVl+CkYuBM11fXOzEQyscOFVoBK39DM9trf+fgWgkwnYynEp02+pHP8CoBO9nZlKIlEbK4lJTr5MMDbyYWuBBDgV2XlCXpQ3dzOKRufcwEPDMAQTsixzLy8v/PMNjVAwaQvFkK+w93orpUTy3p4O/Es+6L0+lrQjCfy/+GDN9xOrEUDEatBGFO8CGQxEOJcXH4DTpQxgkcAtsytT93M+je21C2Am8x6bVTegqgmdSM9RIFmbq0CDAeVrA0uDdqx0Etk8MDX3gqxlBTRa+oKBmSt5FwYAq4RxEyColRFuzQfjoBLovJfZXQcDMkrha1bnEqmzHKV+fexQcq2oNGSBtHxuZJNavpYwr+yQJ1o7HEe5ApmnAPoaq6MUm1kawbiMDalB64CQoYErkF0MoHcmqD5mBquDEVTIlkzPE/eRyUIIGumX6qABQH/vYO2pboT0+zWAUuNK0x5kRI4vi7JZmD5DPB4P/5mjLEt3PB75/Q/n3B0PVVUtmgJFnReYf3zZqOuaH//MstzpdHJFUfg59/t9gQUUdDMCkOu6Tr6CfX468Z2GDyFo0bFI8OM48iMQXfiH7IRE9/NBwsTeBtKEukLA5JFmQH7+mPxCXgtUTaaV94Xlg/4Lgg4EODAuPQgY6VdKqMxhPhrkYfEMUJClqxL2FJRZAJ2su2s5THXMo5JzZi1ajcVKqmpiaYa1OLBgmQYS4CjSjPqskAKp0liv5Rye6WpBsNvb4XD4zpGFD44cGIg6RLEIphsCO3DuJ2H8t594u01yEDCIcMgSgfGYA2h5NTBOziayPnx7mgv8ljsuNBkm0yUhwMxGdk04HF8DhRngq3v+FYHNcRjIYrCQA2DxuwqR+wu+HnkxU9Zp7AAAAABJRU5ErkJggg=="
 };
@@ -73942,8 +74642,7 @@ var PlaybackSelectView2 = class extends Component_default2 {
   }
   render(playbackSelectModel, ecModel, api2) {
     if (!playbackSelectModel.get("show")) {
-      this.group.removeAll();
-      this.unmountEvent();
+      this.clear();
       return;
     }
     if (!this.playbackSelectModel) {
@@ -73955,16 +74654,17 @@ var PlaybackSelectView2 = class extends Component_default2 {
     const rect = grid.coordinateSystem.getRect();
     const startIndex = playbackSelectModel.get("startIndex");
     if (startIndex === null) {
-      this.group.removeAll();
+      this.clear();
       return;
     }
+    this._rect = rect;
     const bgColor = playbackSelectModel.get("bgColor");
     const color2 = playbackSelectModel.get("color");
     const icon = playbackSelectModel.get("icon");
     const yData = playbackSelectModel.get("yData");
     const xAxis = ecModel.getComponent("xAxis", 0);
     const xAxis2D = xAxis.axis;
-    const x = Math.floor(xAxis2D.toGlobalCoord(xAxis2D.dataToCoord(startIndex))) + 0.5;
+    const x = Math.floor(xAxis2D.toGlobalCoord(xAxis2D.dataToCoord(startIndex))) - 0.5;
     const lineStyle = {
       lineWidth: 2,
       stroke: color2
@@ -73995,7 +74695,8 @@ var PlaybackSelectView2 = class extends Component_default2 {
       width: rect.width + rect.x - x
     };
     const rectStyle = {
-      fill: bgColor
+      fill: bgColor,
+      opacity: 0.5
     };
     if (!this.rectEl) {
       const rectEl = new Rect_default({
@@ -74032,6 +74733,15 @@ var PlaybackSelectView2 = class extends Component_default2 {
     const offsetY = e2.offsetY;
     const ecModel = this.ecModel;
     const xAxis = ecModel.getComponent("xAxis", 0);
+    if (offsetX > this._rect.x + this._rect.width) {
+      this.api.dispatchAction({
+        type: "playbackSelect",
+        playbackSelect: {
+          startIndex: null
+        }
+      });
+      return;
+    }
     const xAxis2D = xAxis.axis;
     const index = xAxis2D.coordToData(xAxis2D.toLocalCoord(offsetX));
     const list = xAxis2D.scale.getOrdinalMeta().getCategories();
@@ -74041,7 +74751,8 @@ var PlaybackSelectView2 = class extends Component_default2 {
       playbackSelect: {
         startIndex: selectedIndex,
         uid: this.playbackSelectModel.uid,
-        yData: offsetY
+        yData: offsetY,
+        time: list[selectedIndex]
       }
     });
   }
@@ -74073,6 +74784,7 @@ var PlaybackSelectView2 = class extends Component_default2 {
     zr.on("mousemove", this._onMouseMove, this);
     zr.on("click", this._onClick, this);
     zr.on("globalout", this._globalout, this);
+    this.isMountEvent = true;
   }
   unmountEvent() {
     if (!this.isMountEvent) {
@@ -74082,15 +74794,23 @@ var PlaybackSelectView2 = class extends Component_default2 {
     zr.off("mousemove", this._onMouseMove);
     zr.off("click", this._onClick);
     zr.off("globalout", this._globalout);
+    this.isMountEvent = false;
   }
-  dispose(ecModel, api2) {
+  clear() {
+    this.unmountEvent();
     if (this.rectEl) {
       this.group.removeAll();
       this.lineEl = null;
       this.rectEl = null;
       this.imgEl = null;
     }
-    this.unmountEvent();
+  }
+  dispose(ecModel, api2) {
+    this.clear();
+    this.playbackSelectModel = null;
+    this.ecModel = null;
+    this.api = null;
+    this._rect = null;
   }
 };
 var PlaybackSelectView = PlaybackSelectView2;
@@ -74101,59 +74821,422 @@ var PlaybackOrderModel2 = class extends Component_default {
   constructor() {
     super(...arguments);
     this.type = PlaybackOrderModel2.type;
+    this.preventAutoZ = true;
     this.layoutMode = {type: "box", ignoreSize: true};
   }
+  updateOrder(order) {
+    this.option.order = {
+      ...this.option.order,
+      ...order
+    };
+  }
 };
 var PlaybackOrderModel = PlaybackOrderModel2;
 PlaybackOrderModel.type = "playbackOrder";
 PlaybackOrderModel.defaultOption = {
   zlevel: 1,
   z: 2,
-  order: {
-    price: 20,
-    direction: "long",
-    size: 1e4,
-    precision: 2,
-    profit: "201.01 USD"
-  }
+  seriesName: ""
 };
 
 // src/component/playback/PlaybackOrderView.ts
 var labelRectWidth = 38;
 var orderTpLMargin = 11;
+var descLMargin = 7;
+var descRectPadding = 10;
+var descProfitPadding = 12;
+var descClosePadding = 10;
+var maxCircleMargin = 28;
+var circleR = 4;
 var longColor = "rgba(41, 107, 239, 1)";
+var longBg = "rgba(41, 107, 239, 0.1)";
 var shortColor = "rgba(242, 54, 70, 1)";
-var shopProfit = "rgba(4, 154, 129, 1)";
-var shopLoss = "rgba(255, 152, 0, 1)";
+var shortBg = "rgba(242, 54, 70, 0.1)";
+var stopProfit = "rgba(4, 154, 129, 1)";
+var stopProfitBg = "rgba(4, 154, 129, 0.1)";
+var stopLoss = "rgba(255, 152, 0, 1)";
+var stopLossBg = "rgba(255, 152, 0, 0.1)";
 var closePIcon = "path://M428.8 192c-12.8-6.4-32 0-38.4 6.4L179.2 409.6c-12.8 12.8-12.8 32 0 44.8 6.4 6.4 12.8 6.4 25.6 6.4s19.2 0 25.6-6.4L384 294.4v505.6c0 19.2 12.8 32 32 32s32-12.8 32-32v-576c0-12.8-6.4-25.6-19.2-32zM838.4 569.6c-12.8-12.8-32-12.8-44.8 0L640 723.2V224c0-19.2-12.8-32-32-32s-32 12.8-32 32v582.4c0 6.4 6.4 12.8 6.4 12.8 6.4 12.8 19.2 12.8 25.6 12.8s19.2 0 25.6-6.4l211.2-211.2c6.4-12.8 6.4-32-6.4-44.8z";
-var PlaybackOrderView2 = class extends Component_default2 {
+var backIcon = "path://M145.066667 486.4l247.466666-213.333333c17.066667-17.066667 42.666667-17.066667 59.733334-8.533334 8.533333 8.533333 17.066667 17.066667 17.066666 25.6v435.2c0 25.6-17.066667 42.666667-42.666666 42.666667-17.066667 0-25.6 0-34.133334-8.533333L145.066667 537.6c-25.6-17.066667-25.6-34.133333 0-51.2zM571.733333 486.4l247.466667-213.333333c17.066667-17.066667 42.666667-17.066667 59.733333 0 8.533333 8.533333 17.066667 17.066667 17.066667 25.6v435.2c0 17.066667-17.066667 34.133333-42.666667 34.133333-17.066667 0-25.6 0-34.133333-8.533333L571.733333 537.6c-25.6-17.066667-25.6-34.133333 0-51.2z";
+var closeIcon = "path://M844.8 247.466667l-68.266667-68.266667L512 452.266667 247.466667 179.2l-68.266667 68.266667L452.266667 512 179.2 776.533333l68.266667 68.266667L512 571.733333l264.533333 273.066667 68.266667-68.266667L571.733333 512z";
+var getTextWidth = (text) => {
+  const font = `14px ${DefaultFamily}`;
+  return getWidth(text, font);
+};
+var getProfitColor = (profit, bgColor) => {
+  if (profit > 0) {
+    return "#049A81";
+  } else if (profit < 0) {
+    return "#F23646";
+  }
+  return getIsLightColor(bgColor) ? "rgba(0,0,0,0.5)" : "rgba(255,255,255,0.5)";
+};
+var PlaybackOrderView4 = class extends Component_default2 {
   constructor() {
     super(...arguments);
-    this.type = PlaybackOrderView2.type;
+    this.type = PlaybackOrderView4.type;
+    this.mouseSelected = false;
+    this.selected = false;
+    this.dragType = "";
+    this.dragGroupType = "";
   }
   init(ecModel, api2) {
     this.ecModel = ecModel;
     this.api = api2;
   }
   render(playbackOrderModel, ecModel, api2) {
-    if (!playbackOrderModel.get("order")) {
+    const order = playbackOrderModel.get("order");
+    if (!order || !order.show) {
+      this.clear();
       return;
     }
-    if (!this.playbackOrderModel) {
-      this.playbackOrderModel = playbackOrderModel;
-    }
+    if (this.lastOrderDirection && this.lastOrderDirection !== order.direction) {
+      this.clear();
+    }
+    if (!this.eventMount) {
+      this.ecModel = ecModel;
+      this.api = api2;
+      this.group.on("mousemove", this.orderMouseover, this);
+      this.group.on("mouseout", this.orderMouseout, this);
+      this.group.on("mousedown", this.orderMousedown, this);
+      this.group.on("click", this.orderClick, this);
+      const zr = api2.getZr();
+      zr.on("mousedown", this.zrMouseDown, this);
+      zr.on("mousemove", this.zrMouseMove, this);
+      zr.on("mouseup", this.zrMouseUp, this);
+      this.eventMount = true;
+    }
+    this.playbackOrderModel = playbackOrderModel;
+    this.lastOrderDirection = order.direction;
     this.renderOrder();
   }
+  sendMessage(type) {
+    const order = this.playbackOrderModel.get("order");
+    this.api.trigger("playbackorder", {
+      type,
+      order,
+      dragPrice: this.dragPrice
+    });
+    if (this.dragPrice) {
+      this.dragPrice = null;
+    }
+  }
+  zrMouseMove(e2) {
+    if (this.dragType) {
+      this.dragPrice = this.yAxisModel.coordToData(this.yAxisModel.toLocalCoord(e2.offsetY));
+      this.renderOrder();
+      return;
+    }
+    if (this.dragGroupType) {
+      const dragPrice = this.yAxisModel.coordToData(this.yAxisModel.toLocalCoord(e2.offsetY));
+      this.playbackOrderModel.updateOrder({[this.dragGroupType === "profit" ? "stopProfit" : "stopLoss"]: dragPrice});
+      this.dragPrice = dragPrice;
+      this.renderOrder();
+    }
+  }
+  zrMouseUp() {
+    if (this.dragType) {
+      this.dragPrice && this.sendMessage(this.dragType === "TP" ? "addTp" : "addSl");
+      this.dragType = "";
+      const pointer = this.ecModel.getComponent("axisPointer", 0);
+      if (pointer) {
+        pointer.option.updatePointDisable = false;
+      }
+      this.renderOrder();
+      return;
+    }
+    if (this.dragGroupType) {
+      this.dragPrice && this.sendMessage(this.dragGroupType === "profit" ? "dragStopProfit" : "dragStopLoss");
+      this.dragGroupType = "";
+      const pointer = this.ecModel.getComponent("axisPointer", 0);
+      if (pointer) {
+        pointer.option.updatePointDisable = false;
+      }
+      this.renderOrder();
+    }
+  }
+  orderElVisible(type, invisible) {
+    const {orderClosePositionEl, orderTpEl, orderSlEl, orderCircleEl} = this.orderGroupEls;
+    const playbackOrderModel = this.playbackOrderModel;
+    const order = playbackOrderModel.get("order");
+    const color2 = order.direction === "long" ? longColor : shortColor;
+    orderCircleEl.attr({
+      style: {
+        fill: this.selected ? color2 : this.backgroundColor,
+        stroke: color2
+      },
+      shape: {
+        r: this.selected ? circleR - 1 : circleR
+      },
+      invisible
+    });
+    if (this.stopProfitEls) {
+      this.stopProfitEls.stopCircleEl.attr({
+        style: {
+          fill: this.selected ? stopProfit : this.backgroundColor,
+          stroke: stopProfit
+        },
+        shape: {
+          r: this.selected ? circleR - 1 : circleR
+        },
+        invisible
+      });
+      this.stopProfitEls.stopJoinLineEl.ignore = invisible;
+    }
+    if (this.stopLossEls) {
+      this.stopLossEls.stopJoinLineEl.ignore = invisible;
+      this.stopLossEls.stopCircleEl.attr({
+        style: {
+          fill: this.selected ? stopLoss : this.backgroundColor,
+          stroke: stopLoss
+        },
+        shape: {
+          r: this.selected ? circleR - 1 : circleR
+        },
+        invisible
+      });
+    }
+    orderClosePositionEl.children().forEach((item) => {
+      item.attr("invisible", invisible);
+    });
+    orderTpEl.children().forEach((item) => {
+      item.attr("invisible", invisible);
+    });
+    orderSlEl.children().forEach((item) => {
+      item.attr("invisible", invisible);
+    });
+  }
+  orderMouseover(e2) {
+    if (!this.dragType && !this.dragGroupType) {
+      e2.cancelBubble = true;
+    }
+    if (this.mouseSelected) {
+      return;
+    }
+    this.api.dispatchAction({
+      type: "updateAxisPointer",
+      currTrigger: "globalout"
+    });
+    if (!this.orderGroupEls || this.selected) {
+      return;
+    }
+    this.mouseSelected = true;
+    this.orderElVisible("mouseover", false);
+  }
+  orderMouseout(e2) {
+    this.mouseSelected = false;
+    if (!this.orderGroupEls || this.selected) {
+      return;
+    }
+    this.orderElVisible("mouseout", true);
+  }
+  orderClick(e2) {
+    e2.cancelBubble = true;
+  }
+  orderMousedown(e2) {
+    e2.cancelBubble = true;
+    if (this.selected) {
+      return;
+    }
+    this.selected = true;
+    this.orderElVisible("mousedown", false);
+  }
+  zrMouseDown(e2) {
+    if (!this.selected) {
+      return;
+    }
+    this.selected = false;
+    this.orderElVisible("mousedown", true);
+  }
+  createOrderEl() {
+    const playbackOrderModel = this.playbackOrderModel;
+    const order = playbackOrderModel.get("order");
+    const color2 = order.direction === "long" ? longColor : shortColor;
+    const orderBg = order.direction === "long" ? longBg : shortBg;
+    const zlevel = playbackOrderModel.get("zlevel");
+    const orderGroup = this.orderGroup;
+    const orderLineEl = new Line_default({zlevel});
+    const orderClosePositionEl = new Group_default();
+    const closePositionRect = new Rect_default({
+      shape: {
+        y: -9,
+        width: labelRectWidth,
+        height: 18,
+        r: 10
+      },
+      style: {
+        fill: this.backgroundColor,
+        stroke: color2
+      },
+      invisible: true,
+      zlevel
+    });
+    const closePositionIcon = createSymbol(closePIcon, 13, -6, 12, 12, color2);
+    orderClosePositionEl.add(closePositionRect);
+    orderClosePositionEl.add(closePositionIcon);
+    orderClosePositionEl.onmouseover = () => {
+      closePositionRect.attr("style", {fill: blendColors(orderBg, this.backgroundColor)});
+    };
+    orderClosePositionEl.onmouseout = () => {
+      closePositionRect.attr("style", {fill: this.backgroundColor});
+    };
+    orderClosePositionEl.onclick = () => {
+      this.sendMessage("closePosition");
+    };
+    closePositionIcon.invisible = true;
+    closePositionIcon.zlevel = zlevel;
+    const orderTpEl = new Group_default();
+    const orderTpRect = new Rect_default({invisible: true, zlevel});
+    const orderTpText = new Text_default({invisible: true, zlevel});
+    const orderTpBgEl = new Rect_default({silent: true, ignore: true, zlevel});
+    orderTpEl.add(orderTpRect);
+    orderTpEl.add(orderTpText);
+    orderGroup.add(orderTpBgEl);
+    orderTpEl.onmouseover = () => {
+      orderTpBgEl.attr({
+        style: {
+          fill: stopProfitBg
+        },
+        shape: order.direction === "long" ? {
+          x: this.rect.x,
+          y: -this.y,
+          width: this.rect.width,
+          height: this.y
+        } : {
+          x: this.rect.x,
+          y: 0,
+          width: this.rect.width,
+          height: this.rect.height - this.y
+        },
+        ignore: false
+      });
+      orderTpRect.attr("style", {fill: blendColors(stopProfitBg, this.backgroundColor)});
+    };
+    orderTpEl.onmouseout = () => {
+      orderTpRect.attr("style", {fill: this.backgroundColor});
+      orderTpBgEl.attr("ignore", true);
+    };
+    orderTpEl.onmousedown = () => {
+      this.dragType = "TP";
+      const pointer = this.ecModel.getComponent("axisPointer", 0);
+      if (pointer) {
+        pointer.option.updatePointDisable = true;
+      }
+    };
+    const orderSlEl = new Group_default();
+    const orderSlRect = new Rect_default({invisible: true, zlevel});
+    const orderSlText = new Text_default({invisible: true, zlevel});
+    const orderSlBgEl = new Rect_default({silent: true, ignore: true, zlevel});
+    orderSlEl.add(orderSlRect);
+    orderSlEl.add(orderSlText);
+    orderGroup.add(orderSlBgEl);
+    orderSlEl.onmouseover = () => {
+      orderSlBgEl.attr({
+        style: {
+          fill: stopLossBg
+        },
+        shape: order.direction === "short" ? {
+          x: this.rect.x,
+          y: -this.y,
+          width: this.rect.width,
+          height: this.y
+        } : {
+          x: this.rect.x,
+          y: 0,
+          width: this.rect.width,
+          height: this.rect.height - this.y
+        },
+        ignore: false
+      });
+      orderSlRect.attr("style", {fill: blendColors(stopLossBg, this.backgroundColor)});
+    };
+    orderSlEl.onmouseout = () => {
+      orderSlRect.attr("style", {fill: this.backgroundColor});
+      orderSlBgEl.attr("ignore", true);
+    };
+    orderSlEl.onmousedown = () => {
+      this.dragType = "SL";
+      const pointer = this.ecModel.getComponent("axisPointer", 0);
+      if (pointer) {
+        pointer.option.updatePointDisable = true;
+      }
+    };
+    const orderDescEl = new Group_default();
+    const orderDescRect = new Rect_default({zlevel});
+    const orderSizeRect = new Rect_default({zlevel});
+    const orderSizText = new Text_default({zlevel});
+    const orderPlaybackIcon = createSymbol(backIcon, 0, -4, 8, 8, "#ffffff");
+    orderPlaybackIcon.zlevel = zlevel;
+    const orderProfitText = new Text_default({zlevel});
+    const orderCloseRect = new Rect_default({invisible: true, zlevel});
+    const orderCloseLine = new Line_default({zlevel});
+    const orderCloseIcon = createSymbol(closeIcon, 0, -4, 8, 8, color2);
+    ;
+    orderCloseIcon.zlevel = zlevel;
+    const orderCircleEl = new Circle_default({invisible: true, zlevel, z: 10});
+    orderDescEl.add(orderDescRect);
+    orderDescEl.add(orderSizeRect);
+    orderDescEl.add(orderSizText);
+    orderDescEl.add(orderPlaybackIcon);
+    orderDescEl.add(orderProfitText);
+    const orderCloseEl = new Group_default();
+    orderCloseEl.add(orderCloseRect);
+    orderCloseEl.add(orderCloseLine);
+    orderCloseEl.add(orderCloseIcon);
+    orderDescEl.add(orderCloseEl);
+    orderCloseEl.onmouseover = () => {
+      orderCloseRect.attr({
+        style: {
+          fill: orderBg
+        },
+        invisible: false
+      });
+    };
+    orderCloseEl.onmouseout = () => {
+      orderCloseRect.attr("invisible", true);
+    };
+    orderCloseEl.onclick = () => {
+      this.sendMessage("delete");
+    };
+    orderGroup.add(orderLineEl);
+    orderGroup.add(orderClosePositionEl);
+    orderGroup.add(orderTpEl);
+    orderGroup.add(orderSlEl);
+    orderGroup.add(orderDescEl);
+    orderGroup.add(orderCircleEl);
+    this.orderGroupEls = {
+      orderLineEl,
+      orderClosePositionEl,
+      orderTpEl,
+      orderSlEl,
+      orderDescEl,
+      orderCircleEl,
+      orderTpBgEl,
+      orderSlBgEl,
+      orderCloseEl
+    };
+  }
   renderOrder() {
     const ecModel = this.ecModel;
     const playbackOrderModel = this.playbackOrderModel;
+    if (!playbackOrderModel) {
+      return;
+    }
     const group = this.group;
     const grid = ecModel.getComponent("grid", 0);
     const order = playbackOrderModel.get("order");
+    const seriesName = playbackOrderModel.get("seriesName");
     const rect = grid.coordinateSystem.getRect();
-    const yAxis = ecModel.getComponent("yAxis", 0);
-    const yAxis2D = yAxis.axis;
-    const y = Math.floor(yAxis2D.toGlobalCoord(yAxis2D.dataToCoord(order.price)));
+    const seriesModel = ecModel.getSeriesByName(seriesName)[0];
+    if (!seriesModel) {
+      return;
+    }
+    const coordSys = seriesModel.coordinateSystem;
+    if (!coordSys || !coordSys.master) {
+      return;
+    }
+    const yAxisModel = coordSys.getAxis("y");
+    const y = Math.floor(yAxisModel.toGlobalCoord(yAxisModel.dataToCoord(order.price)));
     let backgroundColor2 = ecModel.get("backgroundColor") || "#fff";
     if (backgroundColor2 && isGradientObject(backgroundColor2) && !backgroundColor2.global && backgroundColor2.type === "linear") {
       backgroundColor2 = {
@@ -74168,59 +75251,28 @@ var PlaybackOrderView2 = class extends Component_default2 {
       group.add(this.orderGroup);
     }
     this.orderGroup.y = y;
+    this.y = y;
     this.rect = rect;
+    this.yAxisModel = yAxisModel;
     this.renderOrderGroup();
   }
   renderOrderGroup() {
-    const orderGroup = this.orderGroup;
     const rect = this.rect;
     const playbackOrderModel = this.playbackOrderModel;
     const order = playbackOrderModel.get("order");
     const color2 = order.direction === "long" ? longColor : shortColor;
     if (!this.orderGroupEls) {
-      const orderLineEl2 = new Line_default();
-      const orderClosePositionEl2 = new Group_default();
-      const closePositionRect = new Rect_default({
-        shape: {
-          y: -9,
-          width: labelRectWidth,
-          height: 18,
-          r: 10
-        },
-        style: {
-          fill: this.backgroundColor,
-          stroke: color2
-        }
-      });
-      const closePositionIcon = createSymbol(closePIcon, 13, -6, 12, 12, color2);
-      orderClosePositionEl2.add(closePositionRect);
-      orderClosePositionEl2.add(closePositionIcon);
-      const orderTpEl2 = new Group_default();
-      const orderTpRect = new Rect_default();
-      const orderTpText = new Text_default();
-      orderTpEl2.add(orderTpRect);
-      orderTpEl2.add(orderTpText);
-      const orderSlEl2 = new Group_default();
-      const orderSlRect = new Rect_default();
-      const orderSlText = new Text_default();
-      orderSlEl2.add(orderSlRect);
-      orderSlEl2.add(orderSlText);
-      const orderDescEl = new Group_default();
-      const orderDescRect = new Rect_default();
-      const orderSizeRect = new Rect_default();
-      orderGroup.add(orderLineEl2);
-      orderGroup.add(orderClosePositionEl2);
-      orderGroup.add(orderTpEl2);
-      orderGroup.add(orderSlEl2);
-      this.orderGroupEls = {
-        orderLineEl: orderLineEl2,
-        orderClosePositionEl: orderClosePositionEl2,
-        orderTpEl: orderTpEl2,
-        orderSlEl: orderSlEl2,
-        orderDescEl
-      };
-    }
-    const {orderLineEl, orderClosePositionEl, orderTpEl, orderSlEl} = this.orderGroupEls;
+      this.createOrderEl();
+    }
+    const {
+      orderLineEl,
+      orderClosePositionEl,
+      orderTpEl,
+      orderSlEl,
+      orderDescEl,
+      orderCircleEl,
+      orderCloseEl
+    } = this.orderGroupEls;
     orderLineEl.attr({
       shape: {
         x1: rect.x,
@@ -74233,9 +75285,6 @@ var PlaybackOrderView2 = class extends Component_default2 {
         stroke: color2
       }
     });
-    orderClosePositionEl.attr("x", 300);
-    orderTpEl.attr("x", 300 + labelRectWidth + orderTpLMargin);
-    orderSlEl.attr("x", 300 + labelRectWidth * 2 + orderTpLMargin + 1);
     orderTpEl.childAt(0).attr({
       shape: {
         y: -9,
@@ -74245,13 +75294,13 @@ var PlaybackOrderView2 = class extends Component_default2 {
       },
       style: {
         fill: this.backgroundColor,
-        stroke: shopProfit
+        stroke: stopProfit
       }
     });
     orderTpEl.childAt(1).attr({
       style: {
         text: "TP",
-        fill: shopProfit,
+        fill: stopProfit,
         fontSize: 14
       },
       x: 11,
@@ -74266,37 +75315,665 @@ var PlaybackOrderView2 = class extends Component_default2 {
       },
       style: {
         fill: this.backgroundColor,
-        stroke: shopLoss
+        stroke: stopLoss
       }
     });
     orderSlEl.childAt(1).attr({
       style: {
         text: "SL",
-        fill: shopLoss,
+        fill: stopLoss,
         fontSize: 14
       },
       x: 11,
       y: -6
     });
+    const sizeWidth = getTextWidth(order.size + "");
+    const sizeRectWidth = sizeWidth + descRectPadding * 3 + 10;
+    const profitText = `${order.profit.toFixed(order.precision)} ${order.currency}`;
+    const profitWidth = getTextWidth(profitText) + descProfitPadding * 2;
+    const closeWidth = descClosePadding * 2 + 10;
+    const descRectWidth = sizeRectWidth + profitWidth + closeWidth;
+    const leftRectWidth = rect.width / 2;
+    const buttonCount = 1 + (order.stopProfit ? 0 : 1) + (order.stopLoss ? 0 : 1);
+    const buttonWidth = labelRectWidth * buttonCount + orderTpLMargin + 1 + descLMargin;
+    const isOverlay = rect.width < descRectWidth + buttonWidth + circleR;
+    let baseX = rect.width / 2;
+    let circleMargin = Math.min(maxCircleMargin, (leftRectWidth - circleR - descRectWidth / 2) / 2);
+    if (isOverlay) {
+      baseX = rect.width - circleR - descRectWidth / 2;
+      circleMargin = 0;
+    } else if (leftRectWidth < descRectWidth / 2 + buttonWidth) {
+      baseX = buttonWidth + descRectWidth / 2;
+      circleMargin = Math.max(Math.min(maxCircleMargin, (rect.width - baseX - descRectWidth / 2 - circleR) / 2), 0);
+    }
+    const startX = rect.x + baseX - descRectWidth / 2 - buttonWidth;
+    orderClosePositionEl.attr("x", startX);
+    const tpX = startX + labelRectWidth + orderTpLMargin;
+    const circleX = rect.x + baseX + descRectWidth / 2 + circleMargin;
+    this.circleX = circleX;
+    this.circleMargin = circleMargin;
+    orderTpEl.attr("x", tpX);
+    if (this.dragType === "TP" && this.dragPrice) {
+      orderTpEl.ignore = true;
+      this.dragStartX = tpX;
+      this.renderTpDrag();
+    } else {
+      orderTpEl.ignore = false;
+    }
+    if (order.stopProfit !== void 0) {
+      orderTpEl.ignore = true;
+      this.renderStopProfit("profit");
+    } else {
+      this.removeStop("profit");
+    }
+    const slX = order.stopProfit ? startX + labelRectWidth + orderTpLMargin + 1 : startX + labelRectWidth * 2 + orderTpLMargin + 1;
+    orderSlEl.attr("x", slX);
+    if (this.dragType === "SL" && this.dragPrice) {
+      orderSlEl.ignore = true;
+      this.dragStartX = slX;
+      this.renderTpDrag();
+    } else {
+      orderSlEl.ignore = false;
+    }
+    if (!this.dragType) {
+      this.removeTpDrag();
+    }
+    if (order.stopLoss !== void 0) {
+      orderSlEl.ignore = true;
+      this.renderStopProfit("loss");
+    } else {
+      this.removeStop("loss");
+    }
+    orderDescEl.attr("x", startX + labelRectWidth * buttonCount + orderTpLMargin + 1 + descLMargin);
+    orderDescEl.childAt(0).attr({
+      shape: {
+        y: -9,
+        width: descRectWidth,
+        height: 18,
+        r: 10
+      },
+      style: {
+        fill: this.backgroundColor,
+        stroke: color2
+      }
+    });
+    orderDescEl.childAt(1).attr({
+      shape: {
+        y: -9,
+        width: sizeRectWidth,
+        height: 18,
+        r: [10, 0, 0, 10]
+      },
+      style: {
+        fill: color2
+      }
+    });
+    orderDescEl.childAt(2).attr({
+      style: {
+        text: order.size + "",
+        fill: "#ffffff",
+        fontSize: 14
+      },
+      x: descRectPadding,
+      y: -6
+    });
+    orderDescEl.childAt(3).attr("x", sizeWidth + descRectPadding * 2);
+    orderDescEl.childAt(4).attr({
+      style: {
+        text: profitText,
+        fill: getProfitColor(order.profit, this.backgroundColor),
+        fontSize: 14
+      },
+      x: sizeRectWidth + descProfitPadding,
+      y: -6
+    });
+    orderCloseEl.childAt(0).attr({
+      shape: {
+        y: -9,
+        width: closeWidth,
+        height: 18,
+        r: [0, 10, 10, 0]
+      },
+      x: sizeRectWidth + profitWidth
+    });
+    orderCloseEl.childAt(1).attr({
+      style: {
+        stroke: color2
+      },
+      shape: {
+        y1: -9,
+        y2: 9
+      },
+      x: Math.floor(sizeRectWidth + profitWidth) + 0.5
+    });
+    orderCloseEl.childAt(2).attr("x", sizeRectWidth + profitWidth + descClosePadding);
+    orderCircleEl.attr({
+      style: {
+        fill: this.selected ? color2 : this.backgroundColor,
+        stroke: color2
+      },
+      shape: {
+        cx: circleX,
+        r: this.selected ? circleR - 1 : circleR
+      }
+    });
+    this.renderLabels();
+  }
+  renderTpDrag() {
+    const yAxisModel = this.yAxisModel;
+    const tpy = yAxisModel.toGlobalCoord(yAxisModel.dataToCoord(this.dragPrice));
+    const rect = this.rect;
+    const playbackOrderModel = this.playbackOrderModel;
+    const zlevel = playbackOrderModel.get("zlevel");
+    const order = playbackOrderModel.get("order");
+    const isLong = order.direction === "long";
+    const color2 = this.dragType === "TP" ? stopProfit : stopLoss;
+    const bgColor = this.dragType === "TP" ? stopProfitBg : stopLossBg;
+    if (!this.dragTpGroupEl) {
+      this.dragTpGroupEl = new Group_default();
+      const lineEl = new Line_default({zlevel});
+      const rectEl = new Rect_default({zlevel});
+      const titleEl = new Text_default({zlevel});
+      const splitEl = new Line_default({zlevel});
+      const profitEl = new Text_default({zlevel});
+      const bgEl = new Rect_default({zlevel});
+      const joinLineEl = new Line_default({zlevel});
+      const circleEl = new Circle_default({zlevel, z: 10});
+      const labelEl = new Text_default({zlevel: 2, z: 101});
+      this.dragTpGroupEl.add(lineEl);
+      this.dragTpGroupEl.add(rectEl);
+      this.dragTpGroupEl.add(titleEl);
+      this.dragTpGroupEl.add(splitEl);
+      this.dragTpGroupEl.add(profitEl);
+      this.dragTpGroupEl.add(bgEl);
+      this.dragTpGroupEl.add(joinLineEl);
+      this.dragTpGroupEl.add(circleEl);
+      this.dragTpGroupEl.add(labelEl);
+      this.group.add(this.dragTpGroupEl);
+    }
+    const dragTpGroupEl = this.dragTpGroupEl;
+    const titleWidth = 32;
+    const tp = `${((isLong ? this.dragPrice - order.price : order.price - this.dragPrice) * order.size).toFixed(order.precision)} ${order.currency}`;
+    const tpWidth = getTextWidth(tp) + descProfitPadding * 2;
+    dragTpGroupEl.childAt(0).attr({
+      shape: {
+        x1: rect.x,
+        y1: tpy,
+        x2: rect.x + rect.width,
+        y2: tpy
+      },
+      style: {
+        lineWidth: 1,
+        stroke: color2,
+        lineDash: [5, 5]
+      }
+    });
+    dragTpGroupEl.childAt(1).attr({
+      shape: {
+        y: tpy - 9,
+        width: tpWidth + titleWidth,
+        height: 18,
+        r: 10,
+        x: this.dragStartX
+      },
+      style: {
+        fill: this.backgroundColor,
+        stroke: color2,
+        lineDash: [5, 5]
+      }
+    });
+    dragTpGroupEl.childAt(2).attr({
+      style: {
+        text: this.dragType,
+        fill: color2,
+        fontSize: 14
+      },
+      x: this.dragStartX + 8,
+      y: tpy - 6
+    });
+    const splitX = Math.floor(this.dragStartX + titleWidth) + 0.5;
+    dragTpGroupEl.childAt(3).attr({
+      shape: {
+        x1: splitX,
+        y1: tpy - 9,
+        x2: splitX,
+        y2: tpy + 9
+      },
+      style: {
+        lineWidth: 1,
+        stroke: color2
+      }
+    });
+    dragTpGroupEl.childAt(4).attr({
+      style: {
+        text: tp,
+        fill: color2,
+        fontSize: 14
+      },
+      x: splitX + descProfitPadding,
+      y: tpy - 6
+    });
+    const startY = Math.min(tpy, this.y);
+    dragTpGroupEl.childAt(5).attr({
+      style: {
+        fill: bgColor
+      },
+      shape: {
+        x: this.rect.x,
+        y: startY,
+        width: this.rect.width,
+        height: Math.abs(tpy - this.y)
+      },
+      silent: true
+    });
+    const orderColor = order.direction === "long" ? longColor : shortColor;
+    dragTpGroupEl.childAt(6).attr({
+      shape: {
+        x1: this.circleX,
+        y1: tpy,
+        x2: this.circleX,
+        y2: this.y
+      },
+      style: {
+        lineWidth: 1,
+        stroke: orderColor
+      }
+    });
+    dragTpGroupEl.childAt(7).attr({
+      style: {
+        fill: orderColor
+      },
+      shape: {
+        cx: this.circleX,
+        cy: tpy,
+        r: circleR
+      }
+    });
+    const offset = this.yAxisModel.model.get("offset") || 0;
+    const x = this.yAxisModel.position === "right" ? rect.x + rect.width + offset : rect.x - offset;
+    dragTpGroupEl.childAt(8).attr({
+      style: {
+        x,
+        y: tpy - 9,
+        text: this.dragPrice.toFixed(order.precision),
+        fill: "#fff",
+        backgroundColor: "rgb(54,58,69)",
+        padding: [4, 6, 2, 8]
+      }
+    });
+  }
+  removeTpDrag() {
+    if (!this.dragTpGroupEl) {
+      return;
+    }
+    this.group.remove(this.dragTpGroupEl);
+    this.dragTpGroupEl = null;
+  }
+  renderStopProfit(type) {
+    const yAxisModel = this.yAxisModel;
+    const playbackOrderModel = this.playbackOrderModel;
+    const isStopProfit = type === "profit";
+    const order = playbackOrderModel.get("order");
+    const stopPrice = isStopProfit ? order.stopProfit : order.stopLoss;
+    const zlevel = playbackOrderModel.get("zlevel");
+    const profitY = yAxisModel.toGlobalCoord(yAxisModel.dataToCoord(stopPrice));
+    const rect = this.rect;
+    const circleX = this.circleX;
+    const circleMargin = this.circleMargin;
+    const color2 = isStopProfit ? stopProfit : stopLoss;
+    const bgColor = isStopProfit ? stopProfitBg : stopLossBg;
+    const groupKey = isStopProfit ? "stopProfitGroup" : "stopLossGroup";
+    const elsKey = isStopProfit ? "stopProfitEls" : "stopLossEls";
+    if (!this[groupKey]) {
+      const stopGroup = new Group_default();
+      const stopJoinLineEl2 = new Line_default({ignore: true, zlevel});
+      const stopLineEl2 = new Line_default({zlevel, cursor: "ns-resize"});
+      const stopDescEl2 = new Group_default();
+      const stopDescRect = new Rect_default({zlevel, cursor: "ns-resize"});
+      const stopSizeRect = new Rect_default({zlevel, cursor: "ns-resize"});
+      const stopSizText = new Text_default({zlevel, cursor: "ns-resize"});
+      const stopPlaybackIcon = createSymbol(backIcon, 0, -4, 8, 8, "#ffffff");
+      stopPlaybackIcon.zlevel = zlevel;
+      const stopProfitText = new Text_default({zlevel, cursor: "ns-resize"});
+      const stopCloseRect = new Rect_default({invisible: true, zlevel});
+      const stopCloseLine = new Line_default({zlevel});
+      const stopCloseIcon = createSymbol(closeIcon, 0, -4, 8, 8, color2);
+      ;
+      stopCloseIcon.zlevel = zlevel;
+      const dragBgEl2 = new Rect_default({ignore: true, zlevel});
+      const stopCircleEl2 = new Circle_default({invisible: true, zlevel, z: 10});
+      stopDescEl2.add(stopDescRect);
+      stopDescEl2.add(stopSizeRect);
+      stopDescEl2.add(stopSizText);
+      stopDescEl2.add(stopPlaybackIcon);
+      stopDescEl2.add(stopProfitText);
+      const stopCloseEl2 = new Group_default();
+      stopCloseEl2.add(stopCloseRect);
+      stopCloseEl2.add(stopCloseLine);
+      stopCloseEl2.add(stopCloseIcon);
+      stopDescEl2.add(stopCloseEl2);
+      stopCloseEl2.onmouseover = () => {
+        stopCloseRect.attr({
+          style: {
+            fill: bgColor
+          },
+          invisible: false
+        });
+      };
+      stopCloseEl2.onmouseout = () => {
+        stopCloseRect.attr("invisible", true);
+      };
+      stopCloseEl2.onclick = () => {
+        this.sendMessage(isStopProfit ? "deleteStopProfit" : "deleteStopLoss");
+      };
+      stopGroup.add(stopJoinLineEl2);
+      stopGroup.add(stopLineEl2);
+      stopGroup.add(stopDescEl2);
+      stopGroup.add(stopCircleEl2);
+      stopGroup.add(dragBgEl2);
+      stopGroup.onmousedown = () => {
+        this.dragGroupType = type;
+        const pointer = this.ecModel.getComponent("axisPointer", 0);
+        if (pointer) {
+          pointer.option.updatePointDisable = true;
+        }
+      };
+      this[groupKey] = stopGroup;
+      this[elsKey] = {
+        stopDescEl: stopDescEl2,
+        stopCloseEl: stopCloseEl2,
+        stopLineEl: stopLineEl2,
+        stopCircleEl: stopCircleEl2,
+        stopJoinLineEl: stopJoinLineEl2,
+        dragBgEl: dragBgEl2
+      };
+      this.group.add(stopGroup);
+    }
+    const {stopDescEl, stopCloseEl, stopLineEl, stopCircleEl, stopJoinLineEl, dragBgEl} = this[elsKey];
+    const sizeWidth = getTextWidth(order.size + "");
+    const sizeRectWidth = sizeWidth + descRectPadding * 3 + 10;
+    const isLong = order.direction === "long";
+    const profit = `${((isLong ? stopPrice - order.price : order.price - stopPrice) * order.size).toFixed(order.precision)} ${order.currency}`;
+    const profitWidth = getTextWidth(profit) + descProfitPadding * 2;
+    const closeWidth = descClosePadding * 2 + 10;
+    const descRectWidth = sizeRectWidth + profitWidth + closeWidth;
+    stopDescEl.attr({
+      x: circleX - circleMargin - descRectWidth,
+      y: profitY
+    });
+    stopLineEl.attr({
+      shape: {
+        x1: rect.x,
+        y1: profitY,
+        x2: rect.x + rect.width,
+        y2: profitY
+      },
+      style: {
+        lineWidth: 1,
+        stroke: color2
+      }
+    });
+    stopDescEl.childAt(0).attr({
+      shape: {
+        y: -9,
+        width: descRectWidth,
+        height: 18,
+        r: 10
+      },
+      style: {
+        fill: this.backgroundColor,
+        stroke: color2
+      }
+    });
+    stopDescEl.childAt(1).attr({
+      shape: {
+        y: -9,
+        width: sizeRectWidth,
+        height: 18,
+        r: [10, 0, 0, 10]
+      },
+      style: {
+        fill: color2
+      }
+    });
+    stopDescEl.childAt(2).attr({
+      style: {
+        text: order.size + "",
+        fill: "#ffffff",
+        fontSize: 14
+      },
+      x: descRectPadding,
+      y: -6
+    });
+    stopDescEl.childAt(3).attr("x", sizeWidth + descRectPadding * 2);
+    stopDescEl.childAt(4).attr({
+      style: {
+        text: profit,
+        fill: color2,
+        fontSize: 14
+      },
+      x: sizeRectWidth + descProfitPadding,
+      y: -6
+    });
+    stopCloseEl.childAt(0).attr({
+      shape: {
+        y: -9,
+        width: closeWidth,
+        height: 18,
+        r: [0, 10, 10, 0]
+      },
+      x: sizeRectWidth + profitWidth
+    });
+    stopCloseEl.childAt(1).attr({
+      style: {
+        stroke: color2
+      },
+      shape: {
+        y1: -9,
+        y2: 9
+      },
+      x: Math.floor(sizeRectWidth + profitWidth) + 0.5
+    });
+    stopCloseEl.childAt(2).attr("x", sizeRectWidth + profitWidth + descClosePadding);
+    stopCircleEl.attr({
+      style: {
+        fill: this.selected ? color2 : this.backgroundColor,
+        stroke: color2
+      },
+      shape: {
+        cx: circleX,
+        cy: profitY,
+        r: this.selected ? circleR - 1 : circleR
+      },
+      invisible: !(this.selected || this.mouseSelected)
+    });
+    const orderColor = order.direction === "long" ? longColor : shortColor;
+    stopJoinLineEl.attr({
+      shape: {
+        x1: this.circleX,
+        y1: profitY,
+        x2: this.circleX,
+        y2: this.y
+      },
+      style: {
+        lineWidth: 1,
+        stroke: orderColor
+      },
+      ignore: !(this.selected || this.mouseSelected)
+    });
+    if (this.dragGroupType === type) {
+      dragBgEl.attr({
+        ignore: false,
+        silent: true,
+        style: {
+          fill: bgColor
+        },
+        shape: {
+          x: this.rect.x,
+          y: Math.min(profitY, this.y),
+          width: this.rect.width,
+          height: Math.abs(profitY - this.y)
+        }
+      });
+    } else {
+      dragBgEl.ignore = true;
+    }
+  }
+  removeStop(type) {
+    if (type === "profit") {
+      if (!this.stopProfitGroup) {
+        return;
+      }
+      this.group.remove(this.stopProfitGroup);
+      this.stopProfitLabelEl = null;
+      this.stopProfitGroup = null;
+    } else {
+      if (!this.stopLossGroup) {
+        return;
+      }
+      this.group.remove(this.stopLossGroup);
+      this.stopLossLabelEl = null;
+      this.stopLossGroup = null;
+    }
+  }
+  renderLabels() {
+    const rect = this.rect;
+    const playbackOrderModel = this.playbackOrderModel;
+    const order = playbackOrderModel.get("order");
+    const offset = this.yAxisModel.model.get("offset") || 0;
+    const x = this.yAxisModel.position === "right" ? rect.x + rect.width + offset : rect.x - offset;
+    const zlevel = playbackOrderModel.get("zlevel");
+    const group = this.group;
+    if (!this.orderLabelEl) {
+      this.orderLabelEl = new Text_default({zlevel, z: 100});
+      group.add(this.orderLabelEl);
+    }
+    const precision = order.precision;
+    const isLong = order.direction === "long";
+    const orderColor = isLong ? longColor : shortColor;
+    const orderPriceText = order.price.toFixed(precision);
+    const padding = [4, 6, 2, 8];
+    const borderPadding = [3, 5, 1, 7];
+    const orderY = this.y - 9;
+    this.orderLabelEl.attr({
+      style: {
+        x,
+        text: orderPriceText,
+        fill: "#fff",
+        backgroundColor: orderColor,
+        padding
+      },
+      y: orderY,
+      z: 100,
+      zlevel: 2
+    });
+    const textElList = [this.orderLabelEl];
+    if (this.stopProfitGroup) {
+      if (!this.stopProfitLabelEl) {
+        this.stopProfitLabelEl = new Text_default({zlevel, z: 100});
+        group.add(this.stopProfitLabelEl);
+      }
+      const profitY = this.yAxisModel.toGlobalCoord(this.yAxisModel.dataToCoord(order.stopProfit));
+      this.stopProfitLabelEl.attr({
+        style: {
+          x,
+          text: order.stopProfit.toFixed(precision),
+          fill: orderColor,
+          padding: borderPadding,
+          borderColor: orderColor,
+          borderWidth: 1,
+          backgroundColor: this.backgroundColor
+        },
+        y: profitY - 9,
+        z: 100,
+        zlevel: 2
+      });
+      textElList.push(this.stopProfitLabelEl);
+    } else if (this.stopProfitLabelEl) {
+      group.remove(this.stopProfitLabelEl);
+    }
+    if (this.stopLossGroup) {
+      if (!this.stopLossLabelEl) {
+        this.stopLossLabelEl = new Text_default({zlevel, z: 100});
+        group.add(this.stopLossLabelEl);
+      }
+      const stopLossY = this.yAxisModel.toGlobalCoord(this.yAxisModel.dataToCoord(order.stopLoss));
+      this.stopLossLabelEl.attr({
+        style: {
+          x,
+          text: order.stopLoss.toFixed(precision),
+          fill: orderColor,
+          padding: borderPadding,
+          borderColor: orderColor,
+          borderWidth: 1,
+          backgroundColor: this.backgroundColor
+        },
+        y: stopLossY - 9,
+        z: 100,
+        zlevel: 2
+      });
+      textElList.push(this.stopLossLabelEl);
+    } else if (this.stopLossLabelEl) {
+      group.remove(this.stopLossLabelEl);
+    }
+    this.labels = textElList;
+    const markLabelModal = this.ecModel.getComponent("markLabel");
+    if (markLabelModal) {
+      const isAvoidOverlap = markLabelModal.get("isAvoidOverlap");
+      if (!isAvoidOverlap) {
+        return;
+      }
+      const view = this.api.getComponentView(markLabelModal.__viewId);
+      if (!view) {
+        return;
+      }
+      view.avoidOverlap(true, this.ecModel, this.api);
+    }
   }
   clear() {
-    this.group.removeAll();
+    if (!this.orderGroup) {
+      return;
+    }
+    this.orderLabelEl = null;
+    this.stopProfitLabelEl = null;
+    this.stopLossLabelEl = null;
     this.orderGroup = null;
-    this.shopLossGroup = null;
-    this.showProfitGroup = null;
+    this.stopLossGroup = null;
+    this.stopLossEls = null;
+    this.stopProfitGroup = null;
+    this.stopProfitEls = null;
+    this.dragTpGroupEl = null;
+    this.orderGroupEls = null;
+    this.yAxisModel = null;
+    this.playbackOrderModel = null;
+    this.group.off("mouseover", this.orderMouseover);
+    this.group.off("mouseout", this.orderMouseout);
+    this.group.off("mousedown", this.orderMousedown);
+    this.group.off("click", this.orderClick);
+    const zr = this.api.getZr();
+    zr.off("mousedown", this.zrMouseDown);
+    zr.off("mousemove", this.zrMouseMove);
+    zr.off("mouseup", this.zrMouseUp);
+    this.group.removeAll();
+    zr.refresh();
+    this.eventMount = false;
+    this.mouseSelected = false;
+    this.selected = false;
+    this.labels = null;
   }
   dispose(ecModel, api2) {
+    this.clear();
   }
 };
-var PlaybackOrderView = PlaybackOrderView2;
-PlaybackOrderView.type = "playbackOrder";
+var PlaybackOrderView3 = PlaybackOrderView4;
+PlaybackOrderView3.type = "playbackOrder";
 
 // src/component/playback/install.ts
-function install58(registers) {
+function install59(registers) {
   registers.registerComponentModel(PlaybackSelectModel);
   registers.registerComponentView(PlaybackSelectView);
   registers.registerComponentModel(PlaybackOrderModel);
-  registers.registerComponentView(PlaybackOrderView);
+  registers.registerComponentView(PlaybackOrderView3);
   registers.registerAction({type: "playbackSelect", event: "playbackSelect"}, function(payload, ecModel) {
     ecModel.eachComponent({mainType: "playbackSelect", query: payload}, function(playbackSelectModal) {
       playbackSelectModal.setPlaybackSelect(payload.playbackSelect);
@@ -74360,7 +76037,7 @@ var LogoView2 = class extends Component_default2 {
 };
 var LogoView = LogoView2;
 LogoView.type = "logo";
-function install59(registers) {
+function install60(registers) {
   registers.registerComponentModel(LogoModel);
   registers.registerComponentView(LogoView);
 }
@@ -75214,7 +76891,7 @@ function has(obj, attr) {
 }
 
 // src/component/timeline/install.ts
-function install60(registers) {
+function install61(registers) {
   registers.registerComponentModel(SliderTimelineModel_default);
   registers.registerComponentView(SliderTimelineView_default);
   registers.registerSubTypeDefaulter("timeline", function() {
@@ -75242,7 +76919,7 @@ function checkMarkerInSeries(seriesOpts, markerType) {
 function fillLabel(opt) {
   defaultEmphasis(opt, "label", ["show"]);
 }
-var inner17 = makeInner();
+var inner18 = makeInner();
 var MarkerModel2 = class extends Component_default {
   constructor() {
     super(...arguments);
@@ -75273,9 +76950,9 @@ var MarkerModel2 = class extends Component_default {
     if (!createdBySelf) {
       ecModel.eachSeries(function(seriesModel) {
         const markerOpt = seriesModel.get(this.mainType, true);
-        let markerModel = inner17(seriesModel)[componentType];
+        let markerModel = inner18(seriesModel)[componentType];
         if (!markerOpt || !markerOpt.data) {
-          inner17(seriesModel)[componentType] = null;
+          inner18(seriesModel)[componentType] = null;
           return;
         }
         if (!markerModel) {
@@ -75301,7 +76978,7 @@ var MarkerModel2 = class extends Component_default {
         } else {
           markerModel._mergeOption(markerOpt, ecModel, true);
         }
-        inner17(seriesModel)[componentType] = markerModel;
+        inner18(seriesModel)[componentType] = markerModel;
       }, this);
     }
   }
@@ -75326,7 +77003,7 @@ var MarkerModel2 = class extends Component_default {
     this._data = data;
   }
   static getMarkerModelFromSeries(seriesModel, componentType) {
-    return inner17(seriesModel)[componentType];
+    return inner18(seriesModel)[componentType];
   }
 };
 var MarkerModel = MarkerModel2;
@@ -75485,7 +77162,7 @@ function numCalculate(data, valueDataDim, type) {
 }
 
 // src/component/marker/MarkerView.ts
-var inner18 = makeInner();
+var inner19 = makeInner();
 var MarkerView2 = class extends Component_default2 {
   constructor() {
     super(...arguments);
@@ -75497,18 +77174,18 @@ var MarkerView2 = class extends Component_default2 {
   render(markerModel, ecModel, api2) {
     const markerGroupMap = this.markerGroupMap;
     markerGroupMap.each(function(item) {
-      inner18(item).keep = false;
+      inner19(item).keep = false;
     });
     ecModel.eachSeries((seriesModel) => {
       const markerModel2 = MarkerModel_default.getMarkerModelFromSeries(seriesModel, this.type);
       markerModel2 && this.renderSeries(seriesModel, markerModel2, ecModel, api2);
     });
     markerGroupMap.each((item) => {
-      !inner18(item).keep && this.group.remove(item.group);
+      !inner19(item).keep && this.group.remove(item.group);
     });
   }
   markKeep(drawGroup) {
-    inner18(drawGroup).keep = true;
+    inner19(drawGroup).keep = true;
   }
   toggleBlurSeries(seriesModelList, isBlur) {
     each(seriesModelList, (seriesModel) => {
@@ -75655,7 +77332,7 @@ function createData(coordSys, seriesModel, mpModel) {
 var MarkPointView_default = MarkPointView;
 
 // src/component/marker/installMarkPoint.ts
-function install61(registers) {
+function install62(registers) {
   registers.registerComponentModel(MarkPointModel_default);
   registers.registerComponentView(MarkPointView_default);
   registers.registerPreprocessor(function(opt) {
@@ -75707,7 +77384,7 @@ MarkLineModel.defaultOption = {
 var MarkLineModel_default = MarkLineModel;
 
 // src/component/marker/MarkLineView.ts
-var inner19 = makeInner();
+var inner20 = makeInner();
 var markLineTransform = function(seriesModel, coordSys, mlModel, item) {
   const data = seriesModel.getData();
   let itemArray;
@@ -75828,8 +77505,8 @@ var MarkLineView2 = class extends MarkerView_default {
       const mlModel = MarkerModel_default.getMarkerModelFromSeries(seriesModel, "markLine");
       if (mlModel) {
         const mlData = mlModel.getData();
-        const fromData = inner19(mlModel).from;
-        const toData = inner19(mlModel).to;
+        const fromData = inner20(mlModel).from;
+        const toData = inner20(mlModel).to;
         fromData.each(function(idx) {
           updateSingleMarkerEndLayout(fromData, idx, true, seriesModel, api2);
           updateSingleMarkerEndLayout(toData, idx, false, seriesModel, api2);
@@ -75855,8 +77532,8 @@ var MarkLineView2 = class extends MarkerView_default {
     const fromData = mlData.from;
     const toData = mlData.to;
     const lineData = mlData.line;
-    inner19(mlModel).from = fromData;
-    inner19(mlModel).to = toData;
+    inner20(mlModel).from = fromData;
+    inner20(mlModel).to = toData;
     mlModel.setData(lineData);
     let symbolType = mlModel.get("symbol");
     let symbolSize = mlModel.get("symbolSize");
@@ -75973,7 +77650,7 @@ function createList2(coordSys, seriesModel, mlModel) {
 var MarkLineView_default = MarkLineView;
 
 // src/component/marker/installMarkLine.ts
-function install62(registers) {
+function install63(registers) {
   registers.registerComponentModel(MarkLineModel_default);
   registers.registerComponentView(MarkLineView_default);
   registers.registerPreprocessor(function(opt) {
@@ -76018,7 +77695,7 @@ MarkAreaModel.defaultOption = {
 var MarkAreaModel_default = MarkAreaModel;
 
 // src/component/marker/MarkAreaView.ts
-var inner20 = makeInner();
+var inner21 = makeInner();
 var markAreaTransform = function(seriesModel, coordSys, maModel, item) {
   const item0 = item[0];
   const item1 = item[1];
@@ -76188,7 +77865,7 @@ var MarkAreaView2 = class extends MarkerView_default {
       }
       areaData.setItemVisual(idx, "style", style);
     });
-    areaData.diff(inner20(polygonGroup).data).add(function(idx) {
+    areaData.diff(inner21(polygonGroup).data).add(function(idx) {
       const layout18 = areaData.getItemLayout(idx);
       if (!layout18.allClipped) {
         const polygon = new Polygon_default({
@@ -76200,7 +77877,7 @@ var MarkAreaView2 = class extends MarkerView_default {
         polygonGroup.group.add(polygon);
       }
     }).update(function(newIdx, oldIdx) {
-      let polygon = inner20(polygonGroup).data.getItemGraphicEl(oldIdx);
+      let polygon = inner21(polygonGroup).data.getItemGraphicEl(oldIdx);
       const layout18 = areaData.getItemLayout(newIdx);
       if (!layout18.allClipped) {
         if (polygon) {
@@ -76222,7 +77899,7 @@ var MarkAreaView2 = class extends MarkerView_default {
         polygonGroup.group.remove(polygon);
       }
     }).remove(function(idx) {
-      const polygon = inner20(polygonGroup).data.getItemGraphicEl(idx);
+      const polygon = inner21(polygonGroup).data.getItemGraphicEl(idx);
       polygonGroup.group.remove(polygon);
     }).execute();
     areaData.eachItemGraphicEl(function(polygon, idx) {
@@ -76239,7 +77916,7 @@ var MarkAreaView2 = class extends MarkerView_default {
       toggleHoverEmphasis(polygon, null, null, itemModel.get(["emphasis", "disabled"]));
       getECData(polygon).dataModel = maModel;
     });
-    inner20(polygonGroup).data = areaData;
+    inner21(polygonGroup).data = areaData;
     polygonGroup.group.silent = maModel.get("silent") || seriesModel.get("silent");
   }
 };
@@ -76287,7 +77964,7 @@ function createList3(coordSys, seriesModel, maModel) {
 var MarkAreaView_default = MarkAreaView;
 
 // src/component/marker/installMarkArea.ts
-function install63(registers) {
+function install64(registers) {
   registers.registerComponentModel(MarkAreaModel_default);
   registers.registerComponentView(MarkAreaView_default);
   registers.registerPreprocessor(function(opt) {
@@ -76476,7 +78153,7 @@ var markerTypeCalculator2 = {
     return markerTypeCalculator2.last(item, seriesModel, backgroundColor2);
   }
 };
-var inner21 = makeInner();
+var inner22 = makeInner();
 var MarkLabelView2 = class extends Component_default2 {
   constructor() {
     super(...arguments);
@@ -76500,7 +78177,7 @@ var MarkLabelView2 = class extends Component_default2 {
     if (isUpdateGraphic) {
       this.graphicLabelsResize(ecModel);
     }
-    this.avoidOverlap(isAvoidOverlap);
+    this.avoidOverlap(isAvoidOverlap, ecModel, api2);
   }
   updateMarkLabels(markerModel, ecModel, api2) {
     const markerGroupMapBySeries = this.markerGroupMapBySeries;
@@ -76595,8 +78272,8 @@ var MarkLabelView2 = class extends Component_default2 {
             this._labelCountDown(item, countDownTextEl, key);
           }
         }
-        inner21(el).yAxisIndex = yAxisModel.index;
-        inner21(el).isSort = item.showName || showCountDown;
+        inner22(el).yAxisIndex = yAxisModel.index;
+        inner22(el).isSort = item.showName || showCountDown;
       });
       markerGroupMapBySeries.set(seriesName, markerGroupMap);
     });
@@ -76696,11 +78373,11 @@ var MarkLabelView2 = class extends Component_default2 {
             el = createText({gridRect, position: position2, option, ecModel, y, offset, fontSize});
             graphLabelGroup.add(el);
             graphicLabelElMap.set(option.id, el);
-            inner21(el).yAxisIndex = yAxisModel.index;
+            inner22(el).yAxisIndex = yAxisModel.index;
           }
-          inner21(el).originalValue = option.y;
-          inner21(el).isSort = true;
-          inner21(el).style = style;
+          inner22(el).originalValue = option.y;
+          inner22(el).isSort = true;
+          inner22(el).style = style;
         });
       });
     });
@@ -76709,16 +78386,16 @@ var MarkLabelView2 = class extends Component_default2 {
     const graphicLabelElMap = this._graphicLabelElMap;
     const yAxisModels = ecModel.queryComponents({mainType: "yAxis"});
     graphicLabelElMap.each((el) => {
-      const yAxisModel = yAxisModels[inner21(el).yAxisIndex].axis;
+      const yAxisModel = yAxisModels[inner22(el).yAxisIndex].axis;
       if (!yAxisModel) {
         return;
       }
       const gridRect = yAxisModel.grid.getRect();
       const position2 = yAxisModel.position;
-      const y = yAxisModel.toGlobalCoord(yAxisModel.dataToCoord(inner21(el).originalValue));
+      const y = yAxisModel.toGlobalCoord(yAxisModel.dataToCoord(inner22(el).originalValue));
       const offset = yAxisModel.model.get("offset") || 0;
       const formatter = yAxisModel.model.get(["axisLabel", "formatter"]);
-      let style = inner21(el).style;
+      let style = inner22(el).style;
       if (yAxisModel.scale.type === "percentage") {
         const formatLabel2 = yAxisModel.scale.getLabel({value: +style.text});
         style = Object.assign({}, style, {text: formatLabel2});
@@ -76756,13 +78433,13 @@ var MarkLabelView2 = class extends Component_default2 {
     }, 1e3);
     timerMap.set(key, timer);
   }
-  avoidOverlap(isAvoidOverlap) {
+  avoidOverlap(isAvoidOverlap, ecModel, api2) {
     const labelsByYAxisId = {};
     const markerGroupMapBySeries = this.markerGroupMapBySeries;
     markerGroupMapBySeries.each((markerGroupMap) => {
       markerGroupMap.each((item) => {
-        const yAxisId = inner21(item).yAxisIndex;
-        const isSort = inner21(item).isSort;
+        const yAxisId = inner22(item).yAxisIndex;
+        const isSort = inner22(item).isSort;
         if (item.ignore || !isSort) {
           return;
         }
@@ -76772,8 +78449,8 @@ var MarkLabelView2 = class extends Component_default2 {
       });
     });
     this._graphicLabelElMap.each((item) => {
-      const yAxisId = inner21(item).yAxisIndex;
-      const isSort = inner21(item).isSort;
+      const yAxisId = inner22(item).yAxisIndex;
+      const isSort = inner22(item).isSort;
       if (item.ignore || !isSort) {
         return;
       }
@@ -76781,6 +78458,19 @@ var MarkLabelView2 = class extends Component_default2 {
       labels.push(item);
       labelsByYAxisId[yAxisId] = labels;
     });
+    const playbackModel = ecModel.getComponent("playbackOrder");
+    if (playbackModel) {
+      const view = api2.getComponentView(playbackModel.__viewId);
+      if (view && view.labels) {
+        const yAxisId = view.yAxisModel.index;
+        const labels = labelsByYAxisId[yAxisId] || [];
+        each(view.labels, (item) => {
+          inner22(item).y = item.y + 9;
+          labels.push(item);
+        });
+        labelsByYAxisId[yAxisId] = labels;
+      }
+    }
     each(labelsByYAxisId, (labels) => {
       labelAvoidOverlap(labels, isAvoidOverlap);
     });
@@ -76794,8 +78484,8 @@ function textYChange(label, y, height) {
   } else {
     each(label.children(), (item) => {
       if (item.type === "text") {
-        if (inner21(item).labelType === "countDown") {
-          item.attr("style", {y: y + inner21(item).parentHeight});
+        if (inner22(item).labelType === "countDown") {
+          item.attr("style", {y: y + inner22(item).parentHeight});
           return;
         }
         item.attr("style", {y});
@@ -76807,20 +78497,20 @@ function labelAvoidOverlap(labels, isAvoidOverlap, marginTop = 0) {
   if (labels.length === 0) {
     return;
   }
-  labels.sort((a, b) => inner21(a).y - inner21(b).y);
+  labels.sort((a, b) => inner22(a).y - inner22(b).y);
   const height = labels[0].isGroup ? labels[0].children().find((item) => item.type === "text").getBoundingRect().height : labels[0].getBoundingRect().height;
   const sortYbyId = {};
   const offestY = height / 2;
   for (let i = 0; i < labels.length; i++) {
     const currentLabel = labels[i];
-    let currentLabelY = inner21(currentLabel).y;
+    let currentLabelY = inner22(currentLabel).y;
     if (i === 0 || !isAvoidOverlap) {
       textYChange(currentLabel, currentLabelY - offestY, height);
       continue;
     }
     const prevLabel = labels[i - 1];
-    const prevLabelY = sortYbyId[prevLabel.id] ?? inner21(prevLabel).y;
-    const prevHeight = inner21(prevLabel).showCountDown ? height * 2 + marginTop - 1 : height + marginTop;
+    const prevLabelY = sortYbyId[prevLabel.id] ?? inner22(prevLabel).y;
+    const prevHeight = inner22(prevLabel).showCountDown ? height * 2 + marginTop - 1 : height + marginTop;
     if (prevLabelY > currentLabelY || Math.abs(currentLabelY - prevLabelY) < prevHeight) {
       currentLabelY = prevLabelY + prevHeight;
     }
@@ -76847,7 +78537,7 @@ function createText({option, gridRect, position: position2, ecModel, y, offset,
     z: 101,
     zlevel
   });
-  inner21(textEl).y = y;
+  inner22(textEl).y = y;
   return textEl;
 }
 function updateText({option, gridRect, position: position2, ecModel, el, y, offset, fontSize}) {
@@ -76858,7 +78548,7 @@ function updateText({option, gridRect, position: position2, ecModel, el, y, offs
   el.x = x;
   el.y = y;
   el.attr("style", fontSize ? Object.assign(style, {fontSize, padding: getPaddingByStyle(fontSize, style.borderWidth)}) : style);
-  inner21(el).y = y;
+  inner22(el).y = y;
 }
 function createLabel({x, y, labelData, markerModel, gridRect, position: position2, labelTextStyle = {}, fontSize}) {
   const {zlevel} = markerModel.option;
@@ -76910,10 +78600,10 @@ function createLabel({x, y, labelData, markerModel, gridRect, position: position
     z: 100,
     ignore: !showLine
   });
-  inner21(lineEl).labelType = "line";
-  inner21(textNameEl).labelType = "nameLabel";
-  inner21(textEl).labelType = "textLabel";
-  inner21(group).y = labelY;
+  inner22(lineEl).labelType = "line";
+  inner22(textNameEl).labelType = "nameLabel";
+  inner22(textEl).labelType = "textLabel";
+  inner22(group).y = labelY;
   group.add(lineEl);
   group.add(textEl);
   group.add(textNameEl);
@@ -76932,9 +78622,9 @@ function createLabel({x, y, labelData, markerModel, gridRect, position: position
       zlevel,
       ignore: !show
     });
-    inner21(group).showCountDown = show;
-    inner21(countDownEl).labelType = "countDown";
-    inner21(countDownEl).parentHeight = offsetY;
+    inner22(group).showCountDown = show;
+    inner22(countDownEl).labelType = "countDown";
+    inner22(countDownEl).parentHeight = offsetY;
     group.add(countDownEl);
   }
   return group;
@@ -76956,9 +78646,9 @@ function updateLabel({x, y, labelData, markerModel, gridRect, position: position
   const textElWidth = textRect.width + paddings[1] + paddings[3];
   const textElx = isLeft ? x - textElWidth - borderWidth - 1 : x + borderWidth;
   const labelY = y;
-  inner21(el).y = labelY;
+  inner22(el).y = labelY;
   each(el.children(), (element) => {
-    const labelType = inner21(element).labelType;
+    const labelType = inner22(element).labelType;
     switch (labelType) {
       case "line":
         if (!showLine) {
@@ -77002,15 +78692,15 @@ function updateLabel({x, y, labelData, markerModel, gridRect, position: position
         element.ignore = false;
         break;
       case "countDown":
-        if (!countDown.show || !countDown.value) {
+        if (!countDown.show || countDown.value <= 0) {
           element.ignore = true;
-          inner21(el).showCountDown = false;
-          inner21(element).parentHeight = 0;
+          inner22(el).showCountDown = false;
+          inner22(element).parentHeight = 0;
           return;
         }
         const offsetY = showName ? textRect.height + paddings[0] + paddings[2] - 1 : 0;
-        inner21(el).showCountDown = true;
-        inner21(element).parentHeight = offsetY;
+        inner22(el).showCountDown = true;
+        inner22(element).parentHeight = offsetY;
         const fill = textStyle.fill === "#ffffff" ? "rgba(255,255,255,0.8)" : "rgba(0,0,0,0.8)";
         element.attr("style", Object.assign({
           text: countDownText,
@@ -77026,7 +78716,7 @@ function updateLabel({x, y, labelData, markerModel, gridRect, position: position
 var MarkLabelView_default = MarkLabelView;
 
 // src/component/marker/installMarkLabel.ts
-function install64(registers) {
+function install65(registers) {
   registers.registerComponentModel(MarkLabelModal_default);
   registers.registerComponentView(MarkLabelView_default);
   registers.registerPreprocessor(function(opt) {
@@ -77092,7 +78782,7 @@ var LimitTipView2 = class extends Component_default2 {
 };
 var LimitTipView = LimitTipView2;
 LimitTipView.type = "limitTip";
-function install65(registers) {
+function install66(registers) {
   registers.registerComponentModel(LimitTipModel);
   registers.registerComponentView(LimitTipView);
 }
@@ -77330,7 +79020,7 @@ var LegendModel_default = LegendModel;
 
 // src/component/legend/LegendView.ts
 var curry2 = curry;
-var each18 = each;
+var each19 = each;
 var Group3 = Group_default;
 var LegendView2 = class extends Component_default2 {
   constructor() {
@@ -77394,7 +79084,7 @@ var LegendView2 = class extends Component_default2 {
     ecModel.eachRawSeries(function(seriesModel) {
       !seriesModel.get("legendHoverLink") && excludeSeriesId.push(seriesModel.id);
     });
-    each18(legendModel.getData(), function(legendItemModel, dataIndex) {
+    each19(legendModel.getData(), function(legendItemModel, dataIndex) {
       const name = legendItemModel.get("name");
       if (!this.newlineDisabled && (name === "" || name === "\n")) {
         const g = new Group3();
@@ -77466,7 +79156,7 @@ var LegendView2 = class extends Component_default2 {
   }
   _createSelector(selector2, legendModel, api2, orient, selectorPosition) {
     const selectorGroup = this.getSelectorGroup();
-    each18(selector2, function createSelectorButton(selectorItem) {
+    each19(selector2, function createSelectorButton(selectorItem) {
       const type = selectorItem.type;
       const labelText = new Text_default({
         style: {
@@ -77619,7 +79309,7 @@ function getLegendStyle(iconType, legendItemModel, lineVisualStyle, itemVisualSt
     if (style.lineWidth === "auto") {
       style.lineWidth = visualStyle.lineWidth > 0 ? 2 : 0;
     }
-    each18(style, (propVal, propName) => {
+    each19(style, (propVal, propName) => {
       style[propName] === "inherit" && (style[propName] = visualStyle[propName]);
     });
   }
@@ -77769,7 +79459,7 @@ function installLegendAction(registers) {
 }
 
 // src/component/legend/installLegendPlain.ts
-function install66(registers) {
+function install67(registers) {
   registers.registerComponentModel(LegendModel_default);
   registers.registerComponentView(LegendView_default);
   registers.registerProcessor(registers.PRIORITY.PROCESSOR.SERIES_FILTER, legendFilter);
@@ -78099,17 +79789,17 @@ function installScrollableLegendAction(registers) {
 }
 
 // src/component/legend/installLegendScroll.ts
-function install67(registers) {
-  use(install66);
+function install68(registers) {
+  use(install67);
   registers.registerComponentModel(ScrollableLegendModel_default);
   registers.registerComponentView(ScrollableLegendView_default);
   installScrollableLegendAction(registers);
 }
 
 // src/component/legend/install.ts
-function install68(registers) {
-  use(install66);
+function install69(registers) {
   use(install67);
+  use(install68);
 }
 
 // src/component/dataZoom/InsideZoomModel.ts
@@ -78249,9 +79939,9 @@ var KineticAnimation = class {
 };
 
 // src/component/dataZoom/roams.ts
-var inner22 = makeInner();
+var inner23 = makeInner();
 function setViewInfoToCoordSysRecord(api2, dataZoomModel, getRange) {
-  inner22(api2).coordSysRecordMap.each(function(coordSysRecord) {
+  inner23(api2).coordSysRecordMap.each(function(coordSysRecord) {
     const dzInfo = coordSysRecord.dataZoomInfoMap.get(dataZoomModel.uid);
     if (dzInfo) {
       dzInfo.getRange = getRange;
@@ -78259,7 +79949,7 @@ function setViewInfoToCoordSysRecord(api2, dataZoomModel, getRange) {
   });
 }
 function disposeCoordSysRecordIfNeeded(api2, dataZoomModel) {
-  const coordSysRecordMap = inner22(api2).coordSysRecordMap;
+  const coordSysRecordMap = inner23(api2).coordSysRecordMap;
   const coordSysKeyArr = coordSysRecordMap.keys();
   for (let i = 0; i < coordSysKeyArr.length; i++) {
     const coordSysKey = coordSysKeyArr[i];
@@ -78430,7 +80120,7 @@ function mergeControllerParams(dataZoomInfoMap) {
 }
 function installDataZoomRoamProcessor(registers) {
   registers.registerProcessor(registers.PRIORITY.PROCESSOR.FILTER, function(ecModel, api2) {
-    const apiInner = inner22(api2);
+    const apiInner = inner23(api2);
     const coordSysRecordMap = apiInner.coordSysRecordMap || (apiInner.coordSysRecordMap = createHashMap());
     coordSysRecordMap.each(function(coordSysRecord) {
       coordSysRecord.dataZoomInfoMap = null;
@@ -78695,7 +80385,7 @@ var getDirectionInfo = {
 var InsideZoomView_default = InsideZoomView;
 
 // src/component/dataZoom/installDataZoomInside.ts
-function install69(registers) {
+function install70(registers) {
   installCommon(registers);
   registers.registerComponentModel(InsideZoomModel_default);
   registers.registerComponentView(InsideZoomView_default);
@@ -79442,8 +81132,8 @@ var SliderZoomView2 = class extends DataZoomView_default {
 var SliderZoomView = SliderZoomView2;
 SliderZoomView.type = "dataZoom.slider";
 function getOtherDim(thisDim) {
-  const map7 = {x: "y", y: "x", radius: "angle", angle: "radius"};
-  return map7[thisDim];
+  const map9 = {x: "y", y: "x", radius: "angle", angle: "radius"};
+  return map9[thisDim];
 }
 function getCursor(orient) {
   return orient === "vertical" ? "ns-resize" : "ew-resize";
@@ -79451,16 +81141,16 @@ function getCursor(orient) {
 var SliderZoomView_default = SliderZoomView;
 
 // src/component/dataZoom/installDataZoomSlider.ts
-function install70(registers) {
+function install71(registers) {
   registers.registerComponentModel(SliderZoomModel_default);
   registers.registerComponentView(SliderZoomView_default);
   installCommon(registers);
 }
 
 // src/component/dataZoom/install.ts
-function install71(registers) {
-  use(install69);
+function install72(registers) {
   use(install70);
+  use(install71);
 }
 
 // src/visual/visualDefault.ts
@@ -79509,8 +81199,8 @@ var visualDefault_default = visualDefault;
 // src/component/visualMap/VisualMapModel.ts
 var mapVisual2 = VisualMapping_default.mapVisual;
 var eachVisual = VisualMapping_default.eachVisual;
-var isArray2 = isArray;
-var each19 = each;
+var isArray3 = isArray;
+var each20 = each;
 var asc3 = asc;
 var linearMap2 = linearMap;
 var VisualMapModel2 = class extends Component_default {
@@ -79650,7 +81340,7 @@ var VisualMapModel2 = class extends Component_default {
     completeInactive.call(this, target, "inRange", "outOfRange");
     completeController.call(this, controller);
     function completeSingle(base3) {
-      if (isArray2(thisOption.color) && !base3.inRange) {
+      if (isArray3(thisOption.color) && !base3.inRange) {
         base3.inRange = {color: thisOption.color.slice().reverse()};
       }
       base3.inRange = base3.inRange || {color: ecModel.get("gradientColor")};
@@ -79660,7 +81350,7 @@ var VisualMapModel2 = class extends Component_default {
       let optAbsent = base3[stateAbsent];
       if (optExist && !optAbsent) {
         optAbsent = base3[stateAbsent] = {};
-        each19(optExist, function(visualData, visualType) {
+        each20(optExist, function(visualData, visualType) {
           if (!VisualMapping_default.isValidType(visualType)) {
             return;
           }
@@ -79680,7 +81370,7 @@ var VisualMapModel2 = class extends Component_default {
       const inactiveColor = this.get("inactiveColor");
       const itemSymbol = this.getItemSymbol();
       const defaultSymbol = itemSymbol || "roundRect";
-      each19(this.stateList, function(state) {
+      each20(this.stateList, function(state) {
         const itemSize = this.itemSize;
         let visuals = controller2[state];
         if (!visuals) {
@@ -80040,7 +81730,7 @@ function makeHighDownBatch(batch, visualMapModel) {
 
 // src/component/visualMap/ContinuousView.ts
 var linearMap3 = linearMap;
-var each20 = each;
+var each21 = each;
 var mathMin11 = Math.min;
 var mathMax11 = Math.max;
 var HOVER_LINK_SIZE = 12;
@@ -80368,7 +82058,7 @@ var ContinuousView2 = class extends VisualMapView_default {
     const handleLabels = shapes.handleLabels;
     const itemSize = visualMapModel.itemSize;
     const dataExtent = visualMapModel.getExtent();
-    each20([0, 1], function(handleIndex) {
+    each21([0, 1], function(handleIndex) {
       const handleThumb = handleThumbs[handleIndex];
       handleThumb.setStyle("fill", visualInRange.handlesColor[handleIndex]);
       handleThumb.y = handleEnds[handleIndex];
@@ -80674,13 +82364,13 @@ function getColorVisual(seriesModel, visualMapModel, value, valueState) {
 }
 
 // src/component/visualMap/preprocessor.ts
-var each21 = each;
+var each22 = each;
 function visualMapPreprocessor(option) {
   let visualMap = option && option.visualMap;
   if (!isArray(visualMap)) {
     visualMap = visualMap ? [visualMap] : [];
   }
-  each21(visualMap, function(opt) {
+  each22(visualMap, function(opt) {
     if (!opt) {
       return;
     }
@@ -80690,7 +82380,7 @@ function visualMapPreprocessor(option) {
     }
     const pieces = opt.pieces;
     if (pieces && isArray(pieces)) {
-      each21(pieces, function(piece) {
+      each22(pieces, function(piece) {
         if (isObject(piece)) {
           if (has2(piece, "start") && !has2(piece, "min")) {
             piece.min = piece.start;
@@ -80725,7 +82415,7 @@ function installCommon2(registers) {
 }
 
 // src/component/visualMap/installVisualMapContinuous.ts
-function install72(registers) {
+function install73(registers) {
   registers.registerComponentModel(ContinuousModel_default);
   registers.registerComponentView(ContinuousView_default);
   installCommon2(registers);
@@ -81165,16 +82855,16 @@ PiecewiseVisualMapView.type = "visualMap.piecewise";
 var PiecewiseView_default = PiecewiseVisualMapView;
 
 // src/component/visualMap/installVisualMapPiecewise.ts
-function install73(registers) {
+function install74(registers) {
   registers.registerComponentModel(PiecewiseModel_default);
   registers.registerComponentView(PiecewiseView_default);
   installCommon2(registers);
 }
 
 // src/component/visualMap/install.ts
-function install74(registers) {
-  use(install72);
+function install75(registers) {
   use(install73);
+  use(install74);
 }
 
 // src/visual/aria.ts
@@ -81186,7 +82876,7 @@ var DEFAULT_OPTION = {
     show: false
   }
 };
-var inner23 = makeInner();
+var inner24 = makeInner();
 var decalPaletteScope = {};
 function ariaVisual(ecModel, api2) {
   const ariaModel = ecModel.getModel("aria");
@@ -81212,7 +82902,7 @@ function ariaVisual(ecModel, api2) {
           decalScope = {};
           paletteScopeGroupByType.set(seriesModel.type, decalScope);
         }
-        inner23(seriesModel).scope = decalScope;
+        inner24(seriesModel).scope = decalScope;
       });
       ecModel.eachRawSeries((seriesModel) => {
         if (ecModel.isSeriesFiltered(seriesModel)) {
@@ -81226,7 +82916,7 @@ function ariaVisual(ecModel, api2) {
         if (!seriesModel.isColorBySeries()) {
           const dataAll = seriesModel.getRawData();
           const idxMap = {};
-          const decalScope = inner23(seriesModel).scope;
+          const decalScope = inner24(seriesModel).scope;
           data.each(function(idx) {
             const rawIdx = data.getRawIndex(idx);
             idxMap[rawIdx] = idx;
@@ -81370,7 +83060,7 @@ function ariaPreprocessor(option) {
 }
 
 // src/component/aria/install.ts
-function install75(registers) {
+function install76(registers) {
   registers.registerPreprocessor(ariaPreprocessor);
   registers.registerVisual(registers.PRIORITY.VISUAL.ARIA, ariaVisual);
 }
@@ -81708,7 +83398,7 @@ var sortTransform = {
 };
 
 // src/component/transform/install.ts
-function install76(registers) {
+function install77(registers) {
   registers.registerTransform(filterTransform);
   registers.registerTransform(sortTransform);
 }
@@ -81746,7 +83436,7 @@ var DatasetView = class extends Component_default2 {
   }
 };
 DatasetView.type = "dataset";
-function install77(registers) {
+function install78(registers) {
   registers.registerComponentModel(DatasetModel);
   registers.registerComponentView(DatasetView);
 }
@@ -83464,7 +85154,7 @@ use([
   install18,
   install19,
   install20,
-  install30,
+  install31,
   install21,
   install22,
   install23,
@@ -83474,33 +85164,33 @@ use([
   install27,
   install28,
   install29,
+  install30,
+  install35,
   install34,
-  install33,
-  install31,
   install32,
-  install35,
-  install37,
+  install33,
   install36,
   install38,
+  install37,
   install39,
   install40,
   install41,
-  install42
+  install42,
+  install43
 ]);
-use(install44);
 use(install45);
-use(install10);
 use(install46);
-use(install17);
+use(install10);
 use(install47);
+use(install17);
 use(install48);
-use(install50);
+use(install49);
 use(install51);
-use(install43);
 use(install52);
+use(install44);
 use(install53);
-use(install65);
 use(install54);
+use(install66);
 use(install55);
 use(install56);
 use(install57);
@@ -83511,16 +85201,17 @@ use(install61);
 use(install62);
 use(install63);
 use(install64);
-use(install68);
-use(install71);
+use(install65);
 use(install69);
-use(install70);
-use(install74);
 use(install72);
-use(install73);
+use(install70);
+use(install71);
 use(install75);
+use(install73);
+use(install74);
 use(install76);
 use(install77);
+use(install78);
 use(installUniversalTransition);
 use(installLabelLayout);