smart-web-ui 1.0.1 → 1.0.2

package/dist/DoubleColumnDiagram.js

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