feat: add echarts

mock/echarts.ts

@@ -0,0 +1,23 @@
+import { MockMethod } from 'vite-plugin-mock'
+
+// http://mockjs.com/examples.html#Object
+const echartsList = (): any => {
+  const result: any[] = []
+  for (let index = 0; index < 200; index++) {
+    result.push(['@date', Math.floor(Math.random() * 300)])
+  }
+  return result
+}
+
+export default [
+  {
+    url: '/getEchartsInfo',
+    method: 'get',
+    response: () => {
+      return {
+        code: 0,
+        info: echartsList()
+      }
+    },
+  }
+] as MockMethod[]

src/App.vue

@@ -1,3 +1,14 @@
 <template>
   <router-view />
 </template>
+<script lang='ts'>
+
+import * as echarts from 'echarts'
+import { provide } from 'vue'
+
+export default {
+  setup(){
+    provide('echarts', echarts)
+  }
+}
+</script>

src/api/map.ts

@@ -1,6 +0,0 @@
-
-import { http } from "../utils/http"
-
-export const mapJson = (data?: object): any => {
-  return http.request("get", "/getMapInfo", data)
-}

src/api/mock.ts

@@ -0,0 +1,12 @@
+
+import { http } from "../utils/http"
+
+// 地图数据
+export const mapJson = (data?: object): any => {
+  return http.request("get", "/getMapInfo", data)
+}
+
+// echarts数据
+export const echartsJson = (data?: object): any => {
+  return http.request("get", "/getEchartsInfo", data)
+}

src/components/map/amap.vue

@@ -19,7 +19,7 @@ import {
   getCurrentInstance,
 } from "vue";
 
-import { mapJson } from "../../api/map";
+import { mapJson } from "../../api/mock";
 import greenCar from "/@/assets/green.png";
 import { deviceDetection } from "../../utils/deviceDetection"
 

src/mockProdServer.ts

@@ -1,7 +1,8 @@
 import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'
 import mapMock from '../mock/map'
+import echartsMock from '../mock/echarts'
 
-export const mockModules = [...mapMock]
+export const mockModules = [...mapMock, ...echartsMock]
 
 export function setupProdMockServer() {
   createProdMockServer(mockModules)

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>