tvcharts 0.8.73 → 0.8.74

package/dist/echarts.js

@@ -14327,9 +14327,9 @@ function setTextStyleCommon(textStyle, textStyleModel, opt, isNotNormal, isAttac
   if (overflow) {
     textStyle.overflow = overflow;
   }
-  const margin3 = textStyleModel.get("minMargin");
-  if (margin3 != null) {
-    textStyle.margin = margin3;
+  const margin4 = textStyleModel.get("minMargin");
+  if (margin4 != null) {
+    textStyle.margin = margin4;
   }
   setTokenTextStyle(textStyle, textStyleModel, globalTextStyle, opt, isNotNormal, isAttached, true, false);
 }
@@ -15646,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, margin3) {
+function getAvailableSize(positionInfo, containerRect, margin4) {
   const containerWidth = containerRect.width;
   const containerHeight = containerRect.height;
   let x = parsePercent2(positionInfo.left, containerWidth);
@@ -15657,14 +15657,14 @@ function getAvailableSize(positionInfo, containerRect, margin3) {
   (isNaN(x2) || isNaN(parseFloat(positionInfo.right))) && (x2 = containerWidth);
   (isNaN(y) || isNaN(parseFloat(positionInfo.top))) && (y = 0);
   (isNaN(y2) || isNaN(parseFloat(positionInfo.bottom))) && (y2 = containerHeight);
-  margin3 = normalizeCssArray2(margin3 || 0);
+  margin4 = normalizeCssArray2(margin4 || 0);
   return {
-    width: Math.max(x2 - x - margin3[1] - margin3[3], 0),
-    height: Math.max(y2 - y - margin3[0] - margin3[2], 0)
+    width: Math.max(x2 - x - margin4[1] - margin4[3], 0),
+    height: Math.max(y2 - y - margin4[0] - margin4[2], 0)
   };
 }
-function getLayoutRect(positionInfo, containerRect, margin3) {
-  margin3 = normalizeCssArray2(margin3 || 0);
+function getLayoutRect(positionInfo, containerRect, margin4) {
+  margin4 = normalizeCssArray2(margin4 || 0);
   const containerWidth = containerRect.width;
   const containerHeight = containerRect.height;
   let left = parsePercent2(positionInfo.left, containerWidth);
@@ -15673,8 +15673,8 @@ function getLayoutRect(positionInfo, containerRect, margin3) {
   const bottom = parsePercent2(positionInfo.bottom, containerHeight);
   let width = parsePercent2(positionInfo.width, containerWidth);
   let height = parsePercent2(positionInfo.height, containerHeight);
-  const verticalMargin = margin3[2] + margin3[0];
-  const horizontalMargin = margin3[1] + margin3[3];
+  const verticalMargin = margin4[2] + margin4[0];
+  const horizontalMargin = margin4[1] + margin4[3];
   const aspect = positionInfo.aspect;
   if (isNaN(width)) {
     width = containerWidth - right - horizontalMargin - left;
@@ -15705,7 +15705,7 @@ function getLayoutRect(positionInfo, containerRect, margin3) {
   }
   switch (positionInfo.left || positionInfo.right) {
     case "center":
-      left = containerWidth / 2 - width / 2 - margin3[3];
+      left = containerWidth / 2 - width / 2 - margin4[3];
       break;
     case "right":
       left = containerWidth - width - horizontalMargin;
@@ -15714,7 +15714,7 @@ function getLayoutRect(positionInfo, containerRect, margin3) {
   switch (positionInfo.top || positionInfo.bottom) {
     case "middle":
     case "center":
-      top = containerHeight / 2 - height / 2 - margin3[0];
+      top = containerHeight / 2 - height / 2 - margin4[0];
       break;
     case "bottom":
       top = containerHeight - height - verticalMargin;
@@ -15728,11 +15728,11 @@ function getLayoutRect(positionInfo, containerRect, margin3) {
   if (isNaN(height)) {
     height = containerHeight - verticalMargin - top - (bottom || 0);
   }
-  const rect = new BoundingRect_default(left + margin3[3], top + margin3[0], width, height);
-  rect.margin = margin3;
+  const rect = new BoundingRect_default(left + margin4[3], top + margin4[0], width, height);
+  rect.margin = margin4;
   return rect;
 }
-function positionElement(el, positionInfo, containerRect, margin3, opt, out2) {
+function positionElement(el, positionInfo, containerRect, margin4, opt, out2) {
   const h = !opt || !opt.hv || opt.hv[0];
   const v = !opt || !opt.hv || opt.hv[1];
   const boundingMode = opt && opt.boundingMode || "all";
@@ -15753,7 +15753,7 @@ function positionElement(el, positionInfo, containerRect, margin3, opt, out2) {
       rect.applyTransform(transform2);
     }
   }
-  const layoutRect = getLayoutRect(defaults({width: rect.width, height: rect.height}, positionInfo), containerRect, margin3);
+  const layoutRect = getLayoutRect(defaults({width: rect.width, height: rect.height}, positionInfo), containerRect, margin4);
   const dx = h ? layoutRect.x - rect.x : 0;
   const dy = v ? layoutRect.y - rect.y : 0;
   if (boundingMode === "raw") {
@@ -31232,9 +31232,9 @@ var Axis = class {
 function fixExtentWithBands(extent3, nTick) {
   const size = extent3[1] - extent3[0];
   const len2 = nTick;
-  const margin3 = size / len2 / 2;
-  extent3[0] += margin3;
-  extent3[1] -= margin3;
+  const margin4 = size / len2 / 2;
+  extent3[0] += margin4;
+  extent3[1] -= margin4;
 }
 function fixOnBandTicksCoords(axis, ticksCoords, alignWithLabel, clamp2) {
   const ticksLen = ticksCoords.length;
@@ -38406,8 +38406,8 @@ function constrainTextWidth(layout18, availableWidth, forceRecalculate = false)
     }
     const newRect = label.getBoundingRect();
     textRect.width = newRect.width;
-    const margin3 = (label.style.margin || 0) + 2.1;
-    textRect.height = newRect.height + margin3;
+    const margin4 = (label.style.margin || 0) + 2.1;
+    textRect.height = newRect.height + margin4;
     textRect.y -= (textRect.height - oldHeight) / 2;
   }
 }
@@ -38535,9 +38535,9 @@ function pieLabelLayout(seriesModel) {
     if (!isLabelInside) {
       const textRect = label.getBoundingRect().clone();
       textRect.applyTransform(label.getComputedTransform());
-      const margin3 = (label.style.margin || 0) + 2.1;
-      textRect.y -= margin3 / 2;
-      textRect.height += margin3;
+      const margin4 = (label.style.margin || 0) + 2.1;
+      textRect.y -= margin4 / 2;
+      textRect.height += margin4;
       labelLayoutList.push({
         label,
         labelLine,
@@ -39957,12 +39957,12 @@ var Grid2 = class {
           const labelUnionRect = estimateLabelUnionRect(axis);
           if (labelUnionRect) {
             const dim = axis.isHorizontal() ? "height" : "width";
-            const margin3 = axis.model.get(["axisLabel", "margin"]);
-            gridRect[dim] -= labelUnionRect[dim] + margin3;
+            const margin4 = axis.model.get(["axisLabel", "margin"]);
+            gridRect[dim] -= labelUnionRect[dim] + margin4;
             if (axis.position === "top") {
-              gridRect.y += labelUnionRect.height + margin3;
+              gridRect.y += labelUnionRect.height + margin4;
             } else if (axis.position === "left") {
-              gridRect.x += labelUnionRect.width + margin3;
+              gridRect.x += labelUnionRect.width + margin4;
             }
           }
         }
@@ -57664,12 +57664,11 @@ var TooltipHTMLContent = class {
     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>
+        <div style="font-weight: 600; font-size: 18px;">${isUp ? "\u4E70\u5165" : "\u5356\u51FA"}</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";
     }
@@ -57713,7 +57712,7 @@ var PlaybackOrderView2 = class extends Chart_default {
     this._renderHover();
     if (!this.htmlContent) {
       this.htmlContent = new PlaybackHtmlContent_default(api2);
-      api2.getZr().on("click", this._clickGlobal, this);
+      api2.getZr().on("mousedown", this._clickGlobal, this);
     }
     const clipPath = seriesModel.get("clip", true) && createClipPath(seriesModel.coordinateSystem, false, seriesModel);
     if (clipPath) {
@@ -57790,6 +57789,13 @@ var PlaybackOrderView2 = class extends Chart_default {
     const coordSys = seriesModel.coordinateSystem;
     return coordSys && coordSys.getArea && coordSys.getArea(0.1);
   }
+  _mouseDown(e2) {
+    const obj = inner11(e2.target);
+    if (!obj) {
+      return;
+    }
+    e2.cancelBubble = true;
+  }
   _mouseClick(e2) {
     const obj = inner11(e2.target);
     if (!obj) {
@@ -57841,6 +57847,7 @@ var PlaybackOrderView2 = class extends Chart_default {
       this.group.on("mouseover", this._mouseover, this);
       this.group.on("mouseout", this._mouseout, this);
       this.group.on("click", this._mouseClick, this);
+      this.group.on("mousedown", this._mouseDown, this);
     } else {
       this._symbolGroup.removeAll();
     }
@@ -57912,7 +57919,7 @@ var PlaybackOrderView2 = class extends Chart_default {
   dispose(ecModel, api2) {
     this.remove(ecModel, api2);
     this.htmlContent.dispose();
-    api2.getZr().off("click", this._clickGlobal);
+    api2.getZr().off("mousedown", this._clickGlobal);
     this.htmlContent = null;
   }
 };
@@ -62770,7 +62777,7 @@ var ThemeRiverView2 = class extends Chart_default {
       let polygon;
       const textLayout = data.getItemLayout(indices[0]);
       const labelModel = seriesModel.getModel("label");
-      const margin3 = labelModel.get("margin");
+      const margin4 = labelModel.get("margin");
       const emphasisModel = seriesModel.getModel("emphasis");
       if (status === "add") {
         const layerGroup = newLayersGroups[idx] = new Group_default();
@@ -62819,7 +62826,7 @@ var ThemeRiverView2 = class extends Chart_default {
       });
       const labelEl = polygon.getTextContent();
       if (labelEl) {
-        labelEl.x = textLayout.x - margin3;
+        labelEl.x = textLayout.x - margin4;
         labelEl.y = textLayout.y0 + textLayout.y / 2;
       }
       polygon.useStyle(style);
@@ -68303,20 +68310,20 @@ var CalendarView2 = class extends Component_default2 {
     }
     return params.nameMap;
   }
-  _yearTextPositionControl(textEl, point, orient, position2, margin3) {
+  _yearTextPositionControl(textEl, point, orient, position2, margin4) {
     let x = point[0];
     let y = point[1];
     let aligns = ["center", "bottom"];
     if (position2 === "bottom") {
-      y += margin3;
+      y += margin4;
       aligns = ["center", "top"];
     } else if (position2 === "left") {
-      x -= margin3;
+      x -= margin4;
     } else if (position2 === "right") {
-      x += margin3;
+      x += margin4;
       aligns = ["center", "top"];
     } else {
-      y -= margin3;
+      y -= margin4;
     }
     let rotate2 = 0;
     if (position2 === "left" || position2 === "right") {
@@ -68337,7 +68344,7 @@ var CalendarView2 = class extends Component_default2 {
     if (!yearLabel.get("show")) {
       return;
     }
-    const margin3 = yearLabel.get("margin");
+    const margin4 = yearLabel.get("margin");
     let pos = yearLabel.get("position");
     if (!pos) {
       pos = orient !== "horizontal" ? "top" : "left";
@@ -68369,16 +68376,16 @@ var CalendarView2 = class extends Component_default2 {
         text: content
       })
     });
-    yearText.attr(this._yearTextPositionControl(yearText, posPoints[pos], orient, pos, margin3));
+    yearText.attr(this._yearTextPositionControl(yearText, posPoints[pos], orient, pos, margin4));
     group.add(yearText);
   }
-  _monthTextPositionControl(point, isCenter, orient, position2, margin3) {
+  _monthTextPositionControl(point, isCenter, orient, position2, margin4) {
     let align = "left";
     let vAlign = "top";
     let x = point[0];
     let y = point[1];
     if (orient === "horizontal") {
-      y = y + margin3;
+      y = y + margin4;
       if (isCenter) {
         align = "center";
       }
@@ -68386,7 +68393,7 @@ var CalendarView2 = class extends Component_default2 {
         vAlign = "bottom";
       }
     } else {
-      x = x + margin3;
+      x = x + margin4;
       if (isCenter) {
         vAlign = "middle";
       }
@@ -68407,7 +68414,7 @@ var CalendarView2 = class extends Component_default2 {
       return;
     }
     let nameMap = monthLabel.get("nameMap");
-    let margin3 = monthLabel.get("margin");
+    let margin4 = monthLabel.get("margin");
     const pos = monthLabel.get("position");
     const align = monthLabel.get("align");
     const termPoints = [this._tlpoints, this._blpoints];
@@ -68419,7 +68426,7 @@ var CalendarView2 = class extends Component_default2 {
     }
     const idx = pos === "start" ? 0 : 1;
     const axis = orient === "horizontal" ? 0 : 1;
-    margin3 = pos === "start" ? -margin3 : margin3;
+    margin4 = pos === "start" ? -margin4 : margin4;
     const isCenter = align === "center";
     for (let i = 0; i < termPoints[idx].length - 1; i++) {
       const tmp = termPoints[idx][i].slice();
@@ -68440,22 +68447,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, margin3))
+        style: extend(createTextStyle(monthLabel, {text: content}), this._monthTextPositionControl(tmp, isCenter, orient, pos, margin4))
       });
       group.add(monthText);
     }
   }
-  _weekTextPositionControl(point, orient, position2, margin3, cellSize) {
+  _weekTextPositionControl(point, orient, position2, margin4, cellSize) {
     let align = "center";
     let vAlign = "middle";
     let x = point[0];
     let y = point[1];
     const isStart = position2 === "start";
     if (orient === "horizontal") {
-      x = x + margin3 + (isStart ? 1 : -1) * cellSize[0] / 2;
+      x = x + margin4 + (isStart ? 1 : -1) * cellSize[0] / 2;
       align = isStart ? "right" : "left";
     } else {
-      y = y + margin3 + (isStart ? 1 : -1) * cellSize[1] / 2;
+      y = y + margin4 + (isStart ? 1 : -1) * cellSize[1] / 2;
       vAlign = isStart ? "bottom" : "top";
     }
     return {
@@ -68473,7 +68480,7 @@ var CalendarView2 = class extends Component_default2 {
     const coordSys = calendarModel.coordinateSystem;
     const pos = dayLabel.get("position");
     let nameMap = dayLabel.get("nameMap");
-    let margin3 = dayLabel.get("margin");
+    let margin4 = dayLabel.get("margin");
     const firstDayOfWeek = coordSys.getFirstDayOfWeek();
     if (!nameMap || isString(nameMap)) {
       if (nameMap) {
@@ -68484,10 +68491,10 @@ var CalendarView2 = class extends Component_default2 {
     }
     let start2 = coordSys.getNextNDay(rangeData.end.time, 7 - rangeData.lweek).time;
     const cellSize = [coordSys.getCellWidth(), coordSys.getCellHeight()];
-    margin3 = parsePercent2(margin3, Math.min(cellSize[1], cellSize[0]));
+    margin4 = parsePercent2(margin4, Math.min(cellSize[1], cellSize[0]));
     if (pos === "start") {
       start2 = coordSys.getNextNDay(rangeData.start.time, -(7 + rangeData.fweek)).time;
-      margin3 = -margin3;
+      margin4 = -margin4;
     }
     for (let i = 0; i < 7; i++) {
       const tmpD = coordSys.getNextNDay(start2, i);
@@ -68496,7 +68503,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, margin3, cellSize))
+        style: extend(createTextStyle(dayLabel, {text: nameMap[day]}), this._weekTextPositionControl(point, orient, pos, margin4, cellSize))
       });
       group.add(weekText);
     }
@@ -72107,6 +72114,59 @@ function makeStyleCoord2(out2, zr, zrX, zrY) {
 }
 var TooltipRichContent_default = TooltipRichContent;
 
+// src/component/tooltip/TooltipTextHtmlContent.ts
+var margin2 = 10;
+var TooltipTextHtmlContent = 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);
+    this._api = api2;
+    this._container = container;
+  }
+  show({x, y, text}) {
+    const el = this.el;
+    const style = el.style;
+    style.position = "absolute";
+    style.top = y - margin2 + "px";
+    style.left = x + "px";
+    style.visibility = "visible";
+    style.opacity = "1";
+    style.transform = "translateX(-50%) translateY(-100%)";
+    el.innerHTML = `<div>
+        <div style="min-width: 32px; padding: 4px 8px; color: var(--title-color); background-color: var(--modal-bg); font-size: 14px; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.08) 0px 6px 16px 0px, rgba(0, 0, 0, 0.12) 0px 3px 6px -4px, rgba(0, 0, 0, 0.05) 0px 9px 28px 8px;">${text}</div>
+        <div style="width: 10px; height: 8px; transform: translateX(-50%) translateY(50%) rotate(45deg); position: absolute; bottom: 0px; left: 50%; background-color: var(--modal-bg);"></div>
+        </div>`;
+  }
+  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 TooltipTextHtmlContent_default = TooltipTextHtmlContent;
+
 // src/component/tooltip/TooltipView.ts
 var proxyRect = new Rect_default({
   shape: {x: -1, y: -1, width: 2, height: 2}
@@ -72126,6 +72186,7 @@ var TooltipView2 = class extends Component_default2 {
     this._tooltipContent = renderMode === "richText" ? new TooltipRichContent_default(api2) : new TooltipHTMLContent_default(api2, {
       appendTo: tooltipModel.get("appendToBody", true) ? "body" : tooltipModel.get("appendTo", true)
     });
+    this._tooltipText = new TooltipTextHtmlContent_default(api2);
   }
   render(tooltipModel, ecModel, api2) {
     if (env_default.node || !api2.getDom()) {
@@ -72657,6 +72718,12 @@ var TooltipView2 = class extends Component_default2 {
       this._lastPoint = [];
     }
   }
+  showTipText(tooltipModel, ecModel, api2, payload) {
+    this._tooltipText.show(payload);
+  }
+  hideTipText(tooltipModel, ecModel, api2, payload) {
+    this._tooltipText.hide();
+  }
   dispose(ecModel, api2) {
     if (env_default.node || !api2.getDom()) {
       return;
@@ -72668,6 +72735,7 @@ var TooltipView2 = class extends Component_default2 {
     }
     clear(this, "_updatePosition");
     this._tooltipContent.dispose();
+    this._tooltipText.dispose();
     unregister("itemTooltip", api2);
   }
 };
@@ -72822,6 +72890,16 @@ function install52(registers) {
     event: "hidePointer",
     update: "tooltip:hidePoint"
   }, noop);
+  registers.registerAction({
+    type: "showTipText",
+    event: "showTipText",
+    update: "tooltip:showTipText"
+  }, noop);
+  registers.registerAction({
+    type: "hideTipText",
+    event: "hideTipText",
+    update: "tooltip:hideTipText"
+  }, noop);
 }
 
 // src/component/brush/preprocessor.ts
@@ -73733,7 +73811,7 @@ function getTextYOffset(height, align, paddings) {
       return paddings;
   }
 }
-var margin2 = 6;
+var margin3 = 6;
 function getXYByPosition(rect, position2, width, height, frame_width = 0) {
   let x = rect.x;
   let y = rect.y;
@@ -73750,16 +73828,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 + margin2;
+        y = y + frame_width + margin3;
         break;
       case "bottom":
-        y = y + rect.height - height - frame_width - margin2;
+        y = y + rect.height - height - frame_width - margin3;
         break;
       case "middle":
         y = y + (rect.height - height) / 2 + frame_width;
         break;
       default:
-        y = y + frame_width + margin2;
+        y = y + frame_width + margin3;
         break;
     }
   }
@@ -74664,7 +74742,7 @@ var PlaybackSelectView2 = class extends Component_default2 {
     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)));
     const lineStyle = {
       lineWidth: 2,
       stroke: color2
@@ -74681,6 +74759,7 @@ var PlaybackSelectView2 = class extends Component_default2 {
         style: lineStyle
       });
       this.lineEl = lineEl;
+      lineEl.z2 = 2;
       group.add(lineEl);
     } else {
       this.lineEl.attr({
@@ -74703,6 +74782,7 @@ var PlaybackSelectView2 = class extends Component_default2 {
         shape: rectShape,
         style: rectStyle
       });
+      rectEl.z2 = 1;
       group.add(rectEl);
       this.rectEl = rectEl;
     } else {
@@ -75075,10 +75155,26 @@ var PlaybackOrderView4 = class extends Component_default2 {
     orderClosePositionEl.add(closePositionRect);
     orderClosePositionEl.add(closePositionIcon);
     orderClosePositionEl.onmouseover = () => {
+      this.clearTimer();
+      this._timer = setTimeout(() => {
+        const [x, y] = closePositionRect.transformCoordToGlobal(closePositionRect.shape.x + closePositionRect.shape.width / 2, closePositionRect.shape.y);
+        this.api.dispatchAction({
+          type: "showTipText",
+          escapeConnect: true,
+          text: "\u5E73\u4ED3\u53CD\u624B",
+          x,
+          y
+        });
+      }, 300);
       closePositionRect.attr("style", {fill: blendColors(orderBg, this.backgroundColor)});
     };
     orderClosePositionEl.onmouseout = () => {
       closePositionRect.attr("style", {fill: this.backgroundColor});
+      this.clearTimer();
+      this.api.dispatchAction({
+        type: "hideTipText",
+        escapeConnect: true
+      });
     };
     orderClosePositionEl.onclick = () => {
       this.sendMessage("closePosition");
@@ -75110,11 +75206,27 @@ var PlaybackOrderView4 = class extends Component_default2 {
         },
         ignore: false
       });
+      this.clearTimer();
+      this._timer = setTimeout(() => {
+        const [x, y] = orderTpRect.transformCoordToGlobal(orderTpRect.shape.x + orderTpRect.shape.width / 2, orderTpRect.shape.y);
+        this.api.dispatchAction({
+          type: "showTipText",
+          escapeConnect: true,
+          text: "\u62D6\u52A8\u4EE5\u6DFB\u52A0\u6B62\u76C8",
+          x,
+          y
+        });
+      }, 300);
       orderTpRect.attr("style", {fill: blendColors(stopProfitBg, this.backgroundColor)});
     };
     orderTpEl.onmouseout = () => {
       orderTpRect.attr("style", {fill: this.backgroundColor});
       orderTpBgEl.attr("ignore", true);
+      this.clearTimer();
+      this.api.dispatchAction({
+        type: "hideTipText",
+        escapeConnect: true
+      });
     };
     orderTpEl.onmousedown = () => {
       this.dragType = "TP";
@@ -75149,10 +75261,26 @@ var PlaybackOrderView4 = class extends Component_default2 {
         ignore: false
       });
       orderSlRect.attr("style", {fill: blendColors(stopLossBg, this.backgroundColor)});
+      this.clearTimer();
+      this._timer = setTimeout(() => {
+        const [x, y] = orderSlRect.transformCoordToGlobal(orderSlRect.shape.x + orderSlRect.shape.width / 2, orderSlRect.shape.y);
+        this.api.dispatchAction({
+          type: "showTipText",
+          escapeConnect: true,
+          text: "\u62D6\u52A8\u4EE5\u6DFB\u52A0\u6B62\u635F",
+          x,
+          y
+        });
+      }, 300);
     };
     orderSlEl.onmouseout = () => {
       orderSlRect.attr("style", {fill: this.backgroundColor});
       orderSlBgEl.attr("ignore", true);
+      this.clearTimer();
+      this.api.dispatchAction({
+        type: "hideTipText",
+        escapeConnect: true
+      });
     };
     orderSlEl.onmousedown = () => {
       this.dragType = "SL";
@@ -75191,9 +75319,25 @@ var PlaybackOrderView4 = class extends Component_default2 {
         },
         invisible: false
       });
+      this.clearTimer();
+      this._timer = setTimeout(() => {
+        const [x, y] = orderCloseRect.transformCoordToGlobal(orderCloseRect.shape.x + orderCloseRect.shape.width / 2, orderCloseRect.shape.y);
+        this.api.dispatchAction({
+          type: "showTipText",
+          escapeConnect: true,
+          text: "\u5E73\u4ED3",
+          x,
+          y
+        });
+      }, 300);
     };
     orderCloseEl.onmouseout = () => {
       orderCloseRect.attr("invisible", true);
+      this.clearTimer();
+      this.api.dispatchAction({
+        type: "hideTipText",
+        escapeConnect: true
+      });
     };
     orderCloseEl.onclick = () => {
       this.sendMessage("delete");
@@ -75236,7 +75380,7 @@ var PlaybackOrderView4 = class extends Component_default2 {
       return;
     }
     const yAxisModel = coordSys.getAxis("y");
-    const y = Math.floor(yAxisModel.toGlobalCoord(yAxisModel.dataToCoord(order.price)));
+    const y = Math.floor(yAxisModel.toGlobalCoord(yAxisModel.dataToCoord(order.price))) + 0.5;
     let backgroundColor2 = ecModel.get("backgroundColor") || "#fff";
     if (backgroundColor2 && isGradientObject(backgroundColor2) && !backgroundColor2.global && backgroundColor2.type === "linear") {
       backgroundColor2 = {
@@ -75410,7 +75554,7 @@ var PlaybackOrderView4 = class extends Component_default2 {
     });
     orderDescEl.childAt(2).attr({
       style: {
-        text: order.size + "",
+        text: `${order.direction === "long" ? "" : "-"}${order.size}`,
         fill: "#ffffff",
         fontSize: 14
       },
@@ -75616,7 +75760,7 @@ var PlaybackOrderView4 = class extends Component_default2 {
     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 profitY = yAxisModel.toGlobalCoord(yAxisModel.dataToCoord(stopPrice)) + 0.5;
     const rect = this.rect;
     const circleX = this.circleX;
     const circleMargin = this.circleMargin;
@@ -75659,8 +75803,24 @@ var PlaybackOrderView4 = class extends Component_default2 {
           },
           invisible: false
         });
+        this.clearTimer();
+        this._timer = setTimeout(() => {
+          const [x, y] = stopCloseRect.transformCoordToGlobal(stopCloseRect.shape.x + stopCloseRect.shape.width / 2, stopCloseRect.shape.y);
+          this.api.dispatchAction({
+            type: "showTipText",
+            escapeConnect: true,
+            text: "\u53D6\u6D88\u8BA2\u5355",
+            x,
+            y
+          });
+        }, 300);
       };
       stopCloseEl2.onmouseout = () => {
+        this.clearTimer();
+        this.api.dispatchAction({
+          type: "hideTipText",
+          escapeConnect: true
+        });
         stopCloseRect.attr("invisible", true);
       };
       stopCloseEl2.onclick = () => {
@@ -75738,7 +75898,7 @@ var PlaybackOrderView4 = class extends Component_default2 {
     });
     stopDescEl.childAt(2).attr({
       style: {
-        text: order.size + "",
+        text: `${isLong ? "" : "-"}${order.size}`,
         fill: "#ffffff",
         fontSize: 14
       },
@@ -75930,6 +76090,11 @@ var PlaybackOrderView4 = class extends Component_default2 {
       view.avoidOverlap(true, this.ecModel, this.api);
     }
   }
+  clearTimer() {
+    if (this._timer) {
+      clearTimeout(this._timer);
+    }
+  }
   clear() {
     if (!this.orderGroup) {
       return;