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

package/index.mjs

@@ -25689,6 +25689,10 @@ const echartsBarProps = {
     type: Boolean,
     default: false
   },
+  d3dShape: {
+    type: String,
+    default: "cube"
+  },
   isHorizontal: {
     type: Boolean,
     default: false
@@ -25761,6 +25765,14 @@ const echartsBarProps = {
   tipFontSize: {
     type: [String, Number],
     default: 1
+  },
+  smooth: {
+    type: [Boolean, Number],
+    default: false
+  },
+  interval: {
+    type: Number,
+    default: 0
   }
 };
 const echartsBarEmits = {
@@ -25824,7 +25836,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,7 +25985,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 barGap: "-100%",
                 z: 1,
                 silent: true,
-                animation: false
+                animation: false,
+                smooth: item.smooth || props.smooth
               });
             }
             series.push({
@@ -25983,19 +25996,12 @@ 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: getItemColor(item, i)
               },
+              areaStyle: item.areaStyle ? item.areaStyle : null,
               label: getSeriesLabelConfig(),
-              z: 2
+              z: 2,
+              smooth: item.smooth || props.smooth
             });
           });
         } else {
@@ -26034,7 +26040,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               barGap: "-100%",
               z: 1,
               silent: true,
-              animation: false
+              animation: false,
+              smooth: props.smooth
             });
           }
           series.push({
@@ -26043,7 +26050,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,6 +26059,18 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         return get3dSeriesConfig();
       }
     });
