这是我以前用最基础的方法做出来的，前端框架我是使用的Layui。

这是实现效果图展示：


通过员工考勤管理，对每个员工进行考勤记录，比如迟到一次，通过点击迟到按钮实现该员工迟到次数+1，且考核数据图表信息也会随着数据库数据改变而更新。

1、点击操作按钮实现次数+1

通过每日考核页面可以得知，通过点击右侧对应的操作按钮，实现各自的记录次数+1，
这是怎么实现的呢？，我在这里化繁从简给大家说一下。

很简单，这四个按钮都是通过后台的对应的修改方法来实现次数自增。比如：后台我有一个修改迟到次数的方法，那么在前台页面通过点击迟到按钮，跳转到后台的修改迟到次数方法里，进行迟到次数的自增。 其他的按钮自增同理。

前端代码实现

前端我是使用的Layui实现的，代码仅给大家提供参考。原生JS操作跟这个差不多，只不过过程会更麻烦一些。

//监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            console.log(JSON.stringify(data));
            //请假按钮
            if(obj.event === 'qj') {
                data.qjNumber+=1;//获取请假字段的值并在按钮点击时的休假次数+1
                //携带休假字段自增后的值和id转成json数据传到后台controller
                $.get('${pageContext.request.contextPath}/staff/updateQjNumber',data,function (result){
                    if (result.code == 200){
                        showTable();//重载表格
                        layer.msg(result.msg,{icon:1});//成功
                    }else{
                        showTable();//重载表格
                        layer.msg(result.msg,{icon:5});//失败
                    }
                },'json');
                //迟到按钮
            }else if(obj.event === 'late'){
                data.lateNumber+=1;//获取迟到字段的值并在按钮点击时的迟到次数+1
                //携带迟到字段自增后的值和id转成json数据传到后台controller
                    $.get('${pageContext.request.contextPath}/staff/updateLateNumber',data,function (result){
                        if (result.code == 200){
                            showTable();//重载表格
                            layer.msg(result.msg,{icon:1});//成功
                        }else{
                            showTable();
                            layer.msg(result.msg,{icon:5});//失败
                        }
                    },'json')
                //出差按钮
            }else if(obj.event === 'Travel'){
                data.TravelNumber+=1;//获取出差字段的值并在按钮点击时的出差次数+1
                //携带出差字段自增后的值和id转成json数据传到后台controller
                $.get('${pageContext.request.contextPath}/staff/updateTravelNumber',data,function (result){
                    if (result.code == 200){
                        showTable();//重载表格
                        layer.msg(result.msg,{icon:1});//成功
                    }else{
                        showTable();
                        layer.msg(result.msg,{icon:5});//失败
                    }
                },'json')
                //违纪按钮
            }else if (obj.event === 'Disciplinary'){
                data.DisciplinaryNumber+=1;//获取违纪处分字段的值并在按钮点击时的违纪处分次数+1
                //携带违纪处分字段自增后的值和id转成json数据传到后台controller
                $.get('${pageContext.request.contextPath}/staff/updateDisciplinaryNumber',data,function (result){
                    if (result.code == 200){
                        showTable();//重载表格
                        layer.msg(result.msg,{icon:1});//成功
                    }else{
                        showTable();
                        layer.msg(result.msg,{icon:5});//失败
                    }
                },'json')
            }
        });

后台代码实现

实体类我就不再展示了。而且我那时候没写service层，

• dao层

/**
     * 根据id修改考勤迟到、休假次数、外出次数、违纪处分次数
     */
    int updateLateNumber(Integer lateNumber,Integer id);
    int updateQjNumber(Integer qjNumber,Integer id);
    int updateTravelNumber(Integer TravelNumber,Integer id);
    int updateDisciplinaryNumber(Integer DisciplinaryNumber,Integer id);

    /**
     * 清空表中迟到、休假次数
     */
    int updateAllNumber();

