smart-web-ui 1.0.0 → 1.0.1

package/dist/DoubleColumnDiagram.js

@@ -0,0 +1,360 @@
+import { ref as C, computed as y, watch as g, onMounted as b, onBeforeUnmount as F, openBlock as v, createElementBlock as L, mergeProps as D, nextTick as w } from "vue";
+import { L as z, i as k } from "./chunks/index-CBkwld9S.js";
+import { _ as T } from "./chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+import { m as _ } from "./chunks/merge-H4ZkNr1T.js";
+const A = {
+  __name: "DoubleColumnDiagram",
+  props: {
+    data: {
+      type: Array,
+      required: !0
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    colorData: {
+      type: Array,
+      default: () => [
+        {
+          light: "rgba(15, 255, 242, 0.2)",
+          dark: "rgba(15, 255, 242, 1)"
+        },
+        {
+          light: "#FDB53A20",
+          dark: "#FDB53A"
+        }
+      ]
+    },
+    zoomKey: {
+      type: String,
+      // 'none' | 'ctrl' | 'alt' | 'shift'
+      default: "ctrl"
+      // 默认按住 Ctrl 键缩放
+    },
+    // 纵轴网格线格式
+    xLineType: {
+      type: String,
+      default: "dashed"
+      //solid实线dashed虚线dotted细点画线
+    },
+    // 网格线颜色
+    lineColor: {
+      type: String,
+      default: "rgba(217, 231, 255, 0.20)"
+    },
+    // 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: 8
+    },
+    // 数据文字颜色
+    DataTextColor: {
+      type: String,
+      default: "#0095FF"
+    }
+  },
+  setup(n) {
+    const e = n, i = C(null);
+    let t = null;
+    const d = () => {
+      const r = "0123456789ABCDEF";
+      let o = "#";
+      for (let a = 0; a < 6; a++)
+        o += r[Math.floor(Math.random() * 16)];
+      return o;
+    }, h = y(() => {
+      var o;
+      const r = ((o = e.data[0]) == null ? void 0 : o.children.map((a) => a.name)) || [];
+      return {
+        // 网格配置，设置图表上下左右的边距
+        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: 20,
+          // 图例项的宽度
+          itemHeight: 5
+          // 图例项的高度
+        },
+        // x 轴配置
+        xAxis: [
+          {
+            type: "category",
+            // x 轴类型为分类轴
+            data: r,
+            // 设置 x 轴的位置和样式
+            axisLine: {
+              lineStyle: {
+                type: "solid",
+                // 轴线类型，如虚线
+                width: 2,
+                color: "rgba(179, 223, 255, 0.50)"
+                // 轴线颜色
+              }
+            },
+            axisTick: {
+              show: !1
+              // 隐藏 X 轴刻度线
+            },
+            // 隐藏右侧的标签（如果需要）
+            axisLabel: {
+              show: !0,
+              // 显示 x 轴标签
+              interval: 0,
+              // 强制显示所有标签
+              formatter: function(a) {
+                return a.length > e.xTextLength ? a.slice(0, e.xTextLength) + "..." : a;
+              },
+              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: e.data.map((a, u) => {
+          var p, m;
+          return {
+            name: a.name,
+            // 使用数据中的 name 作为系列名称
+            type: "bar",
+            // 图表类型为柱状图
+            itemStyle: {
+              // 柱子的颜色使用线性渐变
+              color: new z(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: ((p = e.colorData[u]) == null ? void 0 : p.dark) || d()
+                },
+                {
+                  offset: 1,
+                  color: ((m = e.colorData[u]) == null ? void 0 : m.light) || d()
+                }
+              ])
+            },
+            data: a.children.map((x) => x.value),
+            barWidth: e.barWidth,
+            // 柱子的宽度
+            barCategoryGap: "20%",
+            // 柱子组之间的间距
+            barGap: "0%",
+            // 同一组内柱子之间的间距
+            label: {
+              normal: {
+                show: !1
+                // 显示柱子上的标签
+              }
+            }
+          };
+        }),
+        // 数据缩放配置
+        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
+        // 禁用动画提升性能
+      };
+    }), f = y(
+      () => _({}, h.value, e.options)
+    ), S = () => {
+      i.value && (t = k(
+        i.value,
+        {},
+        {
+          renderer: "svg"
+        }
+      ), l(), t.dispatchAction({
+        type: "takeGlobalCursor",
+        key: "dataZoomSelect",
+        dataZoomSelectActive: !0
+      }));
+    }, l = () => {
+      t && (t.setOption(f.value, !0), w(() => t.resize()));
+    }, s = () => {
+      t == null || t.resize({ animation: { duration: 300 } });
+    };
+    return g(
+      () => e.data,
+      (r, o) => {
+        JSON.stringify(r) !== JSON.stringify(o) && l();
+      },
+      { deep: !0 }
+    ), g(f, l), b(() => {
+      S(), window.addEventListener("resize", s);
+    }), F(() => {
+      window.removeEventListener("resize", s), t == null || t.dispose(), t = null;
+    }), (r, o) => (v(), L("div", D({
+      ref_key: "chartContainer",
+      ref: i
+    }, r.$attrs, { class: "echarts-container" }), null, 16));
+  }
+}, c = /* @__PURE__ */ T(A, [["__scopeId", "data-v-6a1c946e"]]);
+c.install = (n) => {
+  n.component("DoubleColumnDiagram", c);
+};
+export {
+  c as default
+};