李志伟 3 år sedan
förälder
incheckning
860df150ba

+ 9
- 11
src/components/ECharts/index.vue Visa fil

1
 <template>
1
 <template>
2
-  <div class="echart"></div>
2
+  <div class="echart" />
3
 </template>
3
 </template>
4
 
4
 
5
 <script>
5
 <script>
6
 // 按需导入模块
6
 // 按需导入模块
7
 // 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。
7
 // 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。
8
-import * as echarts from 'echarts/core';
8
+import * as echarts from 'echarts/core'
9
 // 引入图表,图表后缀都为 Chart
9
 // 引入图表,图表后缀都为 Chart
10
-import { LineChart } from 'echarts/charts';
10
+import { LineChart } from 'echarts/charts'
11
 // 引入提示框,标题,直角坐标系,数据集,内置数据转换器组件,组件后缀都为 Component
11
 // 引入提示框,标题,直角坐标系,数据集,内置数据转换器组件,组件后缀都为 Component
12
 import {
12
 import {
13
   TitleComponent,
13
   TitleComponent,
15
   GridComponent,
15
   GridComponent,
16
   DatasetComponent,
16
   DatasetComponent,
17
   TransformComponent
17
   TransformComponent
18
-} from 'echarts/components';
18
+} from 'echarts/components'
19
 // 标签自动布局,全局过渡动画等特性
19
 // 标签自动布局,全局过渡动画等特性
20
-import { LabelLayout, UniversalTransition } from 'echarts/features';
20
+import { LabelLayout, UniversalTransition } from 'echarts/features'
21
 // 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
21
 // 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
22
-import { CanvasRenderer } from 'echarts/renderers';
22
+import { CanvasRenderer } from 'echarts/renderers'
23
 
23
 
24
 // 注册必须的组件
24
 // 注册必须的组件
25
 echarts.use([
25
 echarts.use([
32
   LabelLayout,
32
   LabelLayout,
33
   UniversalTransition,
33
   UniversalTransition,
34
   CanvasRenderer
34
   CanvasRenderer
35
-]);
36
-
35
+])
37
 
36
 
38
 export default {
37
 export default {
39
   name: 'ECharts',
38
   name: 'ECharts',
46
   },
45
   },
47
   data() {
46
   data() {
48
     return {
47
     return {
49
-      echartsRef: undefined,
48
+      echartsRef: undefined
50
     }
49
     }
51
   },
50
   },
52
   watch: {
51
   watch: {
54
       handler(v) {
53
       handler(v) {
55
         if (this.echartsRef) {
54
         if (this.echartsRef) {
56
           this.echartsRef.setOption(v)
55
           this.echartsRef.setOption(v)
57
-          console.log('-------------', v)
58
         }
56
         }
59
       },
57
       },
60
       immediate: true
58
       immediate: true
61
     },
59
     },
62
     loading(nw) {
60
     loading(nw) {
63
-      if (!this.echartsRef) return;
61
+      if (!this.echartsRef) return
64
 
62
 
65
       if (nw) {
63
       if (nw) {
66
         this.echartsRef.showLoading()
64
         this.echartsRef.showLoading()

+ 3
- 3
src/views/dashboard/components/Statistic.vue Visa fil

1
 <template>
1
 <template>
2
   <el-card class="stat-card">
2
   <el-card class="stat-card">
3
-    <div class="stat-card_title">{{title}}</div>
4
-    <div class="stat-card_content">{{value}}</div>
3
+    <div class="stat-card_title">{{ title }}</div>
4
+    <div class="stat-card_content">{{ value }}</div>
5
   </el-card>
5
   </el-card>
6
 </template>
6
 </template>
7
 
7
 
10
   name: 'Statistic',
10
   name: 'Statistic',
11
   props: {
11
   props: {
12
     title: [String, Number],
12
     title: [String, Number],
13
-    value: String,
13
+    value: [String, Number]
14
   }
14
   }
15
 }
15
 }
16
 </script>
16
 </script>

+ 16
- 16
src/views/dashboard/index.vue Visa fil

14
       </el-col>
14
       </el-col>
15
     </el-row>
15
     </el-row>
16
 
16
 
17
-    <el-row class="sec" type="flex" justify="space-between" gutter="24">
17
+    <el-row class="sec" type="flex" justify="space-between" :gutter="20">
18
       <el-col :span="12">
18
       <el-col :span="12">
19
         <el-card>
19
         <el-card>
20
           <div slot="header">
20
           <div slot="header">
46
   name: 'Dashboard',
46
   name: 'Dashboard',
47
   components: {
47
   components: {
48
     Statistic: () => import('./components/Statistic.vue'),
48
     Statistic: () => import('./components/Statistic.vue'),
49
-    LineChart: () => import('@/components/ECharts/Line.vue'),
49
+    LineChart: () => import('@/components/ECharts/Line.vue')
50
+  },
51
+  data() {
52
+    return {
53
+      total: {},
54
+      today: new Date(),
55
+      days: 15, // 默认统计 15 天的
56
+      pv: [],
57
+      uv: [],
58
+      loading: {
59
+        pv: false,
60
+        uv: false
61
+      }
62
+    }
50
   },
63
   },
51
   computed: {
64
   computed: {
52
     ...mapGetters(['name']),
65
     ...mapGetters(['name']),
60
 
73
 
61
       return {
74
       return {
62
         startDate: `${year}-${formateNum(mon)}-${formateNum(dt)}`,
75
         startDate: `${year}-${formateNum(mon)}-${formateNum(dt)}`,
63
-        days: this.days,
64
-      }
65
-    }
66
-  },
67
-  data() {
68
-    return {
69
-      total: {},
70
-      today: new Date(),
71
-      days: 15, // 默认统计 15 天的
72
-      pv: [],
73
-      uv: [],
74
-      loading: {
75
-        pv: false,
76
-        uv: false,
76
+        days: this.days
77
       }
77
       }
78
     }
78
     }
79
   },
79
   },