• impl层

 /**
     * 根据id修改迟到次数
     * @return
     */
    @Override
    public int updateLateNumber(Integer lateNumber,Integer id) {
        String sql = "update t_staff set lateNumber=? where id=?";
        int update = JDBCUtil.update(sql, lateNumber,id);
        return update;
    }

    /**
     * 根据id修改休假次数
     * @param qjNumber
     * @param id
     * @return
     */
    @Override
    public int updateQjNumber(Integer qjNumber,Integer id) {
        String sql = "update t_staff set qjNumber=? where id=?";
        int update = JDBCUtil.update(sql, qjNumber,id);
        return update;
    }

    /**
     * 根据id修改出差次数
     * @param TravelNumber
     * @param id
     * @return
     */
    @Override
    public int updateTravelNumber(Integer TravelNumber,Integer id) {
        String sql = "update t_staff set TravelNumber=? where id=?";
        int update = JDBCUtil.update(sql, TravelNumber,id);
        return update;
    }

    /**
     * 根据id修改违纪处分次数
     * @param DisciplinaryNumber
     * @param id
     * @return
     */
    @Override
    public int updateDisciplinaryNumber(Integer DisciplinaryNumber,Integer id) {
        String sql = "update t_staff set DisciplinaryNumber=? where id=?";
        int update = JDBCUtil.update(sql, DisciplinaryNumber,id);
        return update;
    }

• controller层

 /**
     * 修改迟到次数
     * @param staff
     * @return
     */
    @RequestMapping("/updateLateNumber")
    public Map updateLateNumber(Staff staff){
        System.out.println(staff.getLateNumber());//前台传过来的迟到次数值
        int i = staffDao.updateLateNumber(staff.getLateNumber(), staff.getId());//根据id更新迟到次数
        Date date = new Date();
        //向考勤记录表添加考勤信息
        KqDeatil kqDeatil = new KqDeatil(null,date,staff.getStaffId(),staff.getStaffName(),staff.getRname(),staff.getDname(),"迟到");
        int i1 = kqDetailDao.insertDetail(kqDeatil);
        System.out.println("考勤、考核记录添加状态"+i1);
        HashMap<Object, Object> map = new HashMap<>();
        if (i>0) {
            map.put("code","200");
            map.put("msg", "成功");
        }else {
            map.put("code","300");
            map.put("msg", "失败");
        }
        return map;
    }

    /**
     * 修改休假次数
     * @param staff
     * @return
     */
    @RequestMapping("/updateQjNumber")
    public Map updateQjNumber(Staff staff){
        int i = staffDao.updateQjNumber(staff.getQjNumber(), staff.getId());
        Date date = new Date();
        //向考勤记录表添加考勤信息
        KqDeatil kqDeatil = new KqDeatil(null,date,staff.getStaffId(),staff.getStaffName(),staff.getRname(),staff.getDname(),"请假");
        int i1 = kqDetailDao.insertDetail(kqDeatil);
        System.out.println("考勤、考核记录添加状态"+i1);
        HashMap<Object, Object> map = new HashMap<>();
        if (i>0) {
            map.put("code","200");
            map.put("msg", "成功");
        }else {
            map.put("code","300");
            map.put("msg", "失败");
        }
        return map;
    }

    /**
     * 修改出差次数
     * @param staff
     * @return
     */
    @RequestMapping("/updateTravelNumber")
    public Map updateTravelNumber(Staff staff){
        int i = staffDao.updateTravelNumber(staff.getTravelNumber(), staff.getId());
        Date date = new Date();
        //向考勤记录表添加考勤信息
        KqDeatil kqDeatil = new KqDeatil(null,date,staff.getStaffId(),staff.getStaffName(),staff.getRname(),staff.getDname(),"公派出差");
        int i1 = kqDetailDao.insertDetail(kqDeatil);
        System.out.println("考勤、考核记录添加状态"+i1);
        HashMap<Object, Object> map = new HashMap<>();
        if (i>0) {
            map.put("code","200");
            map.put("msg", "成功");
        }else {
            map.put("code","300");
            map.put("msg", "失败");
        }
        return map;
    }

    /**
     * 修改违纪处分次数
     * @param staff
     * @return
     */
    @RequestMapping("/updateDisciplinaryNumber")
    public Map updateDisciplinaryNumber(Staff staff){
        int i = staffDao.updateDisciplinaryNumber(staff.getDisciplinaryNumber(), staff.getId());
        Date date = new Date();
        //向考勤记录表添加考勤信息
        KqDeatil kqDeatil = new KqDeatil(null,date,staff.getStaffId(),staff.getStaffName(),staff.getRname(),staff.getDname(),"违纪处分");
        int i1 = kqDetailDao.insertDetail(kqDeatil);
        System.out.println("考勤、考核记录添加状态"+i1);
        HashMap<Object, Object> map = new HashMap<>();
        if (i>0) {
            map.put("code","200");
            map.put("msg", "成功");
        }else {
            map.put("code","300");
            map.put("msg", "失败");
        }
        return map;
    }

