|
|
@@ -1,7 +1,11 @@
|
|
|
<template>
|
|
|
<div class="data_body">
|
|
|
<!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
|
|
|
- <div id="charts_canvas" class="echart" style="width: 100%; height: 100%"></div>
|
|
|
+ <div
|
|
|
+ id="charts_canvas"
|
|
|
+ class="echart"
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
+ ></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -24,8 +28,8 @@ export default {
|
|
|
tooltip: {
|
|
|
formatter: function (p) {
|
|
|
const format = p.data[0];
|
|
|
- return format + ' ' + p.data[1]+'份';
|
|
|
- }
|
|
|
+ return format + " " + p.data[1] + "份";
|
|
|
+ },
|
|
|
},
|
|
|
visualMap: {
|
|
|
top: 35,
|
|
|
@@ -33,32 +37,47 @@ export default {
|
|
|
right: 0,
|
|
|
min: 0,
|
|
|
max: 0,
|
|
|
- type: 'continuous',
|
|
|
+ type: "continuous",
|
|
|
inRange: {
|
|
|
- color: ['#65b9fc', '#477cd7']
|
|
|
+ color: ["#65b9fc", "#477cd7"],
|
|
|
},
|
|
|
precision: 0,
|
|
|
calculable: true,
|
|
|
},
|
|
|
calendar: {
|
|
|
top: 70,
|
|
|
- left: 50,
|
|
|
- right: 30,
|
|
|
- cellSize: ['auto', 15],
|
|
|
- range: '',
|
|
|
+ left: 80,
|
|
|
+ right: 20,
|
|
|
+ cellSize: ["auto", 15],
|
|
|
+ range: "",
|
|
|
itemStyle: {
|
|
|
- borderWidth: 0.5
|
|
|
+ borderWidth: 0.5,
|
|
|
},
|
|
|
yearLabel: { show: false },
|
|
|
dayLabel: {
|
|
|
- show: false
|
|
|
- }
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
},
|
|
|
+ // yAxis: {
|
|
|
+ // type: "category",
|
|
|
+ // data: [
|
|
|
+ // "星期一",
|
|
|
+ // "星期二",
|
|
|
+ // "星期三",
|
|
|
+ // "星期四",
|
|
|
+ // "星期五",
|
|
|
+ // "星期六",
|
|
|
+ // "星期日",
|
|
|
+ // ],
|
|
|
+ // splitArea: {
|
|
|
+ // show: true,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
series: {
|
|
|
- type: 'heatmap',
|
|
|
- coordinateSystem: 'calendar',
|
|
|
- data: ''
|
|
|
- }
|
|
|
+ type: "heatmap",
|
|
|
+ coordinateSystem: "calendar",
|
|
|
+ data: "",
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
},
|
|
|
@@ -68,10 +87,16 @@ export default {
|
|
|
// time=time.setDate(time.getDate()+1);
|
|
|
// time = new Date(time);
|
|
|
// time.setTime(time.getTime());
|
|
|
- var s2 = time.getFullYear() + "-" + ((time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)) + "-"
|
|
|
- + ((time.getDate()) < 10 ? '0' + (time.getDate()) : (time.getDate()));
|
|
|
+ var s2 =
|
|
|
+ time.getFullYear() +
|
|
|
+ "-" +
|
|
|
+ (time.getMonth() + 1 < 10
|
|
|
+ ? "0" + (time.getMonth() + 1)
|
|
|
+ : time.getMonth() + 1) +
|
|
|
+ "-" +
|
|
|
+ (time.getDate() < 10 ? "0" + time.getDate() : time.getDate());
|
|
|
var monthNum = 3; //要减的月数(6)自己定义
|
|
|
- var dateArr = s2.split('-'); //s2当前时间
|
|
|
+ var dateArr = s2.split("-"); //s2当前时间
|
|
|
var year = dateArr[0]; //获取当前日期的年份
|
|
|
var month = dateArr[1]; //获取当前日期的月份
|
|
|
var day = dateArr[2]; //获取当前日期的日
|
|
|
@@ -88,13 +113,13 @@ export default {
|
|
|
var days2 = new Date(year2, month2, 0);
|
|
|
days2 = days2.getDate();
|
|
|
if (day2 > days2) {
|
|
|
- day2 = days2 < 10 ? '0' + days2 : days2;
|
|
|
+ day2 = days2 < 10 ? "0" + days2 : days2;
|
|
|
}
|
|
|
if (month2 < 10) {
|
|
|
- month2 = '0' + month2;
|
|
|
+ month2 = "0" + month2;
|
|
|
}
|
|
|
- var t2 = year2 + '-' + month2 + '-' + day2;
|
|
|
- return [t2, s2]
|
|
|
+ var t2 = year2 + "-" + month2 + "-" + day2;
|
|
|
+ return [t2, s2];
|
|
|
},
|
|
|
setChart(option, year) {
|
|
|
// 雷达图显示的标签
|
|
|
@@ -109,7 +134,9 @@ export default {
|
|
|
);
|
|
|
this.option.series.data = option;
|
|
|
this.option.calendar.range = year;
|
|
|
- this.option.visualMap.max = Object.keys(this.Josn).length + (10 - (Object.keys(this.Josn).length % 10));
|
|
|
+ this.option.visualMap.max =
|
|
|
+ Object.keys(this.Josn).length +
|
|
|
+ (10 - (Object.keys(this.Josn).length % 10));
|
|
|
// 初始化雷达图
|
|
|
this.chartObj = chartObj;
|
|
|
this.chartObj.setOption(this.option);
|
|
|
@@ -121,7 +148,7 @@ export default {
|
|
|
const dayTime = 3600 * 24 * 1000;
|
|
|
const data = [];
|
|
|
for (let time = date; time <= end; time += dayTime) {
|
|
|
- let a = this.$echarts.time.format(time, '{yyyy}-{MM}-{dd}', false)
|
|
|
+ let a = this.$echarts.time.format(time, "{yyyy}-{MM}-{dd}", false);
|
|
|
if (this.Josn[a]) {
|
|
|
data.push([a, this.Josn[a]]);
|
|
|
} else {
|
|
|
@@ -131,24 +158,26 @@ export default {
|
|
|
return data;
|
|
|
},
|
|
|
setData() {
|
|
|
- let year = Object.keys(this.Josn)[0].split('-')[0];
|
|
|
+ let year = Object.keys(this.Josn)[0].split("-")[0];
|
|
|
var t = this.gettime();
|
|
|
- this.ooption = this.getVirtualData(t)
|
|
|
+ this.ooption = this.getVirtualData(t);
|
|
|
if (!this.chartObj) {
|
|
|
this.setChart(this.ooption, t);
|
|
|
} else {
|
|
|
this.option.series.data = this.ooption;
|
|
|
this.option.calendar.range = t;
|
|
|
- this.option.visualMap.max = Object.keys(this.Josn).length + (10 - (Object.keys(this.Josn).length % 10));
|
|
|
+ this.option.visualMap.max =
|
|
|
+ Object.keys(this.Josn).length +
|
|
|
+ (10 - (Object.keys(this.Josn).length % 10));
|
|
|
this.chartObj.setOption(this.option, t);
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
watch: {
|
|
|
Josn: {
|
|
|
- handler: function (newVal, oldVal) {
|
|
|
+ handler: function (newVal, oldVal) {
|
|
|
this.setData();
|
|
|
- },
|
|
|
+ },
|
|
|
deep: true,
|
|
|
},
|
|
|
},
|
zengyicheng