Echart统计上下班状态（正常、迟到、早退）

最近做公司的项目人脸考勤，需要统计个人考勤最近上下班状态，以散点图的形式展示，刚开始一点思路都没有，看文档有没有找到合适的案例，参考了百度上别人写案例，他的案例不全，分了好几次才写出这个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

最后编辑于：2020.06.08 11:24:49