smart-web-ui 1.0.1 → 1.0.2

package/dist/DoubleLineChart.js

@@ -1,410 +0,0 @@
-import { ref as L, computed as c, watch as y, onMounted as F, onBeforeUnmount as z, openBlock as T, createElementBlock as Y, mergeProps as D, nextTick as w } from "vue";
-import { L as v, i as k } from "./chunks/index-CBkwld9S.js";
-import { _ as N } from "./chunks/_plugin-vue_export-helper-CHgC5LLL.js";
-import { m as R } from "./chunks/merge-H4ZkNr1T.js";
-const U = {
-  __name: "DoubleLineChart",
-  props: {
-    data: {
-      type: Array,
-      required: !0
-    },
-    options: {
-      type: Object,
-      default: () => ({})
-    },
-    // 数据颜色
-    colorData: {
-      type: Array,
-      default: () => [
-        {
-          light: "rgba(41, 104, 233, 0.1)",
-          dark: "rgba(54, 220, 255, 0.8)"
-        },
-        {
-          light: "rgba(6, 187, 61, 0.1)",
-          dark: "rgba(54, 255, 182, 0.8)"
-        }
-      ]
-    },
-    // 上边距
-    gridTop: {
-      type: String,
-      default: "40"
-    },
-    // 下边距
-    gridBottom: {
-      type: String,
-      default: "10"
-    },
-    // 左边距
-    gridLeft: {
-      type: String,
-      default: "10"
-    },
-    // 右边距
-    gridRight: {
-      type: String,
-      default: "30"
-    },
-    // 移入提示框背景颜色
-    tooltipBgColor: {
-      type: String,
-      default: "rgba(1, 13, 19, 0.6)"
-    },
-    // 移入提示框边框颜色
-    tooltipBorderColor: {
-      type: String,
-      default: "#ffffff40"
-    },
-    // 移入提示框文字颜色
-    tooltipTextColor: {
-      type: String,
-      default: "#ffffff"
-    },
-    // 移入提示框文字大小
-    tooltipTextFontSize: {
-      type: Number,
-      default: 12
-    },
-    // legend块的宽度
-    legendItemWidth: {
-      type: Number,
-      default: 12
-    },
-    // legend块的高度
-    legendItemHeight: {
-      type: Number,
-      default: 12
-    },
-    // legend文字大小
-    legendTextFontSize: {
-      type: Number,
-      default: 12
-    },
-    // legend文字颜色
-    legendTextColor: {
-      type: String,
-      default: "#fff"
-    },
-    // x底轴颜色
-    XlineColor: {
-      type: String,
-      default: "#526B8E"
-    },
-    // x轴文字大小
-    XTextFontSize: {
-      type: Number,
-      default: 12
-    },
-    // x轴文字颜色
-    XNameColor: {
-      type: String,
-      default: "#fff"
-    },
-    // 单位文字-左侧
-    YUnitLeftText: {
-      type: String,
-      default: "单位(t)"
-    },
-    // 单位文字颜色-左侧
-    YUnitLeftColor: {
-      type: String,
-      default: "#fff"
-    },
-    // 单位文字大小-左侧
-    YUnitLeftFontSize: {
-      type: Number,
-      default: 12
-    },
-    // 单位文字-右侧
-    YUnitRightText: {
-      type: String,
-      default: "单位:(kw.h)"
-    },
-    // 单位文字颜色-右侧
-    YUnitRightColor: {
-      type: String,
-      default: "#fff"
-    },
-    // 单位文字大小-右侧
-    YUnitRightFontSize: {
-      type: Number,
-      default: 12
-    },
-    // 横轴网格线颜色
-    YLineColor: {
-      type: String,
-      default: "#526B8E20"
-    },
-    // 横轴网格线类型
-    YLineType: {
-      type: String,
-      default: "solid"
-      //solid实线dashed虚线dotted细点画线
-    },
-    // Y轴刻度文字大小
-    YFontSize: {
-      type: Number,
-      default: 12
-    },
-    // Y轴名称颜色
-    YColor: {
-      type: String,
-      default: "#fff"
-    },
-    // 左侧折线颜色
-    LeftlineColor: {
-      type: String,
-      default: "rgba(0, 149, 255, 1)"
-    },
-    // 右侧折线颜色
-    RightlineColor: {
-      type: String,
-      default: "rgba(206, 192, 55, 1)"
-    },
-    // 刻度宽度
-    scaleWidth: {
-      type: Number,
-      default: 15
-    },
-    // 刻度高度
-    scaleHeight: {
-      type: Number,
-      default: 5
-    },
-    // 左侧移入提示文案
-    tooltipLeftHtml: {
-      type: Function,
-      default: function(a) {
-        return a + "位";
-      }
-    },
-    // 右侧移入提示文案
-    tooltipRightHtml: {
-      type: Function,
-      default: function(a) {
-        return a + "个";
-      }
-    }
-  },
-  setup(a) {
-    const t = a, f = L(null);
-    let e = null;
-    const S = t.data.reduce(
-      (o, r) => {
-        const { axis: i, name: n, data: l } = r;
-        o.axisData.includes(i) || o.axisData.push(i);
-        const u = o.targetData.find((b) => b.name === n);
-        return u ? u.data.push(l) : o.targetData.push({
-          name: n,
-          data: [l]
-        }), o;
-      },
-      { axisData: [], targetData: [] }
-    ), { axisData: h, targetData: g } = S, C = c(() => ({
-      grid: {
-        top: t.gridTop,
-        bottom: t.gridBottom,
-        left: t.gridLeft,
-        right: t.gridRight,
-        containLabel: !0
-      },
-      tooltip: {
-        trigger: "axis",
-        backgroundColor: t.tooltipBgColor,
-        borderColor: t.tooltipBorderColor,
-        textStyle: {
-          color: t.tooltipTextColor,
-          fontSize: t.tooltipTextFontSize,
-          fontFamily: "PingFang SC"
-        },
-        axisPointer: {
-          snap: !0,
-          type: "line",
-          lineStyle: {
-            color: "#fff",
-            // 线的颜色
-            width: 1,
-            // 线宽
-            type: "dashed"
-            // 线型
-          }
-        }
-      },
-      legend: {
-        icon: "circle",
-        itemWidth: t.legendItemWidth,
-        itemHeight: t.legendItemHeight,
-        textStyle: {
-          color: t.legendTextColor,
-          fontSize: t.legendTextFontSize,
-          fontFamily: "PingFang SC"
-        }
-      },
-      xAxis: [
-        {
-          type: "category",
-          data: h,
-          boundaryGap: !1,
-          splitLine: {
-            show: !1
-          },
-          axisTick: {
-            show: !1
-          },
-          axisLine: {
-            lineStyle: {
-              color: t.XlineColor
-            }
-          },
-          axisLabel: {
-            align: "center",
-            interval: 0,
-            fontSize: t.XTextFontSize,
-            color: t.XNameColor,
-            fontFamily: "PingFang SC"
-          }
-        }
-      ],
-      yAxis: [
-        {
-          type: "value",
-          name: t.YUnitLeftText,
-          nameTextStyle: {
-            align: "right",
-            fontSize: t.YUnitLeftFontSize,
-            color: t.YUnitLeftColor,
-            fontFamily: "PingFang SC"
-          },
-          minInterval: 1,
-          //可以设置成1保证坐标轴分割刻度显示成整数
-          splitLine: {
-            show: !0,
-            // 显示第一个Y轴网格线
-            lineStyle: {
-              color: t.YLineColor,
-              width: 1,
-              type: t.YLineType
-            }
-          },
-          axisLabel: {
-            align: "right",
-            textStyle: {
-              fontSize: t.YFontSize,
-              color: t.YColor,
-              fontFamily: "PingFang SC"
-            },
-            margin: 20
-          },
-          axisTick: {
-            show: !0,
-            length: t.scaleWidth,
-            lineStyle: {
-              width: t.scaleHeight,
-              color: t.LeftlineColor
-            }
-          }
-        },
-        {
-          type: "value",
-          name: t.YUnitRightText,
-          nameTextStyle: {
-            align: "left",
-            fontSize: t.YUnitRightFontSize,
-            color: t.YUnitRightColor,
-            fontFamily: "PingFang SC"
-          },
-          splitLine: {
-            show: !1
-            // 第二个Y轴网格线 不显示
-          },
-          axisTick: {
-            show: !0,
-            length: t.scaleWidth,
-            lineStyle: {
-              width: t.scaleHeight,
-              color: t.RightlineColor
-            }
-          },
-          axisLabel: {
-            align: "left",
-            textStyle: {
-              fontSize: t.YFontSize,
-              color: t.YColor,
-              fontFamily: "PingFang SC"
-            },
-            margin: 20
-          }
-        }
-      ],
-      series: g.map(({ name: o, data: r }, i) => {
-        const n = {
-          type: "line",
-          smooth: !0,
-          showSymbol: !1,
-          tooltip: {
-            valueFormatter: i < g.length - 1 ? t.tooltipLeftHtml : t.tooltipRightHtml
-          },
-          areaStyle: {
-            normal: {
-              color: new v(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: t.colorData[i].dark ? t.colorData[i].dark : "rgba(54, 220, 255, 0.8)"
-                },
-                {
-                  offset: 1,
-                  color: t.colorData[i].light ? t.colorData[i].light : "rgba(41, 104, 233, 0.1)"
-                }
-              ])
-            }
-          }
-        }, l = {
-          name: o,
-          data: r,
-          ...n
-        };
-        return i === g.length - 1 ? (l.yAxisIndex = 1, l.itemStyle = { color: t.RightlineColor }) : l.itemStyle = { color: t.LeftlineColor }, l;
-      })
-    })), d = c(
-      () => R({}, C.value, t.options)
-    ), x = () => {
-      f.value && (e = k(
-        f.value,
-        {},
-        {
-          renderer: "svg"
-        }
-      ), s(), e.dispatchAction({
-        type: "takeGlobalCursor",
-        key: "dataZoomSelect",
-        dataZoomSelectActive: !0
-      }));
-    }, s = () => {
-      e && (e.setOption(d.value, !0), w(() => e.resize()));
-    }, p = () => {
-      e == null || e.resize({ animation: { duration: 300 } });
-    };
-    return y(
-      () => t.data,
-      (o, r) => {
-        JSON.stringify(o) !== JSON.stringify(r) && s();
-      },
-      { deep: !0 }
-    ), y(d, s), F(() => {
-      x(), window.addEventListener("resize", p);
-    }), z(() => {
-      window.removeEventListener("resize", p), e == null || e.dispose(), e = null;
-    }), (o, r) => (T(), Y("div", D({
-      ref_key: "chartContainer",
-      ref: f
-    }, o.$attrs, { class: "echarts-container" }), null, 16));
-  }
-}, m = /* @__PURE__ */ N(U, [["__scopeId", "data-v-985a3180"]]);
-m.install = (a) => {
-  a.component("DoubleLineChart", m);
-};
-export {
-  m as default
-};