tvcharts 0.7.59 → 0.7.60

package/dist/echarts.js

@@ -24691,6 +24691,7 @@ var ECharts = class extends Eventful_default {
       "selectitem",
       "loadmore",
       "zoomend",
+      "extraclick",
       "visiblechanged",
       "dataappend",
       "alarmchanged",
@@ -63837,11 +63838,11 @@ function doCreateOrUpdateEl(api2, existsEl, dataIndex, elOption, seriesModel, gr
   return el;
 }
 function doesElNeedRecreate(el, elOption, seriesModel) {
-  const elInner = customInnerStore(el);
+  const elInner2 = customInnerStore(el);
   const elOptionType = elOption.type;
   const elOptionShape = elOption.shape;
   const elOptionStyle = elOption.style;
-  return seriesModel.isUniversalTransitionEnabled() || elOptionType != null && elOptionType !== elInner.customGraphicType || elOptionType === "path" && hasOwnPathData(elOptionShape) && getPathData(elOptionShape) !== elInner.customPathData || elOptionType === "image" && hasOwn(elOptionStyle, "image") && elOptionStyle.image !== elInner.customImagePath;
+  return seriesModel.isUniversalTransitionEnabled() || elOptionType != null && elOptionType !== elInner2.customGraphicType || elOptionType === "path" && hasOwnPathData(elOptionShape) && getPathData(elOptionShape) !== elInner2.customPathData || elOptionType === "image" && hasOwn(elOptionStyle, "image") && elOptionStyle.image !== elInner2.customImagePath;
 }
 function doCreateOrUpdateClipPath(el, dataIndex, elOption, seriesModel, isInit) {
   const clipPathOpt = elOption.clipPath;
@@ -64181,6 +64182,7 @@ GraphicComponentModel.defaultOption = {
 
 // src/component/axisPointer/BaseAxisPointer.ts
 var inner11 = makeInner();
+var elInner = makeInner();
 var clone4 = clone;
 var bind2 = bind;
 var BaseAxisPointer = class {
@@ -64201,13 +64203,16 @@ var BaseAxisPointer = class {
     this._lastStatus = status;
     let group = this._group;
     const handle = this._handle;
+    const extraGroup = this._extraGroup;
     if (!status || status === "hide") {
       group && group.hide();
       handle && handle.hide();
+      extraGroup && extraGroup.hide();
       return;
     }
     group && group.show();
     handle && handle.show();
+    extraGroup && extraGroup.show();
     const elOption = {};
     this.makeElOption(elOption, value, axisModel, axisPointerModel, api2);
     const graphicKey = elOption.graphicKey;
@@ -64227,6 +64232,7 @@ var BaseAxisPointer = class {
     }
     updateMandatoryProps(group, axisPointerModel, true);
     this._renderHandle(value);
+    this._renderExtraGroup(elOption);
   }
   remove(api2) {
     this.clear(api2);
@@ -64262,14 +64268,12 @@ var BaseAxisPointer = class {
     const pointerOption = elOption.pointer;
     if (pointerOption) {
       const pointerEl = inner11(group).pointerEl = new graphic_exports[pointerOption.type](clone4(elOption.pointer));
-      pointerEl.zlevel = 2;
       group.add(pointerEl);
     }
   }
   createLabelEl(group, elOption, axisModel, axisPointerModel) {
     if (elOption.label) {
       const labelEl = inner11(group).labelEl = new Text_default(clone4(elOption.label));
-      labelEl.zlevel = 2;
       group.add(labelEl);
       updateLabelShowHide(labelEl, axisPointerModel);
     }
@@ -64292,6 +64296,98 @@ var BaseAxisPointer = class {
       updateLabelShowHide(labelEl, axisPointerModel);
     }
   }
+  _renderExtraGroup(elOption) {
+    const axisPointerModel = this._axisPointerModel;
+    const extraGroupModel = axisPointerModel.getModel("extraIcon");
+    const status = axisPointerModel.get("status");
+    let extraGroup = this._extraGroup;
+    const api2 = this._api;
+    const zr = api2.getZr();
+    if (!extraGroupModel.get("show") || !status || status === "hide") {
+      extraGroup && zr.remove(extraGroup);
+      this._extraGroup = null;
+      return;
+    }
+    let size = extraGroupModel.get("size");
+    const padding = extraGroupModel.get("padding");
+    if (!isArray(size)) {
+      size = [size, size];
+    }
+    const position2 = this._axisModel.axis.position;
+    if (!this._extraGroup) {
+      const zlevel = axisPointerModel.get("zlevel") || 2;
+      const color2 = extraGroupModel.get("color");
+      const z = axisPointerModel.get("z");
+      const backgroundColor2 = extraGroupModel.get("backgroundColor");
+      const hoverBackgroundColor = extraGroupModel.get("hoverBackgroundColor");
+      const extraIcon = createIcon(extraGroupModel.get("icon"), {
+        x: size[0] / 2,
+        y: size[1] / 2,
+        scaleX: size[0] / 2,
+        scaleY: size[1] / 2,
+        z2: 11,
+        silent: true,
+        zlevel,
+        z
+      });
+      extraIcon.style.fill = color2;
+      const extraRect = new Rect_default({
+        shape: {
+          y: -padding / 2,
+          x: -padding / 2,
+          width: size[0] + padding,
+          height: size[1] + padding
+        },
+        style: {
+          fill: backgroundColor2
+        },
+        z2: 10,
+        zlevel,
+        z
+      });
+      elInner(extraRect).type = "rect";
+      extraGroup = this._extraGroup = new Group_default({
+        onmousedown(e2) {
+          api2.trigger("extraclick", {
+            event: e2,
+            value: axisPointerModel.get("value"),
+            position: position2
+          });
+        },
+        onmouseover() {
+          extraRect.style.fill = hoverBackgroundColor;
+        },
+        onmouseout() {
+          extraIcon.style.fill = color2;
+          extraRect.style.fill = backgroundColor2;
+        }
+      });
+      extraGroup.add(extraRect);
+      extraGroup.add(extraIcon);
+      zr.add(extraGroup);
+    }
+    const pointer = elOption.pointer;
+    const isLeft = position2 === "left";
+    const distance2 = extraGroupModel.get("distance");
+    extraGroup.x = isLeft ? pointer.shape.x1 + distance2 : pointer.shape.x2 - (size[0] + distance2);
+    extraGroup.y = pointer.shape.y1 - size[1] / 2;
+    extraGroup.eachChild((el) => {
+      if (elInner(el).type === "rect") {
+        el.attr("shape", {
+          y: -padding / 2,
+          x: -padding / 2,
+          width: size[0] + padding,
+          height: size[1] + padding
+        });
+      } else {
+        el.x = size[0] / 2;
+        el.y = size[1] / 2;
+        el.scaleX = size[0] / 2;
+        el.scaleY = size[1] / 2;
+      }
+      ;
+    });
+  }
   _renderHandle(value) {
     if (this._dragging || !this.updateHandleTransform) {
       return;
@@ -64393,11 +64489,14 @@ var BaseAxisPointer = class {
     const zr = api2.getZr();
     const group = this._group;
     const handle = this._handle;
+    const extraGroup = this._extraGroup;
     if (zr && group) {
       this._lastGraphicKey = null;
       group && zr.remove(group);
       handle && zr.remove(handle);
+      extraGroup && zr.remove(extraGroup);
       this._group = null;
+      this._extraGroup = null;
       this._handle = null;
       this._payloadInfo = null;
     }
@@ -64444,7 +64543,7 @@ function getHandleTransProps(trans) {
 }
 function updateMandatoryProps(group, axisPointerModel, silent) {
   const z = axisPointerModel.get("z");
-  const zlevel = axisPointerModel.get("zlevel");
+  const zlevel = axisPointerModel.get("zlevel") || 2;
   group && group.traverse(function(el) {
     if (el.type !== "group") {
       z != null && (el.z = z);
@@ -64727,6 +64826,16 @@ AxisPointerModel.defaultOption = {
     shadowOffsetX: 0,
     shadowOffsetY: 2,
     throttle: 40
+  },
+  extraIcon: {
+    show: false,
+    icon: "M537.6 102.4c-225.28 0-409.6 184.32-409.6 409.6s184.32 409.6 409.6 409.6 409.6-184.32 409.6-409.6-184.32-409.6-409.6-409.6z m0 768c-199.68 0-358.4-158.72-358.4-358.4s158.72-358.4 358.4-358.4 358.4 158.72 358.4 358.4-158.72 358.4-358.4 358.4z M563.2 307.2h-51.2v179.2H332.8v51.2H512V716.8h51.2v-179.2h179.2v-51.2H563.2z",
+    size: 14,
+    color: "#fff",
+    backgroundColor: "#B9BEC9",
+    hoverBackgroundColor: "rgb(99,99,99)",
+    distance: 2,
+    padding: 4
   }
 };
 var AxisPointerModel_default = AxisPointerModel;
@@ -67626,9 +67735,9 @@ var GraphicComponentView2 = class extends Component_default2 {
           applyUpdateTransition(clipPath, clipPathOption, graphicModel, {isInit});
           applyKeyframeAnimation(clipPath, clipPathOption.keyframeAnimation, graphicModel);
         }
-        const elInner = inner15(el);
+        const elInner2 = inner15(el);
         el.setTextConfig(textConfig);
-        elInner.option = elOption;
+        elInner2.option = elOption;
         setEventData(el, graphicModel, elOption);
         setTooltipConfig({
           el,
@@ -67656,10 +67765,10 @@ var GraphicComponentView2 = class extends Component_default2 {
       }
       const parentEl = el.parent;
       const isParentRoot = parentEl === rootGroup;
-      const elInner = inner15(el);
+      const elInner2 = inner15(el);
       const parentElInner = inner15(parentEl);
-      elInner.width = parsePercent2(elInner.option.width, isParentRoot ? apiWidth : parentElInner.width) || 0;
-      elInner.height = parsePercent2(elInner.option.height, isParentRoot ? apiHeight : parentElInner.height) || 0;
+      elInner2.width = parsePercent2(elInner2.option.width, isParentRoot ? apiWidth : parentElInner.width) || 0;
+      elInner2.height = parsePercent2(elInner2.option.height, isParentRoot ? apiHeight : parentElInner.height) || 0;
     }
     for (let i = elOptions.length - 1; i >= 0; i--) {
       const elOption = elOptions[i];
@@ -75204,6 +75313,9 @@ var MarkLabelModal2 = class extends Component_default {
     this._mergeOption(newOpt, ecModel);
   }
   _mergeOption(newOpt, ecModel) {
+    if (newOpt.isAvoidOverlap !== void 0) {
+      this.option.isAvoidOverlap = newOpt.isAvoidOverlap;
+    }
     ecModel.eachSeries(function(seriesModel) {
       const seriesName = seriesModel.name;
       const markerOpt = seriesModel.get(this.mainType, true);
@@ -75238,7 +75350,8 @@ MarkLabelModal.defaultOption = {
   },
   textStyle: {
     padding: [4, 6, 2, 8]
-  }
+  },
+  isAvoidOverlap: true
 };
 var MarkLabelModal_default = MarkLabelModal;
 
@@ -75347,6 +75460,7 @@ var MarkLabelView2 = class extends Component_default2 {
     this.group.add(this._graphLabelGroup);
   }
   render(markerModel, ecModel, api2, payload) {
+    const isAvoidOverlap = markerModel.get("isAvoidOverlap");
     const type = payload?.type;
     if (type !== "updateComOption") {
       this.updateMarkLabels(markerModel, ecModel);
@@ -75356,7 +75470,9 @@ var MarkLabelView2 = class extends Component_default2 {
     if (isUpdateGraphic) {
       this.graphicLabelsResize(ecModel);
     }
-    this.avoidOverlap();
+    if (isAvoidOverlap) {
+      this.avoidOverlap();
+    }
   }
   updateMarkLabels(markerModel, ecModel) {
     const markerGroupMapBySeries = this.markerGroupMapBySeries;