feat: add countTo example

src/views/components/countTo/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div style="margin:10px">
+    <el-row :gutter="10">
+      <el-col :span="10">
+        <el-card shadow="always">
+          <CountTo prefix="$" :color="'#409EFF'" :startVal="1" :endVal="1000" />
+        </el-card>
+      </el-col>
+      <el-col :span="10">
+        <el-card shadow="always">
+          <CountTo prefix="$" :color="'green'" :startVal="1" :endVal="1500" />
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script lang='ts'>
+import CountTo from "../../../components/countTo/src/index.vue";
+export default {
+  components: {
+    CountTo
+  },
+  setup() {
+    return {};
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-card) {
+  text-align: center;
+}
+</style>

src/views/welcome.vue

@@ -17,19 +17,17 @@
 
     <!-- 图表 -->
     <el-card class="box-card">
-    <el-skeleton  style="height: 50vh" :rows="8" :loading="loading" animated>
-      <template #default>
+      <el-skeleton style="height: 50vh" :rows="8" :loading="loading" animated>
+        <template #default>
           <div id="brokenLine"></div>
-      </template>
-    </el-skeleton>
+        </template>
+      </el-skeleton>
     </el-card>
-    <!-- <CountTo prefix="$" :startVal="1" :endVal="200" /> -->
   </div>
 </template>
 
 <script lang='ts'>
 import flop from "../components/flop/index.vue";
-import CountTo from "../components/countTo/src/index.vue";
 import { ref, computed, onMounted, inject, nextTick } from "vue";
 import { deviceDetection } from "../utils/deviceDetection";
 import { echartsJson } from "../api/mock";
@@ -39,8 +37,7 @@ let brokenLine: any = null; //折线图实例
 export default {
   name: "welcome",
   components: {
-    flop,
-    CountTo,
+    flop
   },
   setup() {
     let mobile = ref(deviceDetection());
@@ -50,9 +47,9 @@ export default {
 
     setTimeout(() => {
       loading.value = !loading.value;
-      nextTick(()=>{
+      nextTick(() => {
         initbrokenLine();
-      })
+      });
     }, 2000);
 
     let greetings = computed(() => {
@@ -74,39 +71,39 @@ export default {
         brokenLine.setOption({
           title: {
             text: "上海 空气质量指数",
-            left: "1%",
+            left: "1%"
           },
           tooltip: {
-            trigger: "axis",
+            trigger: "axis"
           },
           grid: {
             left: "5%",
             right: "15%",
-            bottom: "10%",
+            bottom: "10%"
           },
           xAxis: {
-            data: info.map(function (item) {
+            data: info.map(function(item) {
               return item[0];
-            }),
+            })
           },
           yAxis: {},
           toolbox: {
             right: 10,
             feature: {
               dataZoom: {
-                yAxisIndex: "none",
+                yAxisIndex: "none"
               },
               restore: {},
-              saveAsImage: {},
-            },
+              saveAsImage: {}
+            }
           },
           dataZoom: [
             {
-              startValue: "2014-06-01",
+              startValue: "2014-06-01"
             },
             {
-              type: "inside",
-            },
+              type: "inside"
+            }
           ],
           visualMap: {
             top: 50,
@@ -115,78 +112,78 @@ export default {
               {
                 gt: 0,
                 lte: 50,
-                color: "#93CE07",
+                color: "#93CE07"
               },
               {
                 gt: 50,
                 lte: 100,
-                color: "#FBDB0F",
+                color: "#FBDB0F"
               },
               {
                 gt: 100,
                 lte: 150,
-                color: "#FC7D02",
+                color: "#FC7D02"
               },
               {
                 gt: 150,
                 lte: 200,
-                color: "#FD0100",
+                color: "#FD0100"
               },
               {
                 gt: 200,
                 lte: 300,
-                color: "#AA069F",
+                color: "#AA069F"
               },
               {
                 gt: 300,
-                color: "#AC3B2A",
-              },
+                color: "#AC3B2A"
+              }
             ],
             outOfRange: {
-              color: "#999",
-            },
+              color: "#999"
+            }
           },
           series: {
             name: "上海 空气质量指数",
             type: "line",
-            data: info.map(function (item) {
+            data: info.map(function(item) {
               return item[1];
             }),
             markLine: {
               silent: true,
               lineStyle: {
-                color: "#333",
+                color: "#333"
               },
               data: [
                 {
-                  yAxis: 50,
+                  yAxis: 50
                 },
                 {
-                  yAxis: 100,
+                  yAxis: 100
                 },
                 {
-                  yAxis: 150,
+                  yAxis: 150
                 },
                 {
-                  yAxis: 200,
+                  yAxis: 200
                 },
                 {
-                  yAxis: 300,
-                },
-              ],
-            },
-          },
+                  yAxis: 300
+                }
+              ]
+            }
+          }
         });
       });
     };
 
-    const openDepot = ():void => {
-      window.open('https://github.com/xiaoxian521/vue-pure-admin')
-    }
+    const openDepot = (): void => {
+      window.open("https://github.com/xiaoxian521/vue-pure-admin");
+    };
 
     onMounted(() => {
       useEventListener("resize", () => {
-        if(!brokenLine) return;
+        if (!brokenLine) return;
         brokenLine.resize();
       });
     });
@@ -197,7 +194,7 @@ export default {
       loading,
       openDepot
     };
-  },
+  }
 };
 </script>