smart-web-ui 1.0.0 → 1.0.1

package/dist/MultiDataColumnDiagram.js

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