smart-web-ui 1.0.0 → 1.0.1

package/dist/MultitermBorderColumnDiagram.js

@@ -0,0 +1,384 @@
+import { ref as g, computed as d, watch as m, onMounted as c, onBeforeUnmount as S, openBlock as h, createElementBlock as x, mergeProps as C, nextTick as b } from "vue";
+import { L as v, i as L } from "./chunks/index-CBkwld9S.js";
+import { _ as F } from "./chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+import { m as w } from "./chunks/merge-H4ZkNr1T.js";
+const z = {
+  __name: "MultitermBorderColumnDiagram",
+  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: "rgba(255, 255, 255, 0.15)"
+    },
+    // 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: "solid"
+      //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(n) {
+    const e = n, i = g(null);
+    let o = null;
+    const p = d(() => ({
+      // 网格配置，设置图表上下左右的边距
+      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"
+          // 提示框文字字体
+        },
+        // 自定义提示框内容
+        formatter: function(t) {
+          let a = `<div>${t[0].name}</div>`;
+          return t.filter((r) => r.seriesName === e.seriesName).forEach((r) => {
+            a += `<div style="display: flex; align-items: center;">
+          <span></span>
+          ${r.seriesName}: ${r.value}
+        </div>`;
+          }), a;
+        }
+      },
+      // 图例配置，显示图表中不同系列的名称和颜色
+      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: !1,
+            // 显示网格线
+            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: '背景',
+          show: !1,
+          type: "bar",
+          barWidth: 15,
+          barGap: "-100%",
+          data: (e.data || []).map((t) => (t == null ? void 0 : t.value) + 20 || ""),
+          itemStyle: {
+            normal: {
+              color: "rgba(0,0,0,0)",
+              borderColor: "rgba(61, 115, 255, 0.50)"
+            }
+          }
+          // z: ,
+        },
+        {
+          name: e.seriesName,
+          // 数据系列的名称
+          type: "pictorialBar",
+          // 图表类型为柱状图
+          animationDuration: 0,
+          legendHoverLink: !1,
+          symbolRepeat: "true",
+          symbolMargin: "20%",
+          symbolClip: !0,
+          symbol: "rect",
+          symbolSize: [6, 8],
+          itemStyle: {
+            // 柱子的颜色使用线性渐变
+            color: new v(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: !1,
+              // 显示柱子上的标签
+              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
+      // 禁用动画提升性能
+    })), s = d(
+      () => w({}, p.value, e.options)
+    ), y = () => {
+      i.value && (o = L(
+        i.value,
+        {},
+        {
+          renderer: "svg"
+        }
+      ), l(), o.dispatchAction({
+        type: "takeGlobalCursor",
+        key: "dataZoomSelect",
+        dataZoomSelectActive: !0
+      }));
+    }, l = () => {
+      o && (o.setOption(s.value, !0), b(() => o.resize()));
+    }, f = () => {
+      o == null || o.resize({ animation: { duration: 300 } });
+    };
+    return m(
+      () => e.data,
+      (t, a) => {
+        JSON.stringify(t) !== JSON.stringify(a) && l();
+      },
+      { deep: !0 }
+    ), m(s, l), c(() => {
+      y(), window.addEventListener("resize", f);
+    }), S(() => {
+      window.removeEventListener("resize", f), o == null || o.dispose(), o = null;
+    }), (t, a) => (h(), x("div", C({
+      ref_key: "chartContainer",
+      ref: i
+    }, t.$attrs, { class: "echarts-container" }), null, 16));
+  }
+}, u = /* @__PURE__ */ F(z, [["__scopeId", "data-v-e8898803"]]);
+u.install = (n) => {
+  n.component("MultitermBorderColumnDiagram", u);
+};
+export {
+  u as default
+};