Echart统计上下班状态(正常、迟到、早退)
2020-06-08 本文已影响0人
哓两々
最近做公司的项目人脸考勤,需要统计个人考勤最近上下班状态,以散点图的形式展示,刚开始一点思路都没有,看文档有没有找到合适的案例,参考了百度上别人写案例,他的案例不全,分了好几次才写出这个dome,希望遇到问题后要有耐心,多思考。
//自定义数据
var BASE_TIME = '2020-06-20' // 统一声明一个变量
var data = [{
goWorkTime: '2020-03-19 09:10:12',
offWorkTime: '2020-03-19 18:10:45',
}, {
goWorkTime: '2020-03-20 08:10:12',
offWorkTime: '2020-03-20 17:10:45',
}, {
goWorkTime: '2020-03-21 10:10:12',
offWorkTime: '2020-03-21 19:48:45',
},{
goWorkTime: '2020-03-22 08:44:45',
offWorkTime: '2020-03-22 19:49:08',
}, {
goWorkTime: '2020-03-25 10:44:45',
offWorkTime: '',
}];
// 处理数据
this.onTime = [];
this.offTime = [];
for(let item of data){
this.onTime.push(item.goWorkTime ? `${BASE_TIME} ${moment(item.goWorkTime).format('YYYY-MM- DD HH:mm:ss').substr(11, 10)}` : null);
this.offTime.push(item.offWorkTime ? `${BASE_TIME} ${moment(item.offWorkTime).format('YYYY-MM- DD HH:mm:ss').substr(11, 10)}` : null);
}
var optionss = {
grid: {
left: '3%',
right: '8%',
bottom: '10%',
height: 150,
containLabel: true
},
legend: {
orient: 'vertical',
icon: "circle",
top: '3%',
textStyle: {
color: "#3BAEFE",
fontSize: 16
}
},
tooltip: {
trigger: 'axis',
padding: [2, 10],
formatter: function(params) {
var res='<div><p>时间:'+params[0].name+'</p></div>'
for(var i=0;i<params.length;i++){
var states = '';
if (params[i].data) {
states = moment(params[i].data ).format('HH:mm:ss');
} else {
states = '缺勤';
}
res+='<p><span style="display: inline-block; width: 10px; height: 10px; background-color: '+params[i].color+';border-radius: 50%"></span>'+params[i].seriesName+': '+ states +'</p>'
}
return res;
},
textStyle: {
fontSize: 16
}
},
xAxis: {
type: 'category',
axisLabel: {
interval: 0,
fontSize: 16
},
axisTick: {
alignWithLabel: true
},
axisLine: {
onZero: false,
lineStyle: {
color: '#aaa'
}
},
data: ["03-19 周四", "03-20 周五", "03-21 周六", "03-22 周日", "03-25 周一"]
},
yAxis: {
type: 'time',
splitLine: {
lineStyle: {
type: 'dashed',
color: '#DDD'
}
},
axisLine: {
show: false,
lineStyle: {
color: '#333'
}
},
nameTextStyle: {
color: '#303133',
fontSize: 10,
},
splitArea: {
show: false
},
min: `${BASE_TIME} 0:00:00`,
max: `${BASE_TIME} 23:59:59`,
splitNumber: 7,
axisLabel:{
formatter: function (value) {
return (moment(value).format('YYYY-MM-DD HH:mm:ss')).substr(11,20)
}
}
},
dataZoom: [
{
type: 'slider',
start: 30,
end: 100
}, {
type: 'inside',
start: 30,
end: 100
}],
series: [
{
type: 'scatter',
name: '下班',
symbolSize: '6',
data: this.offTime,
itemStyle: {
normal: {
color: function(params) {
if (params.data) {
var startTime = moment(`${BASE_TIME} 18:00:00`).valueOf();
var endTime = moment(`${BASE_TIME} 23:59:59`).valueOf();
var time = moment(params.data).valueOf();
if (parseInt(startTime) < parseInt(time) && parseInt(time) < parseInt(endTime)) {
return '#2996F2'
} else {
return '#FF4848'
}
} else {
return '#5e5e5e'
}
}
}
}
},
{
type: 'scatter',
name: '上班',
symbolSize: '6',
data: this.onTime,
itemStyle: {
normal: {
color: function(params) {
if (params.data) {
var startTime = moment(`${BASE_TIME} 00:00:00`).valueOf();
var endTime = moment(`${BASE_TIME} 09:15:00`).valueOf();
var time = moment(params.data).valueOf();
if (parseInt(startTime) < parseInt(time) && parseInt(time) < parseInt(endTime)) {
return '#2996F2'
} else {
return '#F7D225'
}
} else {
return '#5e5e5e'
}
}
}
}
}
]
};
最终效果图
TIM图片20200603151537.png