smart-web-ui 1.0.0 → 1.0.1

package/dist/PictorialChart.js

@@ -0,0 +1,205 @@
+import { ref as h, computed as d, watch as u, onMounted as x, onBeforeUnmount as S, openBlock as C, createElementBlock as v, mergeProps as w, nextTick as L } from "vue";
+import { i as _ } from "./chunks/index-CBkwld9S.js";
+import { _ as k } from "./chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+import { m as A } from "./chunks/merge-H4ZkNr1T.js";
+const z = {
+  __name: "PictorialChart",
+  props: {
+    data: {
+      type: Array,
+      required: !0
+    },
+    xData: {
+      type: Array,
+      required: !0
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    colorList: {
+      type: Array,
+      default: () => [
+        {
+          start: "#f00",
+          end: "rgba(255, 255, 255, .1)"
+        },
+        {
+          start: "#0f0",
+          end: "rgba(255, 255, 255, .1)"
+        },
+        {
+          start: "#00f",
+          end: "rgba(255, 255, 255, .1)"
+        }
+      ]
+    },
+    // 新增配置项，用于自定义图例、提示框等样式
+    chartStyles: {
+      type: Object,
+      default: () => ({
+        legend: {
+          top: "5%",
+          right: "5%",
+          icon: "rect",
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 12,
+            fontFamily: "PingFang SC"
+          },
+          itemWidth: 6,
+          itemHeight: 6
+        },
+        tooltip: {
+          backgroundColor: "rgba(1, 13, 19, 0.5)",
+          borderColor: "#ffffff40",
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 12,
+            fontFamily: "PingFang SC"
+          }
+        },
+        axisLabel: {
+          fontSize: 12,
+          color: "#fff",
+          fontFamily: "PingFang SC"
+        },
+        grid: {
+          top: 50,
+          bottom: 30,
+          left: 40,
+          right: 20
+        },
+        abnormalColor: {
+          start: "#795351",
+          end: "rgba(255, 255, 255, .1)"
+        }
+      })
+    }
+  },
+  setup(n) {
+    const e = n, s = h(null);
+    let t = null;
+    const y = (a) => {
+      const r = /* @__PURE__ */ new Map();
+      return a.forEach((o) => {
+        o.children.forEach((i) => {
+          r.has(i.label) || r.set(i.label, []), r.get(i.label).push(i.value);
+        });
+      }), Array.from(r.entries()).map(([o, i], p) => ({
+        name: o,
+        type: "pictorialBar",
+        barWidth: "120%",
+        stack: "数量",
+        label: {
+          normal: {
+            show: !1
+          }
+        },
+        itemStyle: {
+          normal: {
+            color: {
+              type: "linear",
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: e.colorList[p].start
+                },
+                {
+                  offset: 1,
+                  color: e.colorList[p].end
+                }
+              ],
+              globalCoord: !1
+            }
+          }
+        },
+        symbol: "path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z",
+        data: i
+      }));
+    }, g = d(() => {
+      const a = e.data.map((o) => o.name), r = y(e.data);
+      return {
+        legend: {
+          ...e.chartStyles.legend,
+          data: r.map((o) => o.name)
+        },
+        tooltip: {
+          trigger: "axis",
+          ...e.chartStyles.tooltip,
+          axisPointer: {
+            type: "shadow"
+          }
+        },
+        grid: e.chartStyles.grid,
+        xAxis: {
+          type: "category",
+          boundaryGap: !0,
+          data: a,
+          axisLine: {
+            lineStyle: {
+              type: "solid",
+              width: 2,
+              color: "rgba(179, 223, 255, 0.50)"
+            }
+          },
+          axisTick: {
+            show: !1
+          },
+          axisLabel: {
+            show: !0,
+            ...e.chartStyles.axisLabel
+          }
+        },
+        yAxis: {
+          type: "value",
+          axisLabel: e.chartStyles.axisLabel
+        },
+        series: r,
+        animation: !0
+      };
+    }), f = d(
+      () => A({}, g.value, e.options)
+    ), b = () => {
+      s.value && (t = _(
+        s.value,
+        {},
+        {
+          renderer: "svg"
+        }
+      ), l(), t.dispatchAction({
+        type: "takeGlobalCursor",
+        key: "dataZoomSelect",
+        dataZoomSelectActive: !0
+      }));
+    }, l = () => {
+      t && (t.setOption(f.value, !0), L(() => t.resize()));
+    }, c = () => {
+      t == null || t.resize({ animation: { duration: 300 } });
+    };
+    return u(
+      () => e.data,
+      (a, r) => {
+        JSON.stringify(a) !== JSON.stringify(r) && l();
+      },
+      { deep: !0 }
+    ), u(f, l), x(() => {
+      b(), window.addEventListener("resize", c);
+    }), S(() => {
+      window.removeEventListener("resize", c), t == null || t.dispose(), t = null;
+    }), (a, r) => (C(), v("div", w({
+      ref_key: "chartContainer",
+      ref: s
+    }, a.$attrs, { class: "echarts-container" }), null, 16));
+  }
+}, m = /* @__PURE__ */ k(z, [["__scopeId", "data-v-f1379ffb"]]);
+m.install = (n) => {
+  n.component("PictorialChart", m);
+};
+export {
+  m as default
+};