smart-web-ui 1.0.0 → 1.0.1

package/dist/ColumnDiagram.js

@@ -0,0 +1,352 @@
+import { ref as m, computed as s, watch as d, onMounted as g, onBeforeUnmount as c, openBlock as S, createElementBlock as h, mergeProps as x, nextTick as C } from "vue";
+import { L as b, i as L } from "./chunks/index-CBkwld9S.js";
+import { _ as v } from "./chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+import { m as F } from "./chunks/merge-H4ZkNr1T.js";
+const w = {
+  __name: "ColumnDiagram",
+  props: {
+    data: {
+      type: Array,
+      required: !0
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    zoomKey: {
+      type: String,
+      // 'none' | 'ctrl' | 'alt' | 'shift'
+      default: "ctrl"
+      // 默认按住 Ctrl 键缩放
+    },
+    // 纵轴网格线格式
+    xLineType: {
+      type: String,
+      default: "dashed"
+      //solid实线dashed虚线dotted细点画线
+    },
+    // 网格线颜色
+    lineColor: {
+      type: String,
+      default: "#526B8E"
+    },
+    // x轴文字颜色
+    xNameColor: {
+      type: String,
+      default: "#fff"
+    },
+    // x轴文字长度
+    xTextLength: {
+      type: Number,
+      default: 4
+    },
+    // 柱子需要对应到标签上，设置为 false
+    boundaryGap: {
+      type: Boolean,
+      default: !0
+    },
+    // 单位名称
+    unitName: {
+      type: String,
+      default: "产量/吨"
+    },
+    // Y轴单位文字颜色
+    yNameColor: {
+      type: String,
+      default: "#fff"
+    },
+    // 横轴网格线是否显示
+    yLineShow: {
+      type: Boolean,
+      default: !0
+    },
+    // 横轴网格线格式
+    yLineType: {
+      type: String,
+      default: "dashed"
+      //solid实线dashed虚线dotted细点画线
+    },
+    // Y轴名称颜色
+    yColor: {
+      type: String,
+      default: "#fff"
+    },
+    // 数据名称
+    seriesName: {
+      type: String,
+      default: "商品出货量"
+    },
+    // 数据渐变颜色-上部
+    DataGradientColorTop: {
+      type: String,
+      default: "#0095FF"
+    },
+    // 数据渐变颜色-下部
+    DataGradientColorBotoom: {
+      type: String,
+      default: "#0095FF28"
+    },
+    // 柱子宽度
+    barWidth: {
+      type: String,
+      default: 25
+    },
+    // 数据文字颜色
+    DataTextColor: {
+      type: String,
+      default: "#0095FF"
+    }
+  },
+  setup(a) {
+    const e = a, r = m(null);
+    let o = null;
+    const u = s(() => ({
+      // 网格配置，设置图表上下左右的边距
+      grid: {
+        top: 30,
+        bottom: 30,
+        left: 40,
+        right: 20
+      },
+      // 提示框配置，当鼠标悬停在图表上时显示的信息
+      tooltip: {
+        trigger: "axis",
+        // 触发类型为坐标轴
+        backgroundColor: "rgba(1, 13, 19, 0.5)",
+        // 提示框背景颜色
+        borderColor: "#ffffff40",
+        // 提示框边框颜色
+        axisPointer: {
+          type: "shadow"
+          // 坐标轴指示器类型为阴影
+        },
+        textStyle: {
+          color: "#ffffff",
+          // 提示框文字颜色
+          fontSize: 12,
+          // 提示框文字大小
+          fontFamily: "PingFang SC"
+          // 提示框文字字体
+        }
+      },
+      // 图例配置，显示图表中不同系列的名称和颜色
+      legend: {
+        show: !0,
+        // 显示图例
+        right: "5%",
+        // 图例相对于右侧的位置
+        textStyle: {
+          color: "#ffffff",
+          // 图例文字颜色
+          fontSize: 12,
+          // 图例文字大小
+          fontFamily: "PingFang SC"
+          // 图例文字字体
+        },
+        itemWidth: 12,
+        // 图例项的宽度
+        itemHeight: 12
+        // 图例项的高度
+      },
+      // x 轴配置
+      xAxis: [
+        {
+          type: "category",
+          // x 轴类型为分类轴
+          // 从 props.data 中提取 label 作为 x 轴的数据，处理数据为空或 label 为空的情况
+          data: (e.data || []).map((t) => (t == null ? void 0 : t.label) || ""),
+          // 设置纵轴网格线样式
+          splitLine: {
+            show: !0,
+            // 显示网格线
+            lineStyle: {
+              type: e.xLineType,
+              // 网格线类型，如虚线
+              color: e.lineColor
+              // 网格线颜色
+            }
+          },
+          // 设置 x 轴的位置和样式
+          axisLine: {
+            lineStyle: {
+              type: e.xLineType,
+              // 轴线类型，如虚线
+              color: e.lineColor
+              // 轴线颜色
+            }
+          },
+          axisTick: {
+            show: !1
+            // 隐藏 X 轴刻度线
+          },
+          // 隐藏右侧的标签（如果需要）
+          axisLabel: {
+            show: !0,
+            // 显示 x 轴标签
+            interval: 0,
+            // 强制显示所有标签
+            formatter: function(t) {
+              return t.length > e.xTextLength ? t.slice(0, e.xTextLength) + "..." : t;
+            },
+            textStyle: {
+              fontSize: 12,
+              // x 轴标签文字大小
+              color: e.xNameColor,
+              // x 轴标签文字颜色
+              fontFamily: "PingFang SC"
+              // x 轴标签文字字体
+            }
+          },
+          // 可以通过调整 boundaryGap 来调整柱子与坐标轴标签的对齐
+          boundaryGap: e.boundaryGap
+          // 如果柱子需要对应到标签上，设置为 false
+        }
+      ],
+      // y 轴配置
+      yAxis: [
+        {
+          type: "value",
+          // y 轴类型为数值轴
+          name: e.unitName,
+          // y 轴的名称
+          nameTextStyle: {
+            color: e.yNameColor,
+            // y 轴名称文字颜色
+            fontSize: 12,
+            // y 轴名称文字大小
+            fontFamily: "PingFang SC"
+            // y 轴名称文字字体
+          },
+          axisLabel: {
+            formatter: "{value}"
+            // y 轴标签的格式化方式
+          },
+          // 设置纵轴网格线样式
+          splitLine: {
+            show: e.yLineShow,
+            // 是否显示网格线
+            lineStyle: {
+              type: e.yLineType,
+              // 网格线类型，如虚线
+              color: e.lineColor
+              // 网格线颜色
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: 12,
+              // y 轴标签文字大小
+              color: e.yColor,
+              // y 轴标签文字颜色
+              fontFamily: "PingFang SC"
+              // y 轴标签文字字体
+            }
+          }
+        }
+      ],
+      // 数据系列配置
+      series: [
+        {
+          name: e.seriesName,
+          // 数据系列的名称
+          type: "bar",
+          // 图表类型为柱状图
+          itemStyle: {
+            // 柱子的颜色使用线性渐变
+            color: new b(0, 0, 0, 1, [
+              { offset: 0, color: e.DataGradientColorTop },
+              { offset: 1, color: e.DataGradientColorBotoom }
+            ])
+          },
+          // 从 props.data 中提取 value 作为数据系列的数据，处理数据为空或 value 为空的情况
+          data: (e.data || []).map((t) => (t == null ? void 0 : t.value) || ""),
+          barWidth: e.barWidth,
+          // 柱子的宽度
+          label: {
+            normal: {
+              show: !0,
+              // 显示柱子上的标签
+              lineHeight: 10,
+              // 标签文字的行高
+              formatter: "{c}",
+              // 标签的格式化方式
+              position: "top",
+              // 标签的位置
+              textStyle: {
+                color: e.DataTextColor,
+                // 标签文字颜色
+                fontSize: 12,
+                // 标签文字大小
+                fontFamily: "PingFang SC"
+                // 标签文字字体
+              }
+            }
+          }
+        }
+      ],
+      // 数据缩放配置
+      dataZoom: [
+        {
+          type: "inside",
+          // 内置型数据缩放组件
+          xAxisIndex: 0,
+          // 控制第一个 x 轴
+          // 根据 zoomKey 的值设置是否需要按键触发缩放
+          zoomOnMouseWheel: e.zoomKey === "none" ? !0 : e.zoomKey,
+          moveOnMouseMove: !0,
+          // 允许鼠标拖动平移
+          moveOnMouseWheel: !0,
+          // 允许鼠标滚轮平移
+          preventDefaultMouseMove: !1,
+          // 允许默认滚动行为
+          throttle: 50,
+          // 操作节流时间
+          start: 0,
+          end: (e.data && e.data.length) > 30 ? e.data.length / 1.7 : (e.data && e.data.length) > 23 ? e.data.length / 1.5 : (e.data && e.data.length) > 13 ? 50 : (e.data && e.data.length) > 7 ? 70 : 100
+          // maxSpan: 80, // 最大缩放范围
+          // minSpan: 20, // 最小缩放范围
+        }
+      ],
+      animation: !0
+      // 禁用动画提升性能
+    })), i = s(
+      () => F({}, u.value, e.options)
+    ), y = () => {
+      r.value && (o = L(
+        r.value,
+        {},
+        {
+          renderer: "svg"
+        }
+      ), n(), o.dispatchAction({
+        type: "takeGlobalCursor",
+        key: "dataZoomSelect",
+        dataZoomSelectActive: !0
+      }));
+    }, n = () => {
+      o && (o.setOption(i.value, !0), C(() => o.resize()));
+    }, l = () => {
+      o == null || o.resize({ animation: { duration: 300 } });
+    };
+    return d(
+      () => e.data,
+      (t, f) => {
+        JSON.stringify(t) !== JSON.stringify(f) && n();
+      },
+      { deep: !0 }
+    ), d(i, n), g(() => {
+      y(), window.addEventListener("resize", l);
+    }), c(() => {
+      window.removeEventListener("resize", l), o == null || o.dispose(), o = null;
+    }), (t, f) => (S(), h("div", x({
+      ref_key: "chartContainer",
+      ref: r
+    }, t.$attrs, { class: "echarts-container" }), null, 16));
+  }
+}, p = /* @__PURE__ */ v(w, [["__scopeId", "data-v-b6ef0b5e"]]);
+p.install = (a) => {
+  a.component("ColumnDiagram", p);
+};
+export {
+  p as default
+};

package/dist/DataColumnDiagram.js

@@ -0,0 +1,275 @@
+import { ref as F, computed as h, watch as S, onMounted as w, onBeforeUnmount as z, openBlock as _, createElementBlock as P, mergeProps as k, nextTick as O } from "vue";
+import { i as A, L } from "./chunks/index-CBkwld9S.js";
+import { _ as E } from "./chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+import { m as $ } from "./chunks/merge-H4ZkNr1T.js";
+const B = {
+  __name: "DataColumnDiagram",
+  props: {
+    data: {
+      type: Array,
+      default: () => [
+        {
+          name: "1月",
+          value: 200
+        },
+        {
+          name: "2月",
+          value: 182
+        },
+        {
+          name: "3月",
+          value: 191
+        },
+        {
+          name: "4月",
+          value: 220
+        },
+        {
+          name: "5月",
+          value: 182
+        },
+        {
+          name: "6月",
+          value: 191
+        },
+        {
+          value: 191,
+          name: "7月"
+        },
+        {
+          name: "8月",
+          value: 234,
+          predict: !0
+        },
+        {
+          name: "9月",
+          value: 290
+        },
+        {
+          name: "10月",
+          value: 330
+        },
+        {
+          name: "11月",
+          value: 310,
+          predict: !0
+        },
+        {
+          name: "12月",
+          value: 210
+          // predict: true,
+        }
+      ]
+    },
+    xData: {
+      type: Array,
+      default: () => ["实际支出", "预测支出"]
+    },
+    colorData: {
+      type: Array,
+      default: () => ["#55D6FF", "#FFC556"]
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(u) {
+    const l = u, c = F(null);
+    let t = null;
+    const p = (o, r) => new L(0, 0, 0, 1, [
+      {
+        offset: 0,
+        color: o
+      },
+      {
+        offset: 1,
+        color: r
+      }
+    ]), y = l.colorData, x = (o, r, i) => l.xData.flatMap((d, s) => {
+      const e = s === 1, n = e ? r : o, f = i(n), a = y[s % y.length];
+      return [
+        {
+          name: d,
+          type: "bar",
+          data: n,
+          barWidth: 15,
+          itemStyle: {
+            color: p(a, `${a}40`)
+          },
+          ...e && {
+            barGap: "-100%",
+            lineStyle: {
+              type: "dashed"
+            },
+            symbol: "none"
+          }
+        },
+        {
+          type: "pictorialBar",
+          symbol: "rect",
+          symbolSize: [15, 4],
+          symbolOffset: e ? [0, -6] : [-0, -6],
+          z: 12,
+          itemStyle: {
+            color: p(a, `${a}40`)
+          },
+          data: f
+        }
+      ];
+    }), D = h(() => {
+      let o = l.data, r = [], i = [];
+      const d = (e) => {
+        let n = [];
+        for (const f of e)
+          n.push({
+            value: f,
+            symbolPosition: "end"
+          });
+        return n;
+      };
+      o.forEach((e) => {
+        e.predict ? i.push([e.name, e.value]) : r.push([e.name, e.value]);
+      });
+      let s = o.map((e) => e.name);
+      return {
+        grid: {
+          top: 50,
+          bottom: 30,
+          left: 40,
+          right: 20
+        },
+        tooltip: {
+          trigger: "axis",
+          // 触发类型为坐标轴
+          backgroundColor: "rgba(1, 13, 19, 0.5)",
+          // 提示框背景颜色
+          borderColor: "#ffffff40",
+          // 提示框边框颜色
+          axisPointer: {
+            type: "shadow"
+            // 坐标轴指示器类型为阴影
+          },
+          textStyle: {
+            color: "#ffffff",
+            // 提示框文字颜色
+            fontSize: 12,
+            // 提示框文字大小
+            fontFamily: "PingFang SC"
+            // 提示框文字字体
+          },
+          // 自定义提示框内容
+          formatter: function(e) {
+            let n = e[0].name + "<br/>";
+            return [e.filter(
+              (a) => a.value && a.value.length > 1
+            )[0]].forEach((a) => {
+              l.xData.indexOf(a.seriesName), n += `<span>${a.seriesName}: ${a.value[1]}</span><br/>`;
+            }), n;
+          }
+        },
+        xAxis: {
+          type: "category",
+          data: s,
+          axisLine: {
+            lineStyle: {
+              type: "solid",
+              // 轴线类型，如虚线
+              width: 2,
+              color: "rgba(179, 223, 255, 0.50)"
+              // 轴线颜色
+            }
+          },
+          axisTick: {
+            show: !1
+            // 隐藏 X 轴刻度线
+          },
+          axisLabel: {
+            show: !0,
+            // 显示 x 轴标签
+            // interval: 0, // 强制显示所有标签
+            textStyle: {
+              fontSize: 12,
+              // x 轴标签文字大小
+              color: "#fff",
+              // x 轴标签文字颜色
+              fontFamily: "PingFang SC"
+              // x 轴标签文字字体
+            }
+          }
+        },
+        yAxis: {
+          type: "value",
+          axisLabel: {
+            textStyle: {
+              fontSize: 12,
+              // y 轴标签文字大小
+              color: "#fff",
+              // y 轴标签文字颜色
+              fontFamily: "PingFang SC"
+              // y 轴标签文字字体
+            }
+          }
+        },
+        legend: {
+          show: !0,
+          data: l.xData,
+          top: "5%",
+          right: "5%",
+          // 图例相对于右侧的位置
+          textStyle: {
+            color: "#ffffff",
+            // 图例文字颜色
+            fontSize: 12,
+            // 图例文字大小
+            fontFamily: "PingFang SC"
+            // 图例文字字体
+          },
+          itemWidth: 6,
+          // 图例项的宽度
+          itemHeight: 6
+          // 图例项的高度
+        },
+        series: x(r, i, d)
+      };
+    }), g = h(
+      () => $({}, D.value, l.options)
+    ), C = () => {
+      c.value && (t = A(
+        c.value,
+        {},
+        {
+          renderer: "svg"
+        }
+      ), m(), t.dispatchAction({
+        type: "takeGlobalCursor",
+        key: "dataZoomSelect",
+        dataZoomSelectActive: !0
+      }));
+    }, m = () => {
+      t && (t.setOption(g.value, !0), O(() => t.resize()));
+    }, v = () => {
+      t == null || t.resize({ animation: { duration: 300 } });
+    };
+    return S(
+      () => l.data,
+      (o, r) => {
+        JSON.stringify(o) !== JSON.stringify(r) && m();
+      },
+      { deep: !0 }
+    ), S(g, m), w(() => {
+      C(), window.addEventListener("resize", v);
+    }), z(() => {
+      window.removeEventListener("resize", v), t == null || t.dispose(), t = null;
+    }), (o, r) => (_(), P("div", k({
+      ref_key: "chartContainer",
+      ref: c
+    }, o.$attrs, { class: "echarts-container" }), null, 16));
+  }
+}, b = /* @__PURE__ */ E(B, [["__scopeId", "data-v-f4d20886"]]);
+b.install = (u) => {
+  u.component("DataColumnDiagram", b);
+};
+export {
+  b as default
+};