1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
| <template>
| <div>
| <Chart :cdata="cdata" />
| </div>
| </template>
|
| <script>
| import Chart from "./chart.vue";
| export default {
| data() {
| return {
| drawTiming: null,
| cdata: {
| year: null,
| weekCategory: [],
| radarData: [],
| radarDataAvg: [],
| maxData: 500,
| weekMaxData: [],
| weekLineData: [],
| },
| };
| },
| components: {
| Chart,
| },
| mounted() {
| this.drawTimingFn();
| },
| beforeDestroy() {
| clearInterval(this.drawTiming);
| },
| methods: {
| drawTimingFn() {
| this.setData();
| this.drawTiming = setInterval(() => {
| this.setData();
| }, 6000);
| },
| setData() {
| // 清空轮询数据
| this.cdata.weekCategory = [];
| this.cdata.weekMaxData = [];
| this.cdata.weekLineData = [];
| this.cdata.radarData = [];
| this.cdata.radarDataAvg = [];
|
| let dateBase = new Date();
| this.cdata.year = dateBase.getFullYear();
| // 周数据
| for (let i = 0; i < 7; i++) {
| // 日期
| let date = new Date();
| this.cdata.weekCategory.unshift(
| [date.getMonth() + 1, date.getDate() - i].join("/")
| );
|
| // 折线图数据
| this.cdata.weekMaxData.push(this.cdata.maxData);
| let distance = Math.round(Math.random() * 500);
| this.cdata.weekLineData.push(distance);
|
| // 雷达图数据
| // 我的指标
| let averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
| let maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2);
| let hour = +(distance / 1000 / averageSpeed).toFixed(1);
| let radarDayData = [distance, averageSpeed, maxSpeed, hour];
| this.cdata.radarData.unshift(radarDayData);
|
| // 平均指标
| let distanceAvg = Math.round(Math.random() * 500);
| let averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
| let maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2);
| let hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
| let radarDayDataAvg = [
| distanceAvg,
| averageSpeedAvg,
| maxSpeedAvg,
| hourAvg,
| ];
| this.cdata.radarDataAvg.unshift(radarDayDataAvg);
| }
| },
| },
| };
| </script>
|
| <style lang="scss" scoped>
| </style>
|
|
