<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: 12000,
|
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() * 11000 + 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() * 8000 + 4000);
|
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>
|