2、echarts从数据库动态获取数据

大家使用echarts前，最好还是需要去官网学习下。
后台controller层，主要是把查询到的集合数据存放到Map中，人后前台通过Map中的Number.来获取。

后台代码实现

• dao层

/**
     * 查询考勤记录
     */
    List<Map<String,Object>> selectNumber();

• impl

    /**
     * 查询考勤记录数据 员工姓名、迟到次数、请假次数、外出次数、违纪次数
     * @return
     */
    @Override
    public List<Map<String,Object>> selectNumber() {
        String sql = "select staffName,lateNumber,qjNumber,TravelNumber,DisciplinaryNumber from t_staff where status in(1,2)";
        List<Map<String, Object>> maps = JDBCUtil.queryListMap(sql);
        System.out.println(maps);
        return maps;
    }

• controller层

    /**
     * 查询考勤数据
     * @return
     */
    @RequestMapping("/selectNumber")
    public HashMap<String,Object> selectNumber(){
        List<Map<String, Object>> maps = staffDao.selectNumber();
        System.out.println(maps);
        HashMap<String, Object> map = new HashMap<>();
        System.out.println(maps);
        //将查询到的集合添加到map中，前台获取的话，直接通过Number.来获取
        map.put("Number",maps);
        return map;
    }

前端代码实现

①首先需要自己定义对应的数组，用来存储后台查询的对应考核的次数及员工姓名。这里我自己定义了专门存储员工姓名、迟到次数、请假次数、出差次数、违纪次数的五个数组。
②然后再ajax中通过遍历循环，通过url路径获取查询的集合将对应的数据来遍历添加到对应的数组中。

<body>
<div>
    <div id="main" style="width: 1250px;height:500px;display:inline-block"></div>
</div>
<script type="text/javascript">

    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    //定义数组存储考勤数据信息
    var staffName = [];//存储员工姓名的数组
    var chidao = [];//存储迟到次数的数组
    var qj = [];//存储请假次数的数组
    var waichu = [];//存储出差次数的数组
    var weiji = [];//存储违纪次数的数组

    $.ajax({
        type:'post',
        url:'${pageContext.request.contextPath}/staff/selectNumber',
        dataType:'json',
        success:function (data) {
            console.log(data.Number);

            //循环遍历后台几何数据，并添加进对应数组。Number就是后台存在map中的集合数据。
            for (var i=0;i<data.Number.length;i++){
                weiji.push(data.Number[i].DisciplinaryNumber);//添加违纪次数
                qj.push(data.Number[i].qjNumber);//添加请假次数
                waichu.push(data.Number[i].qjNumber);//添加出差次数
                staffName.push(data.Number[i].staffName);//添加员工姓名
                chidao.push(data.Number[i].lateNumber);//添加迟到次数
            }

            myChart.setOption({
                title: {
                    text: '每月员工考勤数据统计（单位：次）',
                    subtext: '考勤数据统计'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['请假', '迟到', '外出', '违纪']
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        name:'员工姓名',
                        type: 'category',
                        data: staffName //存储员工姓名的数组名
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '请假',
                        type: 'bar',
                        data: qj,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name: '迟到',
                        type: 'bar',
                        data: chidao,存储迟到次数的数组名
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name: '外出',
                        type: 'bar',
                        data:waichu,存储外出次数的数组名
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name: '违纪',
                        type: 'bar',
                        data: weiji,存储违纪次数的数组名
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            });

            option && myChart.setOption(option);
        }
    });

</script>
</body>

效果展示：