smart-web-ui 1.0.0 → 1.0.1

package/dist/GradientCircularPieChart.js

@@ -0,0 +1,372 @@
+import { ref as S, computed as y, watch as C, onMounted as x, onBeforeUnmount as B, openBlock as d, createElementBlock as u, mergeProps as E, nextTick as A, createVNode as _, normalizeStyle as N, createElementVNode as s, Fragment as P, renderList as z, toDisplayString as b } from "vue";
+import { i as G } from "./chunks/index-CBkwld9S.js";
+import { _ as v } from "./chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+import { m as L } from "./chunks/merge-H4ZkNr1T.js";
+const O = {
+  __name: "GradientCircularPie",
+  props: {
+    data: {
+      type: Object,
+      required: !0
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    colorData: {
+      type: Array,
+      default: () => [
+        {
+          dark: "#18FEFE",
+          light: "#18FEFE50"
+        },
+        {
+          dark: "#FF9900",
+          light: "#FF990050"
+        },
+        {
+          dark: "#438AF4",
+          light: "#438AF450"
+        },
+        {
+          dark: "#A1FFCB",
+          light: "#A1FFCB50"
+        },
+        {
+          dark: "#F69D7B",
+          light: "#F69D7B50"
+        },
+        {
+          dark: "#B9E5FF",
+          light: "#B9E5FF50"
+        },
+        {
+          dark: "#c392bb",
+          light: "#c392bb50"
+        },
+        {
+          dark: "#65d1f8",
+          light: "#65d1f850"
+        }
+      ]
+    },
+    zoomKey: {
+      type: String,
+      // 'none' | 'ctrl' | 'alt' | 'shift'
+      default: "ctrl"
+      // 默认按住 Ctrl 键缩放
+    },
+    textName: {
+      type: String,
+      default: "占比名称"
+    },
+    ratio: {
+      type: Number,
+      default: 50
+    }
+  },
+  setup(a) {
+    const t = a, o = S(null);
+    let e = null;
+    const i = y(() => {
+      var l, m, F;
+      const r = [
+        { value: (l = t.data) == null ? void 0 : l.ratio, color: "#7DEDFF" },
+        { value: 100 - ((m = t.data) == null ? void 0 : m.ratio), color: "#00000000" }
+      ];
+      return {
+        color: ["#1fe5ea", "#1daeff", "#f4e051"],
+        title: [
+          {
+            // 使用富文本设置不同样式
+            text: `{ratio|${(F = t.data) == null ? void 0 : F.ratio}}{percent|%}`,
+            top: "37%",
+            // 调整垂直位置
+            left: "49%",
+            // 水平居中
+            textAlign: "center",
+            textStyle: {
+              rich: {
+                ratio: {
+                  fontFamily: "DINPro",
+                  color: "#C0C0C0",
+                  fontSize: 35
+                },
+                percent: {
+                  fontFamily: "DINPro",
+                  color: "#C0C0C0",
+                  fontSize: 20,
+                  padding: [10, 0, 0, 0]
+                  // 为百分号添加左边距
+                }
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            // 刻度
+            name: "",
+            type: "gauge",
+            splitNumber: 60,
+            //刻度数量
+            radius: "105%",
+            //图表尺寸
+            center: ["50%", "50%"],
+            startAngle: 90,
+            endAngle: -269.9999,
+            axisLine: {
+              show: !1,
+              lineStyle: {
+                width: 0,
+                shadowBlur: 0,
+                color: [[1, "#0dc2fe"]]
+              }
+            },
+            axisTick: {
+              show: !1
+            },
+            splitLine: {
+              show: !0,
+              length: 0.1,
+              // 圆形直径
+              lineStyle: {
+                color: "#0dc2fe",
+                // 颜色可改为固定色或渐变
+                width: 3,
+                // 与length相等形成圆形
+                cap: "round"
+                // 关键属性：端点圆形
+              }
+            },
+            axisLabel: {
+              show: !1
+            },
+            pointer: {
+              //仪表盘指针
+              show: 0
+            },
+            detail: {
+              show: 0
+            }
+          },
+          //环形
+          {
+            name: "基础饼图",
+            type: "pie",
+            radius: ["60%", "70%"],
+            center: ["50%", "50%"],
+            hoverAnimation: !1,
+            label: {
+              normal: {
+                show: !1
+              },
+              emphasis: {
+                show: !1
+              }
+            },
+            zlevel: 1,
+            labelLine: {
+              normal: {
+                show: !1
+              }
+            },
+            itemStyle: {
+              shadowColor: "#7DEDFF",
+              shadowBlur: 20
+            },
+            data: r.flatMap((h, J) => {
+              if (h.value > 0) {
+                const D = Math.round(h.value / 100 * 20), g = [];
+                for (let p = 0; p < D; p++)
+                  g.push(
+                    {
+                      value: 2,
+                      // 有颜色部分的宽度
+                      name: p,
+                      // ratio: item.ratio,
+                      itemStyle: {
+                        normal: { color: h.color }
+                      }
+                    },
+                    {
+                      value: 1,
+                      // 无颜色部分的宽度
+                      name: "",
+                      itemStyle: {
+                        normal: {
+                          label: { show: !1 },
+                          labelLine: { show: !1 },
+                          color: "rgba(0, 0, 0, 0)",
+                          borderColor: "rgba(0, 0, 0, 0)",
+                          borderWidth: 0
+                        }
+                      }
+                    }
+                  );
+                return g;
+              }
+              return [];
+            })
+          },
+          //  外层装饰圆环
+          {
+            type: "pie",
+            radius: ["76%", "79%"],
+            hoverAnimation: !1,
+            labelLine: {
+              normal: {
+                show: !1,
+                length: 3,
+                length2: 80
+              },
+              emphasis: {
+                show: !1
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: "#9FD3FF",
+                shadowColor: "#9FD3FF",
+                shadowBlur: 25
+              }
+            },
+            name: "",
+            data: [
+              {
+                name: "",
+                value: 20
+              }
+            ]
+          }
+        ]
+      };
+    }), n = y(
+      () => L({}, i.value, t.options)
+    ), k = () => {
+      o.value && (e = G(
+        o.value,
+        {},
+        {
+          renderer: "svg"
+        }
+      ), c(), e.dispatchAction({
+        type: "takeGlobalCursor",
+        key: "dataZoomSelect",
+        dataZoomSelectActive: !0
+      }));
+    }, c = () => {
+      e && (e.setOption(n.value, !0), A(() => e.resize()));
+    }, f = () => {
+      e == null || e.resize({ animation: { duration: 300 } });
+    };
+    return C(
+      () => t.data,
+      (r, l) => {
+        JSON.stringify(r) !== JSON.stringify(l) && c();
+      },
+      { deep: !0 }
+    ), C(n, c), x(() => {
+      k(), window.addEventListener("resize", f);
+    }), B(() => {
+      window.removeEventListener("resize", f), e == null || e.dispose(), e = null;
+    }), (r, l) => (d(), u("div", E({
+      ref_key: "chartContainer",
+      ref: o
+    }, r.$attrs, { class: "echarts-container" }), null, 16));
+  }
+}, $ = /* @__PURE__ */ v(O, [["__scopeId", "data-v-64e1bb53"]]), j = { class: "GradientCircularPieChart" }, M = { class: "GradientCircularPieData-legend" }, q = {
+  __name: "GradientCircularPieChart",
+  props: {
+    data: {
+      type: Object,
+      required: !0
+    },
+    colorData: {
+      type: Array,
+      default: () => [
+        {
+          dark: "#18FEFE",
+          light: "#18FEFE50"
+        },
+        {
+          dark: "#FF9900",
+          light: "#FF990050"
+        },
+        {
+          dark: "#438AF4",
+          light: "#438AF450"
+        },
+        {
+          dark: "#A1FFCB",
+          light: "#A1FFCB50"
+        },
+        {
+          dark: "#F69D7B",
+          light: "#F69D7B50"
+        },
+        {
+          dark: "#B9E5FF",
+          light: "#B9E5FF50"
+        },
+        {
+          dark: "#c392bb",
+          light: "#c392bb50"
+        },
+        {
+          dark: "#65d1f8",
+          light: "#65d1f850"
+        }
+      ]
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    width: {
+      type: String,
+      default: "170px"
+    },
+    height: {
+      type: String,
+      default: "170px"
+    },
+    textName: {
+      type: String,
+      default: "占比名称"
+    },
+    ratio: {
+      type: Number,
+      default: 50
+    }
+  },
+  setup(a) {
+    const t = a;
+    return (o, e) => (d(), u("div", j, [
+      _($, {
+        data: a.data,
+        options: a.options,
+        colorData: t.colorData,
+        ratio: t.ratio,
+        textName: t.textName,
+        style: N({ width: `${t.width}`, height: `${t.height}` })
+      }, null, 8, ["data", "options", "colorData", "ratio", "textName", "style"]),
+      s("div", M, [
+        (d(!0), u(P, null, z(a.data.data, (i, n) => (d(), u("div", {
+          key: `GradientCircularPieData_${n}`,
+          class: "GradientCircularPieData-legend-item"
+        }, [
+          s("p", null, b(i.value), 1),
+          s("span", null, b(i.name), 1),
+          e[0] || (e[0] = s("b", null, null, -1))
+        ]))), 128))
+      ])
+    ]));
+  }
+}, w = /* @__PURE__ */ v(q, [["__scopeId", "data-v-c5ff7c47"]]);
+w.install = (a) => {
+  a.component("GradientCircularPieChart", w);
+};
+export {
+  w as default
+};