.

src/components/ECharts/index.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="echart"></div>
+  <div class="echart" />
 </template>
 
 <script>
 // 按需导入模块
 // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
-import * as echarts from 'echarts/core';
+import * as echarts from 'echarts/core'
 // 引入图表，图表后缀都为 Chart
-import { LineChart } from 'echarts/charts';
+import { LineChart } from 'echarts/charts'
 // 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
 import {
   TitleComponent,
@@ -15,11 +15,11 @@ import {
   GridComponent,
   DatasetComponent,
   TransformComponent
-} from 'echarts/components';
+} from 'echarts/components'
 // 标签自动布局，全局过渡动画等特性
-import { LabelLayout, UniversalTransition } from 'echarts/features';
+import { LabelLayout, UniversalTransition } from 'echarts/features'
 // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
-import { CanvasRenderer } from 'echarts/renderers';
+import { CanvasRenderer } from 'echarts/renderers'
 
 // 注册必须的组件
 echarts.use([
@@ -32,8 +32,7 @@ echarts.use([
   LabelLayout,
   UniversalTransition,
   CanvasRenderer
-]);
-
+])
 
 export default {
   name: 'ECharts',
@@ -46,7 +45,7 @@ export default {
   },
   data() {
     return {
-      echartsRef: undefined,
+      echartsRef: undefined
     }
   },
   watch: {
@@ -54,13 +53,12 @@ export default {
       handler(v) {
         if (this.echartsRef) {
           this.echartsRef.setOption(v)
-          console.log('-------------', v)
         }
       },
       immediate: true
     },
     loading(nw) {
-      if (!this.echartsRef) return;
+      if (!this.echartsRef) return
 
       if (nw) {
         this.echartsRef.showLoading()

src/views/dashboard/components/Statistic.vue

@@ -1,7 +1,7 @@
 <template>
   <el-card class="stat-card">
-    <div class="stat-card_title">{{title}}</div>
-    <div class="stat-card_content">{{value}}</div>
+    <div class="stat-card_title">{{ title }}</div>
+    <div class="stat-card_content">{{ value }}</div>
   </el-card>
 </template>
 
@@ -10,7 +10,7 @@ export default {
   name: 'Statistic',
   props: {
     title: [String, Number],
-    value: String,
+    value: [String, Number]
   }
 }
 </script>

src/views/dashboard/index.vue

@@ -14,7 +14,7 @@
       </el-col>
     </el-row>
 
-    <el-row class="sec" type="flex" justify="space-between" gutter="24">
+    <el-row class="sec" type="flex" justify="space-between" :gutter="20">
       <el-col :span="12">
         <el-card>
           <div slot="header">
@@ -46,7 +46,20 @@ export default {
   name: 'Dashboard',
   components: {
     Statistic: () => import('./components/Statistic.vue'),
-    LineChart: () => import('@/components/ECharts/Line.vue'),
+    LineChart: () => import('@/components/ECharts/Line.vue')
+  },
+  data() {
+    return {
+      total: {},
+      today: new Date(),
+      days: 15, // 默认统计 15 天的
+      pv: [],
+      uv: [],
+      loading: {
+        pv: false,
+        uv: false
+      }
+    }
   },
   computed: {
     ...mapGetters(['name']),
@@ -60,20 +73,7 @@ export default {
 
       return {
         startDate: `${year}-${formateNum(mon)}-${formateNum(dt)}`,
-        days: this.days,
-      }
-    }
-  },
-  data() {
-    return {
-      total: {},
-      today: new Date(),
-      days: 15, // 默认统计 15 天的
-      pv: [],
-      uv: [],
-      loading: {
-        pv: false,
-        uv: false,
+        days: this.days
       }
     }
   },