<template>
|
<div>
|
<el-form :model="queryParams" ref="tableList" :inline="true" label-width="76px" style="margin: 10px 10px">
|
<el-form-item label="体检时间" prop="date">
|
<el-date-picker v-model="startTime" type="datetimerange" align="right" :picker-options="pickerOptions"
|
style="width: 310px" start-placeholder="开始日期" end-placeholder="结束日期"
|
:default-time="['00:00:00', '23:00:00']" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm"
|
@change="dateChangebirthday1">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="submitForm">搜索</el-button>
|
</el-form-item>
|
</el-form>
|
|
<div class="data-view">
|
<div id="main"></div>
|
</div>
|
</div>
|
</template>
|
|
|
<script>
|
import { getTiaoNumsByDate } from "@/api/count/chart";
|
const echarts = require("echarts/lib/echarts");
|
require("echarts/lib/component/title");
|
require("echarts/lib/component/tooltip");
|
require("echarts/lib/component/legend");
|
require("echarts/lib/chart/pie");
|
|
export default {
|
name: "chart",
|
data() {
|
return {
|
pickerOptions: {
|
shortcuts: [{
|
text: '最近一周',
|
onClick(picker) {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
picker.$emit('pick', [start, end]);
|
}
|
}, {
|
text: '最近一个月',
|
onClick(picker) {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
picker.$emit('pick', [start, end]);
|
}
|
}, {
|
text: '最近三个月',
|
onClick(picker) {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
picker.$emit('pick', [start, end]);
|
}
|
}]
|
},
|
value1: "",
|
DateList: [],
|
startTime: [],
|
dateAll: [],
|
queryParams: {
|
date: null,
|
beginTime: null,
|
endTime: null,
|
},
|
};
|
},
|
created() {
|
this.getNowTime();
|
this.getList();
|
},
|
|
methods: {
|
getList() {
|
this.queryParams.beginTime = this.startTime[0];
|
this.queryParams.endTime = this.startTime[1];
|
getTiaoNumsByDate(this.queryParams).then(res => {
|
let myChart = this.$echarts.init(document.getElementById("main"));
|
//你进入页面先把图表渲染了 然后才获取的数据把
|
myChart.setOption({
|
color: ['#5470c6'],
|
legend: {},
|
tooltip: {},
|
xAxis: {
|
type: 'category',
|
data: ['体检人数', '男生数量', '女生数量', '收入', '个检人数', '单位体检人数']
|
},
|
yAxis: {
|
type: 'value'
|
},
|
series: [
|
{
|
data: [res.data.tijianNum, res.data.boysNum, res.data.girlsNum, {
|
value: res.data.moneysNum,
|
itemStyle: {
|
color: '#a90000'
|
}
|
}, res.data.personNum, res.data.tuanDuiNum],
|
type: 'bar'
|
}
|
]
|
});
|
})
|
|
|
},
|
// 时间
|
dateChangebirthday1(val) {
|
this.startTime = val;
|
},
|
|
// / 处理默认选中当前日期
|
getNowTime() {
|
var curDate = new Date().getTime();
|
var dayNum = 7 * 24 * 3600 * 1000;
|
var threeDays = curDate - dayNum;
|
var sDay = this.getLocalTime(threeDays);
|
var end = this.getLocalTime(curDate);
|
this.startTime = [sDay, end];
|
},
|
add0(m) {
|
return m < 10 ? "0" + m : m;
|
},
|
getLocalTime(nS) {
|
var time = new Date(nS);
|
var y = time.getFullYear();
|
var m = time.getMonth() + 1;
|
var d = time.getDate();
|
var h = time.getHours();
|
var mm = time.getMinutes();
|
return (
|
y +
|
"-" +
|
this.add0(m) +
|
"-" +
|
this.add0(d) +
|
" " +
|
this.add0(h) +
|
":" +
|
this.add0(mm)
|
);
|
},
|
|
// 搜索
|
submitForm() {
|
this.queryParams.pageNum = 1;
|
this.getList();
|
},
|
},
|
};
|
</script>
|
<style>
|
.data-view {
|
margin: 5px 15px;
|
height: 580px;
|
}
|
|
#main {
|
padding: 10px;
|
height: 580px;
|
background-color: #fff;
|
}
|
</style>
|
|
|
|