+    const getItemColor = (item, i) => {
+      let color = null;
+      if (isArray(props.color)) {
+        color = props.color[i];
+      } else {
+        color = props.color;
+      }
+      if (item.linearGradient) {
+        color = item.linearGradient;
+      }
+      return color;
+    };
     const tooltipConfig = computed(() => {
       if (!props.showTooltip) {
         return { show: false };
@@ -26409,12 +26429,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 () => {
@@ -26543,8 +26658,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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_4f4fca0e_lang = "";
+const EchartsBar = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-4f4fca0e"]]);
 const ToEchartsBar = withInstall(EchartsBar);
 const DEFAULT_VIEW_CONTROL = {
   zoomSensitivity: 0,
@@ -26553,6 +26668,10 @@ const DEFAULT_VIEW_CONTROL = {
   distance: 100
 };
 const echartsMapProps = {
+  nameMap: {
+    type: Object,
+    default: () => ({})
+  },
   shadow: {
     type: String,
     default: ""
@@ -29222,7 +29341,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 +29383,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,
@@ -29297,6 +29422,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       };
     };
     const getOption = (geoName, mapData) => {
+      var _a2;
       const baseSeries = getBaseSeries(geoName, mapData);
       const shadowParts = parseShadow(props.shadow);
       const { min, max: max2 } = getMinMax(mapData);
@@ -29310,20 +29436,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }
         },
         geo: {
-          show: true,
+          // 轮廓线与底部阴影共用 geo：
+          // - shadow：用 geo 的 areaColor 作为底部投影层
+          // - showOutline：用 geo 的 borderColor/borderWidth 画最外围轮廓线
+          show: Boolean(props.shadow) || props.showOutline,
           map: geoName,
           roam: false,
-          top: 0,
-          bottom: props.shadow ? shadowParts[0] ? Number(shadowParts[0]) * currentEm.value : currentEm.value : 0,
+          top: props.shadow ? shadowParts[0] ? Number(shadowParts[0]) * currentEm.value : currentEm.value : 0,
+          bottom: 0,
+          silent: true,
+          label: { show: false },
           itemStyle: {
-            areaColor: "transparent",
+            areaColor: props.shadow ? (_a2 = shadowParts[1]) != null ? _a2 : "rgba(0,0,0,0.3)" : "transparent",
             borderColor: props.showOutline ? props.outlineColor : "transparent",
             borderWidth: props.showOutline ? Number(props.outlineWidth) : 0,
             // 避免粗描边在尖锐拐角处产生 miter 尖刺
             borderJoin: "round",
             borderMiterLimit: 2
-          },
-          silent: true
+          }
         },
         visualMap: showVisualMap() ? {
           seriesIndex: [0],

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@touchvue/plugin",
-	"version": "1.0.0-beta.4",
+	"version": "1.0.0-beta.5",
 	"description": "Vue3 Plugin Library",
 	"private": false,
 	"type": "module",

package/style/style.css

@@ -1 +1 @@
-.mce-container,.mce-container *,.mce-widget,.mce-widget *,.mce-reset{white-space:pre-wrap!important}.to-watermark[data-v-52e4c07e]{position:absolute;inset:0;pointer-events:none}.to-watermark-grid[data-v-52e4c07e]{display:grid;grid-template-columns:repeat(var(--v66af80a3),1fr);grid-template-rows:repeat(var(--v66afb8fd),1fr);width:100%;height:100%;gap:var(--v86b305f8)}.to-watermark-item[data-v-52e4c07e]{display:flex;align-items:center;justify-content:center}.to-watermark-content[data-v-52e4c07e]{pointer-events:none!important;transform-origin:center}.to-step-tree{white-space:nowrap}.to-step-tree-item{display:inline-block;position:relative}.to-step-tree-item:last-child>.to-step-tree-item-arrow{display:none}.to-step-item-line{position:absolute;width:0;top:100%;left:4em;height:4em;border-left:1px dashed #ccc}.to-step-tree-item-children{position:absolute;left:0}.to-step-tree-item-node{padding:.5em;box-sizing:border-box;text-align:center;white-space:normal;display:inline-block;vertical-align:top;width:8em}.to-step-tree-item-arrow{display:inline-block;margin-left:-.5em;margin-right:-.5em;position:relative;vertical-align:top;margin-top:1.5em}.to-step-tree-item-arrow:before{content:"";width:5em;height:1px;display:block;background:#ccc}.to-step-tree-item-arrow:after{position:absolute;right:-.3em;width:0;transform:translateY(-55%);height:0;border:.3em solid #ccc;content:"";border-top-color:#0000;border-bottom-color:#0000;border-right-color:#0000}.to-step-tree-item-arrow .to-step-tree-item-arrow-content{position:absolute;width:100%;left:0;text-align:center;top:0;transform:translateY(-50%)}.to-step-tree-item-arrow .to-step-tree-item-arrow-content-top{position:absolute;width:100%;left:0;text-align:center;bottom:.5em}.to-step-tree-item-arrow .to-step-tree-item-arrow-content-bottom{position:absolute;width:100%;left:0;text-align:center;top:.5em}.to-step-tree-item-icon{text-align:center;font-size:116.67%;padding:.5em;margin:0 auto;width:2em;height:2em;background:#d9d9d9;color:#fff;line-height:1em;font-weight:700;border-radius:50%}.to-step-tree-item-label{margin-top:.5em}.to-step-tree-item-state-current>.to-step-tree-item-node .to-step-tree-item-icon{background:#0085d0}.to-step-tree-item-state-finished>.to-step-tree-item-node .to-step-tree-item-icon{background:#cce099}.to-echarts-pie{position:relative;margin:0 auto;display:inline-flex;align-items:center;overflow:hidden}.to-echarts-pie-legend{flex:1}.to-echarts-pie-pic{position:relative;align-self:center;display:inline-block;overflow:hidden}.to-echarts-pie-pic-content{position:relative}.to-echarts-pie-pic-text{pointer-events:none;position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:100%}.to-echarts-pie-pic-value{font-size:2.4em}.to-echarts-pie-pic-label{font-size:1.5em}.to-echarts-pie.has-legend{display:flex;gap:1em;margin:0 auto}.to-echarts-pie.layout-v{flex-direction:column;align-items:inherit;text-align:center}.to-echarts-pie.side-top .to-echarts-pie-pic-text{bottom:0;transform:translate(-50%)}.to-echarts-pie.side-bottom .to-echarts-pie-pic-content{margin-top:-50%}.to-echarts-pie.side-bottom .to-echarts-pie-pic-text{top:0;transform:translate(-50%)}.to-echarts-bar[data-v-18b48726]{position:relative}.to-echarts-tooltip,.echarts-tooltip{z-index:3000000!important;pointer-events:none}.to-echarts-map.tip-custom>div:nth-child(2){padding:0!important;border:0 none!important;box-shadow:none!important;background:none!important;font-size:100%!important}.to-echarts-map.tip-custom>div:nth-child(2)>div:nth-child(2){display:none}
+.mce-container,.mce-container *,.mce-widget,.mce-widget *,.mce-reset{white-space:pre-wrap!important}.to-watermark[data-v-52e4c07e]{position:absolute;inset:0;pointer-events:none}.to-watermark-grid[data-v-52e4c07e]{display:grid;grid-template-columns:repeat(var(--v66af80a3),1fr);grid-template-rows:repeat(var(--v66afb8fd),1fr);width:100%;height:100%;gap:var(--v86b305f8)}.to-watermark-item[data-v-52e4c07e]{display:flex;align-items:center;justify-content:center}.to-watermark-content[data-v-52e4c07e]{pointer-events:none!important;transform-origin:center}.to-step-tree{white-space:nowrap}.to-step-tree-item{display:inline-block;position:relative}.to-step-tree-item:last-child>.to-step-tree-item-arrow{display:none}.to-step-item-line{position:absolute;width:0;top:100%;left:4em;height:4em;border-left:1px dashed #ccc}.to-step-tree-item-children{position:absolute;left:0}.to-step-tree-item-node{padding:.5em;box-sizing:border-box;text-align:center;white-space:normal;display:inline-block;vertical-align:top;width:8em}.to-step-tree-item-arrow{display:inline-block;margin-left:-.5em;margin-right:-.5em;position:relative;vertical-align:top;margin-top:1.5em}.to-step-tree-item-arrow:before{content:"";width:5em;height:1px;display:block;background:#ccc}.to-step-tree-item-arrow:after{position:absolute;right:-.3em;width:0;transform:translateY(-55%);height:0;border:.3em solid #ccc;content:"";border-top-color:#0000;border-bottom-color:#0000;border-right-color:#0000}.to-step-tree-item-arrow .to-step-tree-item-arrow-content{position:absolute;width:100%;left:0;text-align:center;top:0;transform:translateY(-50%)}.to-step-tree-item-arrow .to-step-tree-item-arrow-content-top{position:absolute;width:100%;left:0;text-align:center;bottom:.5em}.to-step-tree-item-arrow .to-step-tree-item-arrow-content-bottom{position:absolute;width:100%;left:0;text-align:center;top:.5em}.to-step-tree-item-icon{text-align:center;font-size:116.67%;padding:.5em;margin:0 auto;width:2em;height:2em;background:#d9d9d9;color:#fff;line-height:1em;font-weight:700;border-radius:50%}.to-step-tree-item-label{margin-top:.5em}.to-step-tree-item-state-current>.to-step-tree-item-node .to-step-tree-item-icon{background:#0085d0}.to-step-tree-item-state-finished>.to-step-tree-item-node .to-step-tree-item-icon{background:#cce099}.to-echarts-pie{position:relative;margin:0 auto;display:inline-flex;align-items:center;overflow:hidden}.to-echarts-pie-legend{flex:1}.to-echarts-pie-pic{position:relative;align-self:center;display:inline-block;overflow:hidden}.to-echarts-pie-pic-content{position:relative}.to-echarts-pie-pic-text{pointer-events:none;position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:100%}.to-echarts-pie-pic-value{font-size:2.4em}.to-echarts-pie-pic-label{font-size:1.5em}.to-echarts-pie.has-legend{display:flex;gap:1em;margin:0 auto}.to-echarts-pie.layout-v{flex-direction:column;align-items:inherit;text-align:center}.to-echarts-pie.side-top .to-echarts-pie-pic-text{bottom:0;transform:translate(-50%)}.to-echarts-pie.side-bottom .to-echarts-pie-pic-content{margin-top:-50%}.to-echarts-pie.side-bottom .to-echarts-pie-pic-text{top:0;transform:translate(-50%)}.to-echarts-bar[data-v-4f4fca0e]{position:relative}.to-echarts-tooltip,.echarts-tooltip{z-index:3000000!important;pointer-events:none}.to-echarts-map.tip-custom>div:nth-child(2){padding:0!important;border:0 none!important;box-shadow:none!important;background:none!important;font-size:100%!important}.to-echarts-map.tip-custom>div:nth-child(2)>div:nth-child(2){display:none}