feat: add echarts

src/views/welcome.vue

@@ -12,6 +12,15 @@
         <flop v-if="!mobile" />
       </div>
     </el-affix>
+
+    <!-- 图表 -->
+    <el-card class="box-card">
+    <el-skeleton  style="height: 50vh" :rows="8" :loading="loading" animated>
+      <template #default>
+          <div id="brokenLine"></div>
+      </template>
+    </el-skeleton>
+    </el-card>
     <!-- <a title="欢迎Star" href="https://github.com/xiaoxian521/CURD-TS" target="_blank">点击打开仓库地址</a> -->
     <!-- <CountTo prefix="$" :startVal="1" :endVal="200" /> -->
   </div>
@@ -20,9 +29,11 @@
 <script lang='ts'>
 import flop from "../components/flop/index.vue";
 import CountTo from "../components/countTo/src/index.vue";
-import { ref, unref, computed } from "vue";
+import { ref, computed, onMounted, inject, nextTick } from "vue";
 import { deviceDetection } from "../utils/deviceDetection";
-import echarts from "../echarts"
+import { echartsJson } from "../api/mock";
+
+let brokenLine: any = null; //折线图实例
 export default {
   name: "welcome",
   components: {
@@ -30,9 +41,17 @@ export default {
     CountTo,
   },
   setup() {
-    console.log('echarts===>', echarts)
     let mobile = ref(deviceDetection());
     let date: Date = new Date();
+    let loading = ref(true);
+    let echarts = inject("echarts"); //引入
+
+    setTimeout(() => {
+      loading.value = !loading.value;
+      nextTick(()=>{
+        initbrokenLine();
+      })
+    }, 2000);
 
     let greetings = computed(() => {
       if (date.getHours() >= 0 && date.getHours() < 12) {
@@ -44,9 +63,131 @@ export default {
       }
     });
 
+    let initbrokenLine = (): any => {
+      // @ts-ignore
+      brokenLine = echarts.init(document.getElementById("brokenLine"));
+      brokenLine.clear(); //清除旧画布 重新渲染
+
+      echartsJson().then(({ info }) => {
+        brokenLine.setOption({
+          title: {
+            text: "上海 空气质量指数",
+            left: "1%",
+          },
+          tooltip: {
+            trigger: "axis",
+          },
+          grid: {
+            left: "5%",
+            right: "15%",
+            bottom: "10%",
+          },
+          xAxis: {
+            data: info.map(function (item) {
+              return item[0];
+            }),
+          },
+          yAxis: {},
+          toolbox: {
+            right: 10,
+            feature: {
+              dataZoom: {
+                yAxisIndex: "none",
+              },
+              restore: {},
+              saveAsImage: {},
+            },
+          },
+          dataZoom: [
+            {
+              startValue: "2014-06-01",
+            },
+            {
+              type: "inside",
+            },
+          ],
+          visualMap: {
+            top: 50,
+            right: 10,
+            pieces: [
+              {
+                gt: 0,
+                lte: 50,
+                color: "#93CE07",
+              },
+              {
+                gt: 50,
+                lte: 100,
+                color: "#FBDB0F",
+              },
+              {
+                gt: 100,
+                lte: 150,
+                color: "#FC7D02",
+              },
+              {
+                gt: 150,
+                lte: 200,
+                color: "#FD0100",
+              },
+              {
+                gt: 200,
+                lte: 300,
+                color: "#AA069F",
+              },
+              {
+                gt: 300,
+                color: "#AC3B2A",
+              },
+            ],
+            outOfRange: {
+              color: "#999",
+            },
+          },
+          series: {
+            name: "上海 空气质量指数",
+            type: "line",
+            data: info.map(function (item) {
+              return item[1];
+            }),
+            markLine: {
+              silent: true,
+              lineStyle: {
+                color: "#333",
+              },
+              data: [
+                {
+                  yAxis: 50,
+                },
+                {
+                  yAxis: 100,
+                },
+                {
+                  yAxis: 150,
+                },
+                {
+                  yAxis: 200,
+                },
+                {
+                  yAxis: 300,
+                },
+              ],
+            },
+          },
+        });
+      });
+    };
+
+    onMounted(() => {
+      window.addEventListener("resize", () => {
+        brokenLine.resize();
+      });
+    });
+
     return {
       greetings,
       mobile,
+      loading,
     };
   },
 };
@@ -55,6 +196,7 @@ export default {
 <style lang="scss" scoped>
 .welcome {
   width: 100%;
+  height: 100%;
   margin-top: 1px;
   .top-content {
     display: flex;
@@ -75,5 +217,14 @@ export default {
       }
     }
   }
+  .box-card {
+    width: 80vw;
+    margin: 10px auto;
+    position: relative;
+    #brokenLine {
+      width: 100%;
+      height: 50vh;
+    }
+  }
 }
 </style>