smart-web-ui 1.0.0 → 1.0.1

package/dist/DoubleLineChart.js

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