smart-web-ui 1.0.1 → 1.0.2

package/dist/MultitermBorderColumnDiagram.js

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