新增 折线图组件

src/components/LineChart.vue

@@ -0,0 +1,157 @@
+<template>
+  <div id="lineChartRef"></div>
+</template>
+
+<script>
+import { ref, onMounted, computed, inject } from "vue";
+import { mapState } from "vuex";
+import exchangeUrl from "utils/exchangeUrl";
+
+export default {
+  setup() {
+    let echarts = inject("ec");
+
+    let lineChart = ref({});
+    let option = ref({
+      title: {
+        text: "汇很多航运数字经济区块链认证",
+        textStyle: {
+          fontSize: "16",
+          fontFamily: " PingFangSC-Semibold, PingFang SC",
+          fontWeight: 600,
+          color: " #F9FFFF",
+        },
+        top: "45",
+        left: "40",
+      },
+      legend: {
+        data: ["货种", "吨位"],
+        bottom: "10px",
+        icon: "path://M102.4 443.904h819.2v136.704H102.4z",
+        textStyle: {
+          fontSize: "12",
+          fontFamily: "PingFangSC-Regular, PingFang SC",
+          fontWeight: 400,
+          color: " #9199A3",
+        },
+        itemGap: 50,
+      },
+      grid: {
+        top: "110",
+        left: "40",
+        right: "40",
+        bottom: "50",
+        containLabel: true,
+      },
+      xAxis: {
+        type: "category",
+        boundaryGap: false,
+        data: [
+          "9-21 00:00",
+          "9-21 00:00",
+          "9-22 00:00",
+          "9-23 00:00",
+          "9-24 00:00",
+          "9-25 00:00",
+          "9-26 00:00",
+        ],
+      },
+      yAxis: {
+        type: "value",
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: "dashed", //默认实线，dashed虚线
+          width: 10,
+          color: "#000",
+        },
+      },
+      series: [
+        {
+          name: "货种",
+          data: [0.42, 0.35, 0.71, 0.67, 0.85, 0.52, 0.79],
+          type: "line",
+          symbolSize: 0,
+
+          itemStyle: {
+            lineStyle: {
+              color: "#5B8FF9",
+            },
+          },
+          areaStyle: {
+            //右，下，左，上
+            color: new echarts.graphic.LinearGradient(
+              0,
+              0,
+              0,
+              1,
+              [
+                {
+                  offset: 0,
+                  color: "#091e3b",
+                },
+                {
+                  offset: 1,
+                  color: "#1b293c",
+                },
+              ],
+              false
+            ),
+          },
+        },
+        {
+          name: "吨位",
+          data: [0.32, 0.25, 0.51, 0.37, 0.65, 0.32, 0.69],
+          type: "line",
+          symbolSize: 0,
+          itemStyle: {
+            lineStyle: {
+              color: "#5AD8A6",
+            },
+          },
+          areaStyle: {
+            //右，下，左，上
+            color: new echarts.graphic.LinearGradient(
+              0,
+              0,
+              0,
+              1,
+              [
+                {
+                  offset: 0,
+                  color: "#203748",
+                },
+                {
+                  offset: 1,
+                  color: "#1b293c",
+                },
+              ],
+              false
+            ),
+          },
+        },
+      ],
+      backgroundColor: "rgba(0, 0, 0, 0)",
+    });
+
+    function init() {
+      lineChart.value = echarts.init(document.getElementById("lineChartRef"));
+      lineChart.value.setOption(option.value);
+    }
+    onMounted(() => {
+      init();
+    });
+    return {
+      init,
+      exchangeUrl,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+#id {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/main.js

@@ -23,7 +23,9 @@ import Swiper from "comps/Swiper.vue";
 import DamCard from "comps/DamCard.vue";
 import PortsCard from "comps/PortsCard.vue";
 import Warning from "comps/Warning.vue";
+import LineChart from "comps/LineChart.vue";
 
+app.component("LineChart", LineChart);
 app.component("Warning", Warning);
 app.component("PortsCard", PortsCard);
 app.component("DamCard", DamCard);