@touchvue/plugin 1.0.0-beta.4 → 1.0.0-beta.6

package/index.mjs

@@ -15236,75 +15236,88 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
       }
     }
     function syncThWidth() {
-      if (props.columns.length > 0) {
+      var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+      if (props.columns.length > 0 && bodyHead.value && bodyHead.value.row) {
         const trs = bodyHead.value.row.children;
-        if (Number(props.fixTop) > 0 && topHead.value) {
+        if (Number(props.fixTop) > 0 && topHead.value && topHead.value.row) {
           const topTrs = topHead.value.row.children;
           for (let i = 0; i < topTrs.length; i++) {
-            const ths = trs[i].children;
-            const topThs = topTrs[i].children;
-            for (let j = 0; j < ths.length; j++) {
-              const th = ths[j];
-              const topTh = topThs[j];
-              topTh.style.width = th.getBoundingClientRect().width + "px";
+            const ths = (_a2 = trs[i]) == null ? void 0 : _a2.children;
+            const topThs = (_b = topTrs[i]) == null ? void 0 : _b.children;
+            if (ths && topThs) {
+              for (let j = 0; j < ths.length; j++) {
+                const th = ths[j];
+                const topTh = topThs[j];
+                if (th && topTh) {
+                  topTh.style.width = th.getBoundingClientRect().width + "px";
+                }
+              }
             }
           }
         }
-        if (Number(props.fixLeft) > 0 && leftHead.value) {
+        if (Number(props.fixLeft) > 0 && leftHead.value && leftHead.value.row) {
           const leftTrs = leftHead.value.row.children;
           for (let i = 0; i < leftTrs.length; i++) {
-            const ths = trs[i].children;
-            const leftThs = leftTrs[i].children;
-            if (leftThs.length > 0) {
+            const ths = (_c = trs[i]) == null ? void 0 : _c.children;
+            const leftThs = (_d = leftTrs[i]) == null ? void 0 : _d.children;
+            if (ths && leftThs && leftThs.length > 0) {
               for (let j = 0; j < leftThs.length; j++) {
                 const th = ths[j];
                 const leftTh = leftThs[j];
-                leftTh.style.width = th.getBoundingClientRect().width + "px";
-                leftTh.style.height = th.getBoundingClientRect().height + "px";
+                if (th && leftTh) {
+                  leftTh.style.width = th.getBoundingClientRect().width + "px";
+                  leftTh.style.height = th.getBoundingClientRect().height + "px";
+                }
               }
             }
           }
-          if (Number(props.fixTop) > 0 && leftTopHead.value) {
-            const leftTopTrs = leftTopHead.value.$refs.row.children;
+          if (Number(props.fixTop) > 0 && leftTopHead.value && leftTopHead.value.row) {
+            const leftTopTrs = leftTopHead.value.row.children;
             for (let i = 0; i < leftTopTrs.length; i++) {
-              const ths = trs[i].children;
-              const leftTopThs = leftTopTrs[i].children;
-              if (leftTopThs.length > 0) {
-                for (let i2 = 0; i2 < leftTopThs.length; i2++) {
-                  const th = ths[i2];
-                  const leftTopTh = leftTopThs[i2];
-                  leftTopTh.style.width = th.getBoundingClientRect().width + "px";
-                  leftTopTh.style.height = th.getBoundingClientRect().height + "px";
+              const ths = (_e = trs[i]) == null ? void 0 : _e.children;
+              const leftTopThs = (_f = leftTopTrs[i]) == null ? void 0 : _f.children;
+              if (ths && leftTopThs && leftTopThs.length > 0) {
+                for (let j = 0; j < leftTopThs.length; j++) {
+                  const th = ths[j];
+                  const leftTopTh = leftTopThs[j];
+                  if (th && leftTopTh) {
+                    leftTopTh.style.width = th.getBoundingClientRect().width + "px";
+                    leftTopTh.style.height = th.getBoundingClientRect().height + "px";
+                  }
                 }
               }
             }
           }
         }
-        if (Number(props.fixRight) > 0 && rightHead.value) {
+        if (Number(props.fixRight) > 0 && rightHead.value && rightHead.value.row) {
           const rightTrs = rightHead.value.row.children;
           for (let i = 0; i < rightTrs.length; i++) {
-            const ths = trs[i].children;
-            const rightThs = rightTrs[i].children;
-            if (rightThs.length > 0) {
+            const ths = (_g = trs[i]) == null ? void 0 : _g.children;
+            const rightThs = (_h = rightTrs[i]) == null ? void 0 : _h.children;
+            if (ths && rightThs && rightThs.length > 0) {
               for (let j = ths.length - rightThs.length; j < ths.length; j++) {
                 const th = ths[j];
                 const rightTh = rightThs[j - ths.length + rightThs.length];
-                rightTh.style.width = th.getBoundingClientRect().width + "px";
-                rightTh.style.height = th.getBoundingClientRect().height + "px";
+                if (th && rightTh) {
+                  rightTh.style.width = th.getBoundingClientRect().width + "px";
+                  rightTh.style.height = th.getBoundingClientRect().height + "px";
+                }
               }
             }
           }
-          if (Number(props.fixTop) > 0 && rightTopHead.value) {
+          if (Number(props.fixTop) > 0 && rightTopHead.value && rightTopHead.value.row) {
             const rightTopTrs = rightTopHead.value.row.children;
             for (let i = 0; i < rightTopTrs.length; i++) {
-              const ths = trs[i].children;
-              const rightTopThs = rightTopTrs[i].children;
-              if (rightTopThs.length > 0) {
-                for (let i2 = ths.length - rightTopThs.length; i2 < ths.length; i2++) {
-                  const th = ths[i2];
-                  const rightTopTh = rightTopThs[i2 - ths.length + rightTopThs.length];
-                  rightTopTh.style.width = th.getBoundingClientRect().width + "px";
-                  rightTopTh.style.height = th.getBoundingClientRect().height + "px";
+              const ths = (_i = trs[i]) == null ? void 0 : _i.children;
+              const rightTopThs = (_j = rightTopTrs[i]) == null ? void 0 : _j.children;
+              if (ths && rightTopThs && rightTopThs.length > 0) {
+                for (let j = ths.length - rightTopThs.length; j < ths.length; j++) {
+                  const th = ths[j];
+                  const rightTopTh = rightTopThs[j - ths.length + rightTopThs.length];
+                  if (th && rightTopTh) {
+                    rightTopTh.style.width = th.getBoundingClientRect().width + "px";
+                    rightTopTh.style.height = th.getBoundingClientRect().height + "px";
+                  }
                 }
               }
             }
@@ -19496,7 +19509,7 @@ const _sfc_main$q = defineComponent({
     // 类型：normal 或 loading
     type: {
       type: String,
-      default: "",
+      default: "normal",
       validator: (val) => ["normal", "loading", "circle"].includes(val)
     },
     // 进度条百分比，0~100的数字
@@ -19678,12 +19691,8 @@ const _sfc_main$q = defineComponent({
         const el = document.querySelector(".to-progress");
         if (el) {
           if (props.type === "circle") {
-            const circleBgTick = parseFloat(
-              getComputedStyle(elRef.value).getPropertyValue("--thick")
-            );
-            const circleBarTick = parseFloat(
-              getComputedStyle(elRef.value).getPropertyValue("--bar-thick")
-            );
+            const circleBgTick = parseFloat(getComputedStyle(elRef.value).getPropertyValue("--thick"));
+            const circleBarTick = parseFloat(getComputedStyle(elRef.value).getPropertyValue("--bar-thick"));
             const width = parseFloat(getComputedStyle(elRef.value).getPropertyValue("--width"));
             thick.value = circleBgTick / width * 100;
             barThick.value = circleBarTick / width * 100;
@@ -25341,7 +25350,12 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     endAngle: { type: [String, Number], default: -270 },
     value: { type: [String, Number], default: "" },
     label: { type: [String, Number], default: "" },
-    gap: { type: [String, Number], default: 0 }
+    gap: { type: [String, Number], default: 0 },
+    emphasisScale: { type: Boolean, default: false },
+    emphasisScaleSize: { type: [String, Number], default: 5 },
+    backgroundSizePercentage: { type: [Number, String], default: 100 },
+    // 默认为 100%
+    backgroundPosition: { type: String, default: "center" }
   },
   emits: {
     "item-click": (_) => true
@@ -25417,15 +25431,37 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     });
     const isRing = computed(() => Number(props.barSize) < Number(props.size) / 2);
     const chartRadius = computed(() => {
-      const outerRatio = 1 - Number(props.borderWidth) / Number(props.size);
+      let outerRatio = 1 - Number(props.borderWidth) / Number(props.size);
+      if (props.emphasisScale) {
+        const scaleAdjustment = props.emphasisScaleSize / (Number(props.size) * 4);
+        outerRatio = Math.max(0, outerRatio - scaleAdjustment);
+      }
       const outer = String(Number(outerRatio.toFixed(2)) * 100 + "%");
       if (isRing.value) {
-        const innerRatio = 1 - (2 * Number(props.borderWidth) + 2 * Number(props.barSize)) / Number(props.size);
+        let innerRatio = 1 - (2 * Number(props.borderWidth) + 2 * Number(props.barSize)) / Number(props.size);
+        if (props.emphasisScale) {
+          const scaleAdjustment = props.emphasisScaleSize / (Number(props.size) * 4);
+          innerRatio = Math.max(0, innerRatio + scaleAdjustment);
+        }
         const inner = String(Number(innerRatio.toFixed(2)) * 100 + "%");
         return [inner, outer];
       }
       return ["0%", outer];
     });
+    const backgroundStyle = computed(() => {
+      const percentage = Number(props.backgroundSizePercentage);
+      return {
+        backgroundSize: `${percentage}% ${percentage}%`,
+        backgroundPosition: props.backgroundPosition,
+        backgroundRepeat: "no-repeat",
+        // 使用 transform 来居中背景，当背景不是 100% 时保持居中
+        transform: percentage !== 100 ? "translate(-50%, -50%)" : "none",
+        left: percentage !== 100 ? "50%" : "0",
+        top: percentage !== 100 ? "50%" : "0",
+        width: percentage !== 100 ? `${percentage}%` : "100%",
+        height: percentage !== 100 ? `${percentage}%` : "100%"
+      };
+    });
     const processedColors = computed(() => {
       const color = props.color;
       if (isArray(color)) {
@@ -25536,7 +25572,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               length: 15,
               length2: 15
             },
-            emphasis: { scale: false }
+            emphasis: { scale: props.emphasisScale, scaleSize: props.emphasisScaleSize }
           }
         ]
       };
@@ -25623,13 +25659,20 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             class: "to-echarts-pie-pic-content",
             style: normalizeStyle(setContentStyle.value)
           }, null, 4),
-          unref(slots).title ? (openBlock(), createElementBlock("div", {
+          unref(slots).background ? (openBlock(), createElementBlock("div", {
             key: 0,
+            class: "to-echarts-pie-background",
+            style: normalizeStyle(backgroundStyle.value)
+          }, [
+            renderSlot(_ctx.$slots, "background")
+          ], 4)) : createCommentVNode("", true),
+          unref(slots).title ? (openBlock(), createElementBlock("div", {
+            key: 1,
             class: "to-echarts-pie-pic-text"
           }, [
             renderSlot(_ctx.$slots, "title")
           ])) : __props.label || __props.value ? withDirectives((openBlock(), createElementBlock("div", {
-            key: 1,
+            key: 2,
             class: "to-echarts-pie-pic-text"
           }, [
             __props.value ? (openBlock(), createElementBlock("div", {
@@ -25689,6 +25732,10 @@ const echartsBarProps = {
     type: Boolean,
     default: false
   },
+  d3dShape: {
+    type: String,
+    default: "cube"
+  },
   isHorizontal: {
     type: Boolean,
     default: false
@@ -25761,6 +25808,38 @@ const echartsBarProps = {
   tipFontSize: {
     type: [String, Number],
     default: 1
+  },
+  smooth: {
+    type: [Boolean, Number],
+    default: false
+  },
+  interval: {
+    type: Number,
+    default: 0
+  },
+  tooltipType: {
+    type: String,
+    default: "shadow"
+  },
+  tooltipTextColor: {
+    type: String,
+    default: "#666"
+  },
+  tooltipBgColor: {
+    type: String,
+    default: "#fff"
+  },
+  tooltipBorderColor: {
+    type: String,
+    default: "#333"
+  },
+  showDefaultToolTip: {
+    type: Boolean,
+    default: false
+  },
+  mode: {
+    type: String,
+    default: "default"
   }
 };
 const echartsBarEmits = {
@@ -25824,7 +25903,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         type: "category",
         data: isMultiSeries.value ? props.xAxisData : props.data.map((item) => item.name),
         axisLabel: {
-          interval: 0,
+          interval: props.interval,
           rotate: props.rotate,
           fontSize: Number(props.fontSize) * currentEm.value,
           color: props.isHorizontal ? props.yAxisStyle.textColor : props.xAxisStyle.textColor
@@ -25973,9 +26052,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 barGap: "-100%",
                 z: 1,
                 silent: true,
-                animation: false
+                animation: false,
+                smooth: item.smooth || props.smooth
               });
             }
+            let { lineStyle, areaStyle } = getCssConfig(item, i);
             series.push({
               name: item.name,
               type: item.type ? item.type : props.chartsType,
@@ -25983,19 +26064,16 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               barWidth: Number(props.barSize) * currentEm.value,
               itemStyle: {
                 borderRadius: Number(props.borderRadius) * currentEm.value,
-                color: isArray(props.color) ? new echartsLib.graphic.LinearGradient(...props.isHorizontal ? [0, 0, 1, 0] : [0, 0, 0, 1], [
-                  {
-                    offset: 0,
-                    color: props.color[i].start
-                  },
-                  {
-                    offset: 1,
-                    color: props.color[i].end
-                  }
-                ]) : props.color
+                color: lineStyle[2]
               },
+              lineStyle: {
+                type: lineStyle[1],
+                width: lineStyle[0]
+              },
+              areaStyle: areaStyle ? areaStyle : null,
               label: getSeriesLabelConfig(),
-              z: 2
+              z: 2,
+              smooth: item.smooth || props.smooth
             });
           });
         } else {
@@ -26034,7 +26112,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               barGap: "-100%",
               z: 1,
               silent: true,
-              animation: false
+              animation: false,
+              smooth: props.smooth
             });
           }
           series.push({
@@ -26043,7 +26122,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             barWidth: Number(props.barSize) * currentEm.value,
             itemStyle: getItemStyle(),
             label: getSeriesLabelConfig(),
-            z: 2
+            z: 2,
+            smooth: props.smooth
           });
         }
         return series;
@@ -26051,25 +26131,152 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         return get3dSeriesConfig();
       }
     });
+    const getCssConfig = (item, i) => {
+      let box = document.createElement("div");
+      box.className = `to-echarts-bar-item mode-${item.mode}`;
+      box.style.display = "none";
+      chartContainer.value.appendChild(box);
+      let lineStr = getComputedStyle(box).getPropertyValue("--line").trim();
+      let lineStyle = null;
+      if (lineStr) {
+        let lineArr = lineStr.split(" ", 2);
+        let length = lineStr.split(" ").length;
+        if (length > 3) {
+          const thirdPart = lineStr.substring(lineArr.join(" ").length + 1);
+          const result = [...lineArr, thirdPart];
+          lineStyle = [unitToNumber(result[0]), result[1], parseColorStops(result[2])];
+        } else {
+          const result = lineStr.split(" ");
+          lineStyle = [unitToNumber(result[0]), result[1], result[2]];
+        }
+      } else {
+        lineStyle = [2, "solid", props.color[i]];
+      }
+      let areaStr = getComputedStyle(box).getPropertyValue("--area").trim();
+      let areaStyle = null;
+      if (areaStr) {
+        if (areaStr.includes("linear-gradient")) {
+          areaStyle = {
+            color: parseColorStops(areaStr)
+          };
+        } else {
+          areaStyle = {
+            color: areaStr
+          };
+        }
+      }
+      return {
+        lineStyle,
+        areaStyle
+      };
+    };
+    const parseColorStops = (str) => {
+      const reg = /\((.*?)\)/;
+      const match = str.match(reg);
+      let obj = {};
+      if (match) {
+        let arr = match[1].split(",");
+        let fx = arr[0];
+        let color = arr.splice(1);
+        let colorStops = color.map((item) => {
+          let k = item.trim().split(" ");
+          return {
+            offset: percentToDecimal(k[1]),
+            color: k[0]
+          };
+        });
+        if (fx.includes("right")) {
+          obj = {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 1,
+            y2: 0,
+            colorStops
+          };
+        } else {
+          obj = {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops
+          };
+        }
+      }
+      return obj;
+    };
+    function percentToDecimal(percent, clamp = true) {
+      if (percent === null || percent === void 0 || percent === "") {
+        return 0;
+      }
+      let str = String(percent).trim().replace(/%/g, "");
+      let num = parseFloat(str);
+      if (isNaN(num) || !isFinite(num)) {
+        return 0;
+      }
+      let decimal = num / 100;
+      if (clamp) {
+        decimal = Math.max(0, Math.min(1, decimal));
+      }
+      return decimal;
+    }
+    function unitToNumber(size, clampPositive = true) {
+      if (size === null || size === void 0 || size === "") {
+        return 0;
+      }
+      if (typeof size === "number" && isFinite(size)) {
+        const num2 = clampPositive ? Math.max(0, size) : size;
+        return num2;
+      }
+      const str = String(size).trim();
+      const numMatch = str.match(/^-?\d+(\.\d+)?/);
+      let num = numMatch ? parseFloat(numMatch[0]) : 0;
+      if (isNaN(num) || !isFinite(num)) {
+        return 0;
+      }
+      if (clampPositive) {
+        num = Math.max(0, num);
+      }
+      return num;
+    }
     const tooltipConfig = computed(() => {
       if (!props.showTooltip) {
         return { show: false };
       }
+      if (props.showDefaultToolTip) {
+        return {
+          show: true,
+          trigger: "axis",
+          axisPointer: {
+            type: props.tooltipType
+          },
+          appendTo: typeof document !== "undefined" ? document.body : void 0,
+          className: "to-echarts-tooltip",
+          borderColor: props.tooltipBorderColor,
+          backgroundColor: props.tooltipBgColor,
+          textStyle: {
+            fontSize: Number(props.fontSize) * currentEm.value,
+            color: props.tooltipTextColor
+          }
+        };
+      }
       return {
         show: true,
         trigger: "axis",
         axisPointer: {
-          type: "shadow"
+          type: props.tooltipType
         },
+        borderColor: props.tooltipBorderColor,
         appendTo: typeof document !== "undefined" ? document.body : void 0,
         className: "to-echarts-tooltip",
         confine: false,
-        extraCssText: slots.tip ? "padding: 0; background: transparent; border: none; box-shadow: none; font-size:" + Number(props.tipFontSize) * getEmPx() + "px" : "background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 10px; border-radius: 4px; font-size:" + Number(props.tipFontSize) * getEmPx() + "px",
+        extraCssText: slots.tip ? "padding: 0; background: transparent; border: none; box-shadow: none; font-size:" + Number(props.tipFontSize) * getEmPx() + "px" : `background: ${props.tooltipBgColor}; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 10px; border-radius: 4px; font-size:` + Number(props.tipFontSize) * getEmPx() + "px",
         textStyle: {
           fontSize: Number(props.fontSize) * currentEm.value,
-          color: "#666"
+          color: props.tooltipTextColor
         },
-        backgroundColor: "#fff",
         formatter: (params) => {
           const param = isArray(params) ? params.find((p) => p.value !== void 0) : params;
           if (!param)
@@ -26409,12 +26616,107 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       });
       return series;
     };
+    const getVerticalCylinder3dSeries = () => {
+      if (!echartsLib)
+        return [];
+      const values = props.data.map((item) => item.value);
+      const barWidth = Number(props.barSize) * currentEm.value * 1.25;
+      const rx = barWidth / 2;
+      const ry = Math.max(2, barWidth * 0.28);
+      return [
+        {
+          type: "custom",
+          renderItem: (params, api) => {
+            const value = api.value(1);
+            const coord = api.coord([api.value(0), value]);
+            const x = coord[0];
+            const yTop = coord[1];
+            const yBottom = api.coord([api.value(0), 0])[1];
+            const height = Math.abs(yBottom - yTop);
+            const color = getItemStyle().color;
+            const colorStops = typeof color === "object" && color.colorStops ? color.colorStops : [
+              { offset: 0, color: "#4facfe" },
+              { offset: 1, color: "#00f2fe" }
+            ];
+            const topMainColor = colorStops[0].color;
+            const bottomMainColor = colorStops[colorStops.length - 1].color;
+            const children = [];
+            children.push({
+              type: "rect",
+              shape: { x: x - rx, y: yTop, width: rx * 2, height },
+              style: { fill: new echartsLib.graphic.LinearGradient(0, 0, 0, 1, colorStops), opacity: 0.9 },
+              z: 2
+            });
+            children.push({
+              type: "rect",
+              shape: { x: x - rx * 0.72, y: yTop, width: rx * 0.38, height },
+              style: {
+                fill: new echartsLib.graphic.LinearGradient(0, 0, 1, 0, [
+                  { offset: 0, color: "rgba(140,200,255,0.32)" },
+                  { offset: 1, color: "rgba(140,200,255,0.04)" }
+                ])
+              },
+              z: 3
+            });
+            children.push({
+              type: "ellipse",
+              shape: { cx: x, cy: yTop, rx, ry },
+              style: {
+                fill: new echartsLib.graphic.RadialGradient(0.5, 0.42, 0.82, [
+                  { offset: 0, color: adjustSingleColor(topMainColor, 0.35) },
+                  { offset: 0.32, color: adjustSingleColor(topMainColor, 0.08) },
+                  { offset: 0.72, color: topMainColor },
+                  { offset: 1, color: adjustSingleColor(bottomMainColor, -0.22) }
+                ]),
+                lineWidth: 1,
+                stroke: "rgba(170,200,255,0.55)"
+              },
+              z: 5
+            });
+            children.push({
+              type: "ellipse",
+              shape: { cx: x, cy: yBottom - ry * 0.15, rx: rx * 1.02, ry: ry * 1.05 },
+              style: {
+                fill: adjustSingleColor(bottomMainColor, 0.05),
+                opacity: 0.9,
+                lineWidth: 1,
+                stroke: adjustSingleColor(bottomMainColor, 0.15)
+              },
+              z: 6
+            });
+            if (props.showValue) {
+              children.push({
+                type: "text",
+                style: {
+                  text: String(value),
+                  textAlign: "center",
+                  textVerticalAlign: "bottom",
+                  fontSize: Number(props.fontSize) * currentEm.value,
+                  fill: "#fff",
+                  fontWeight: "bold",
+                  x,
+                  y: yTop - ry - 8,
+                  textShadowBlur: 4,
+                  textShadowColor: "rgba(0,0,0,0.5)"
+                },
+                z: 6
+              });
+            }
+            return { type: "group", children };
+          },
+          data: values.map((val, index) => [index, val]),
+          z: 1
+        }
+      ];
+    };
     const get3dSeriesConfig = () => {
       if (props.isHorizontal) {
         return getHorizontal3dSeries();
-      } else {
-        return getVertical3dSeries();
       }
+      if (props.d3dShape === "cylinder") {
+        return getVerticalCylinder3dSeries();
+      }
+      return getVertical3dSeries();
     };
     const initChart = (retry = 0) => {
       window.setTimeout(async () => {
@@ -26533,18 +26835,25 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         resizeObserver = null;
       }
     });
+    const setClass = computed(() => {
+      let arr = [];
+      if (props.mode) {
+        arr.push(`mode-${props.mode}`);
+      }
+      return arr;
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         ref_key: "chartContainer",
         ref: chartContainer,
-        class: "to-echarts-bar",
+        class: normalizeClass(["to-echarts-bar", setClass.value]),
         style: normalizeStyle(setBarStyle.value)
-      }, null, 4);
+      }, null, 6);
     };
   }
 });
-const echartsBar_vue_vue_type_style_index_0_scoped_18b48726_lang = "";
-const EchartsBar = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-18b48726"]]);
+const echartsBar_vue_vue_type_style_index_0_scoped_c70ba125_lang = "";
+const EchartsBar = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-c70ba125"]]);
 const ToEchartsBar = withInstall(EchartsBar);
 const DEFAULT_VIEW_CONTROL = {
   zoomSensitivity: 0,
@@ -26553,6 +26862,26 @@ const DEFAULT_VIEW_CONTROL = {
   distance: 100
 };
 const echartsMapProps = {
+  nameMap: {
+    type: Object,
+    default: () => ({})
+  },
+  rotate: {
+    type: [String, Number],
+    default: 0
+  },
+  scaleX: {
+    type: [String, Number],
+    default: 1
+  },
+  scaleY: {
+    type: [String, Number],
+    default: 1
+  },
+  aspectRatio: {
+    type: [String, Number],
+    default: ""
+  },
   shadow: {
     type: String,
     default: ""
@@ -28899,6 +29228,7 @@ const cityData = [
     city: "90"
   }
 ];
+const OUTLINE_BASE_URL = "https://geo.datav.aliyun.com/areas_v3/bound/";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "ToEchartsMap"
@@ -29001,6 +29331,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (props.width) {
         style.width = formatSize(props.width);
       }
+      let finalScaleX = Number(props.scaleX) || 1;
+      let finalScaleY = Number(props.scaleY) || 1;
+      if (props.aspectRatio) {
+        const targetRatio = Number(props.aspectRatio);
+        if (targetRatio > 0) {
+          const currentRatio = finalScaleX / finalScaleY;
+          if (currentRatio < targetRatio) {
+            finalScaleX = finalScaleY * targetRatio;
+          } else {
+            finalScaleY = finalScaleX / targetRatio;
+          }
+        }
+      }
+      const rotate = Number(props.rotate) || 0;
+      style.transform = `rotate(${rotate}deg) scaleX(${finalScaleX}) scaleY(${finalScaleY})`;
+      style.transformOrigin = "center center";
       return style;
     });
     const loadEcharts = async () => {
@@ -29154,7 +29500,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           value: item.properties,
           name: item.properties.name
         }))) != null ? _b : [];
-        await setMapOptions(geoName, mapData);
+        await setMapOptions(geoName, code, mapData);
       } catch (error) {
         console.error("[ToEchartsMap] 获取地图数据失败", error);
       }
@@ -29183,12 +29529,54 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const max2 = values.length ? Math.max(...values) : 0;
       return { min, max: max2 };
     };
-    const setMapOptions = async (geoName, mapData) => {
+    const outlineCache = /* @__PURE__ */ new Map();
+    const loadOutlineGeoJson = async (code) => {
+      if (!props.showOutline)
+        return null;
+      if (typeof fetch === "undefined")
+        return null;
+      if (!code)
+        return null;
+      if (outlineCache.has(code))
+        return outlineCache.get(code);
+      try {
+        const res = await fetch(`${OUTLINE_BASE_URL}${code}.json`);
+        if (!res.ok)
+          throw new Error(`Request failed: ${res.status}`);
+        const json = await res.json();
+        outlineCache.set(code, json);
+        return json;
+      } catch (e) {
+        console.warn("[ToEchartsMap] 获取外轮廓数据失败", code, e);
+        outlineCache.set(code, null);
+        return null;
+      }
+    };
+    const setMapOptions = async (geoName, code, mapData) => {
       if (!chart.value)
         return;
       await ensureEchartsGl();
+      let outlineMapName = null;
+      if (props.showOutline && echartsLib) {
+        const outlineJson = await loadOutlineGeoJson(code);
+        if (outlineJson) {
+          outlineMapName = `${geoName}__outline`;
+          try {
+            echartsLib.registerMap(outlineMapName, outlineJson);
+          } catch (e) {
+            console.warn("[ToEchartsMap] 外轮廓 registerMap 失败", e);
+          }
+        }
+      }
       isMapData.value = mapData.length > 0;
-      const option = getOption(geoName, mapData);
+      const option = getOption(geoName, code, mapData);
+      if (props.showOutline && !outlineMapName && Array.isArray(option.geo)) {
+        for (const g of option.geo) {
+          if (g && typeof g.map === "string" && g.map === `${geoName}__outline`) {
+            g.map = geoName;
+          }
+        }
+      }
       chart.value.setOption(option, true);
       if (props.autoplay && props.data.length) {
         mapActive(props.data);
@@ -29222,7 +29610,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             show: true,
             color: props.fontColor,
             fontSize: Number(props.fontSize) * currentEm.value,
-            formatter: (e) => ` ${e.name} `
+            formatter: (e) => {
+              var _a3, _b;
+              return ` ${(_b = (_a3 = props.nameMap) == null ? void 0 : _a3[e.name]) != null ? _b : e.name} `;
+            }
           },
           itemStyle: {
             color: props.color || "#65bbff",
@@ -29261,7 +29652,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           show: true,
           color: props.fontColor,
           fontSize: Number(props.fontSize) * currentEm.value,
-          formatter: (e) => ` ${e.name} `
+          formatter: (e) => {
+            var _a3, _b;
+            return ` ${(_b = (_a3 = props.nameMap) == null ? void 0 : _a3[e.name]) != null ? _b : e.name} `;
+          }
         },
         itemStyle: {
           shadowBlur: itemShadowParts[0] ? Number(itemShadowParts[0]) * currentEm.value : 0,
@@ -29296,35 +29690,76 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       };
     };
-    const getOption = (geoName, mapData) => {
+    const getOption = (geoName, code, mapData) => {
+      var _a2;
       const baseSeries = getBaseSeries(geoName, mapData);
       const shadowParts = parseShadow(props.shadow);
       const { min, max: max2 } = getMinMax(mapData);
-      return {
-        tooltip: {
-          trigger: "item",
-          formatter: (params) => {
-            if (!params.value)
-              return "";
-            return renderTooltip(params);
-          }
-        },
-        geo: {
+      const geoLayers = [];
+      if (props.shadow) {
+        const shadowOffset = shadowParts[0] ? Number(shadowParts[0]) * currentEm.value : currentEm.value;
+        const shadowColor = (_a2 = shadowParts[1]) != null ? _a2 : "rgba(0,0,0,0.3)";
+        const shadow2Color = shadowParts[2];
+        if (shadow2Color) {
+          geoLayers.push({
+            z: 1,
+            show: true,
+            map: geoName,
+            roam: false,
+            top: shadowOffset * 2,
+            bottom: -shadowOffset,
+            silent: true,
+            itemStyle: {
+              areaColor: shadow2Color,
+              borderColor: "transparent"
+            }
+          });
+        }
+        geoLayers.push({
+          z: 2,
           show: true,
           map: geoName,
           roam: false,
+          top: shadowOffset,
+          bottom: 0,
+          silent: true,
+          itemStyle: {
+            areaColor: shadowColor,
+            borderColor: "transparent"
+          }
+        });
+      }
+      if (props.showOutline) {
+        const shadowOffset = shadowParts[0] ? Number(shadowParts[0]) * currentEm.value : currentEm.value;
+        const outlineMapName = `${geoName}__outline`;
+        geoLayers.push({
+          z: 4,
+          // 高于 map series (z:3)
+          map: outlineMapName,
+          roam: false,
           top: 0,
-          bottom: props.shadow ? shadowParts[0] ? Number(shadowParts[0]) * currentEm.value : currentEm.value : 0,
+          bottom: props.shadow ? shadowOffset : 0,
+          silent: true,
           itemStyle: {
             areaColor: "transparent",
-            borderColor: props.showOutline ? props.outlineColor : "transparent",
-            borderWidth: props.showOutline ? Number(props.outlineWidth) : 0,
-            // 避免粗描边在尖锐拐角处产生 miter 尖刺
+            borderColor: props.outlineColor,
+            borderWidth: Number(props.outlineWidth),
             borderJoin: "round",
             borderMiterLimit: 2
-          },
-          silent: true
+          }
+        });
+      }
+      baseSeries.z = 3;
+      return {
+        tooltip: {
+          trigger: "item",
+          formatter: (params) => {
+            if (!params.value)
+              return "";
+            return renderTooltip(params);
+          }
         },
+        geo: geoLayers,
         visualMap: showVisualMap() ? {
           seriesIndex: [0],
           min,