smart-web-ui 1.0.1 → 1.0.2

package/dist/MultiDataColumnDiagram.js

@@ -1,398 +0,0 @@
-import { ref as w, computed as x, watch as S, onMounted as b, onBeforeUnmount as T, openBlock as z, createElementBlock as k, mergeProps as F, nextTick as D } from "vue";
-import { L as N, i as B } from "./chunks/index-CBkwld9S.js";
-import { _ as $ } from "./chunks/_plugin-vue_export-helper-CHgC5LLL.js";
-import { m as M } from "./chunks/merge-H4ZkNr1T.js";
-const I = {
-  __name: "MultiDataColumnDiagram",
-  props: {
-    data: {
-      type: Array,
-      required: !0
-    },
-    options: {
-      type: Object,
-      default: () => ({})
-    },
-    zoomKey: {
-      type: String,
-      // 'none' | 'ctrl' | 'alt' | 'shift'
-      default: "ctrl"
-      // 默认按住 Ctrl 键缩放
-    },
-    colorData: {
-      type: Array,
-      required: !0
-    },
-    // x轴文字颜色
-    xNameColor: {
-      type: String,
-      default: "#fff"
-    },
-    // x轴线颜色
-    xlineColor: {
-      type: String,
-      default: "#526B8E"
-    },
-    // 纵轴网格线格式
-    xLineType: {
-      type: String,
-      default: "dashed"
-      //solid实线dashed虚线dotted细点画线
-    },
-    // 纵轴网格线是否显示
-    xLineShow: {
-      type: Boolean,
-      default: !0
-    },
-    // 网格线颜色
-    lineColor: {
-      type: String,
-      default: "#526B8E"
-    },
-    // 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"
-    },
-    // 移入提示框文案样式
-    tooltipHtml: {
-      type: Function,
-      default: function(o) {
-        let e = "";
-        return e = `
-          <div>${o[0].name}</div>
-          <div>${o[0].marker} ${o[0].seriesName}: ${o[0].value}</div>
-          <div>${o[1].marker} ${o[1].seriesName}: ${o[1].value}</div>
-          <div>${o[2].marker} ${o[2].seriesName}: ${o[2].value}</div>
-          <div>${o[3].marker} ${o[3].seriesName}: ${o[3].value}%</div>
-          `, e;
-      }
-    },
-    // 移入提示框背景颜色
-    tooltipBgColor: {
-      type: String,
-      default: "rgba(1, 13, 19, 0.5)"
-    },
-    // 移入提示框边框颜色
-    tooltipBorderColor: {
-      type: String,
-      default: "#ffffff40"
-    },
-    // 移入提示框文字颜色
-    tooltipTextColor: {
-      type: String,
-      default: "#ffffff"
-    },
-    // 移入提示框文字大小
-    tooltipTextFontSize: {
-      type: Number,
-      default: 13
-    },
-    // legend文字颜色
-    legendTextColor: {
-      type: String,
-      default: "#fff"
-    },
-    // legend文字大小
-    legendTextFontSize: {
-      type: Number,
-      default: 12
-    },
-    // legend文字显示状态
-    legendItemShow: {
-      type: Boolean,
-      default: !0
-    },
-    // legend块的宽度
-    legendItemWidth: {
-      type: Number,
-      default: 22
-    },
-    // legend块的高度
-    legendItemHeight: {
-      type: Number,
-      default: 6
-    },
-    // x轴文字长度
-    xTextLength: {
-      type: Number,
-      default: 3
-    }
-  },
-  setup(o) {
-    const e = o, l = w(null);
-    let n = null;
-    const s = e.data, p = [...new Set(s.map((t) => t.axis))], d = s.reduce((t, r) => {
-      const i = t.find((a) => a.name === r.name);
-      return i ? i.data.push(parseInt(r.data)) : t.push({ name: r.name, type: r.type, data: [parseInt(r.data)] }), t;
-    }, []).map((t) => ({
-      name: t.name,
-      type: t.type,
-      data: p.map((r) => {
-        const i = s.find(
-          (a) => a.axis === r && a.name === t.name
-        );
-        return i ? parseInt(i.data) : 0;
-      })
-    })), f = () => {
-      const t = "0123456789ABCDEF";
-      let r = "#";
-      for (let i = 0; i < 6; i++)
-        r += t[Math.floor(Math.random() * 16)];
-      return r;
-    }, v = x(() => ({
-      // 网格配置，设置图表上下左右的边距
-      grid: {
-        top: 30,
-        bottom: 30,
-        left: 40,
-        right: 20
-      },
-      // 提示框配置，当鼠标悬停在图表上时显示的信息
-      tooltip: {
-        trigger: "axis",
-        // 触发类型为坐标轴
-        formatter: e.tooltipHtml,
-        backgroundColor: e.tooltipBgColor,
-        borderColor: e.tooltipBorderColor,
-        textStyle: {
-          color: e.tooltipTextColor,
-          fontSize: e.tooltipTextFontSize,
-          fontFamily: "PingFang SC"
-        }
-      },
-      // 图例配置，显示图表中不同系列的名称和颜色
-      legend: {
-        show: e.legendItemShow,
-        right: "5%",
-        // 图例相对于右侧的位置
-        itemWidth: e.legendItemWidth,
-        itemHeight: e.legendItemHeight,
-        textStyle: {
-          color: e.legendTextColor,
-          fontSize: e.legendTextFontSize,
-          fontFamily: "PingFang SC"
-        },
-        // 过滤掉 type 为 line 的图例项
-        data: d.filter((t) => t.type !== "line").map((t) => t.name)
-      },
-      // x 轴配置
-      xAxis: [
-        {
-          type: "category",
-          data: p,
-          axisLabel: {
-            fontSize: 12,
-            color: e.xNameColor,
-            fontFamily: "PingFang SC",
-            // interval: 0,
-            formatter: function(t) {
-              return t.length > e.xTextLength ? t.slice(0, e.xTextLength) + "..." : t;
-            }
-          },
-          axisLine: {
-            show: !0,
-            lineStyle: {
-              color: e.xlineColor,
-              type: e.xLineType
-              // 虚线
-            }
-          },
-          axisTick: {
-            show: !1
-          },
-          splitLine: {
-            show: e.xLineShow,
-            // 显示网格线
-            lineStyle: {
-              type: e.xLineType,
-              // 虚线
-              color: e.lineColor
-              // 蓝色
-            }
-          }
-        }
-      ],
-      // y 轴配置
-      yAxis: [
-        {
-          type: "value",
-          name: "(人)",
-          nameTextStyle: {
-            color: e.yNameColor,
-            fontSize: 12,
-            fontFamily: "PingFang SC"
-          },
-          axisLine: {
-            show: e.yLineShow,
-            // 显示网格线
-            lineStyle: {
-              type: e.yLineType,
-              // 虚线
-              color: e.lineColor
-              // 蓝色
-            }
-          },
-          axisTick: {
-            show: !1
-          },
-          splitLine: {
-            show: e.yLineShow,
-            // 显示网格线
-            lineStyle: {
-              type: e.yLineType,
-              // 虚线
-              color: e.lineColor
-              // 蓝色
-            }
-          },
-          axisLabel: {
-            formatter: "{value}",
-            textStyle: {
-              fontSize: 12,
-              color: e.yColor,
-              fontFamily: "PingFang SC"
-            }
-          }
-        },
-        {
-          type: "value",
-          axisLabel: {
-            show: !1
-          },
-          axisLine: {
-            show: !1
-          },
-          axisTick: {
-            show: !1
-          },
-          splitLine: {
-            show: !1
-          }
-        }
-      ],
-      // 数据系列配置
-      series: d.map(({ name: t, type: r, data: i }, a) => {
-        var g, c, h;
-        if (r === "bar")
-          return {
-            name: t,
-            type: "bar",
-            barWidth: 6,
-            barGap: "90%",
-            barCategoryGap: "10%",
-            itemStyle: {
-              barBorderRadius: 4,
-              color: new N(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: ((g = e.colorData[a]) == null ? void 0 : g.dark) || f()
-                },
-                {
-                  offset: 1,
-                  color: ((c = e.colorData[a]) == null ? void 0 : c.light) || f()
-                }
-              ])
-            },
-            data: i
-          };
-        if (r === "line")
-          return {
-            name: t,
-            type: "line",
-            yAxisIndex: 1,
-            showSymbol: !1,
-            smooth: !0,
-            lineStyle: {
-              color: ((h = e.colorData[a]) == null ? void 0 : h.dark) || f()
-            },
-            data: i
-          };
-      }),
-      // 数据缩放配置
-      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: (() => {
-            const t = e.data ? e.data.length : 0;
-            return t > 30 ? t / 1.7 : t > 23 ? t / 1.5 : t > 13 ? 50 : t > 7 ? 70 : 100;
-          })()
-          // maxSpan: 80,
-          // minSpan: 10,
-          // maxValueSpan: 3, // 最大缩放范围
-          // minValueSpan: 3, // 最小缩放范围
-        }
-      ],
-      animation: !0
-      // 禁用动画提升性能
-    })), m = x(
-      () => M({}, v.value, e.options)
-    ), L = () => {
-      l.value && (n = B(
-        l.value,
-        {},
-        {
-          renderer: "svg"
-        }
-      ), u(), n.dispatchAction({
-        type: "takeGlobalCursor",
-        key: "dataZoomSelect",
-        dataZoomSelectActive: !0
-      }));
-    }, u = () => {
-      n && (n.setOption(m.value, !0), D(() => n.resize()));
-    }, y = () => {
-      n == null || n.resize({ animation: { duration: 300 } });
-    };
-    return S(
-      () => e.data,
-      (t, r) => {
-        JSON.stringify(t) !== JSON.stringify(r) && u();
-      },
-      { deep: !0 }
-    ), S(m, u), b(() => {
-      L(), window.addEventListener("resize", y);
-    }), T(() => {
-      window.removeEventListener("resize", y), n == null || n.dispose(), n = null;
-    }), (t, r) => (z(), k("div", F({
-      ref_key: "chartContainer",
-      ref: l
-    }, t.$attrs, { class: "echarts-container" }), null, 16));
-  }
-}, C = /* @__PURE__ */ $(I, [["__scopeId", "data-v-1912f93d"]]);
-C.install = (o) => {
-  o.component("MultiDataColumnDiagram", C);
-};
-export {
-  C as default
-};