smart-web-ui 1.0.1 → 1.0.2

package/dist/GradientCircularPieChart.js

@@ -1,372 +0,0 @@
-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
-};