参考链接：echarts引入
动态获取数据:

<template>
  <el-card class="box-card">
    <h1 align="center">人事管理系统</h1>
    <div id="zhu" style="width: 100%;height: 400px;"></div>
    <div id="bin" style="width: 100%;height: 400px;"></div>
  </el-card>
</template>

<script>
  export default { 
    data() { 
      return { }
    },
    methods: { 
      /** * 获取员工数据 */
      getAllEmployee() { 
        this.$axios({ 
          method: 'post',
          headers: { 
            'Content-Type': 'application/json'
          },
          url: 'http://127.0.0.1:8080/employee/getAllEmployee',
          data: { 

          }
        }).then((response) => { 
          if (response.data.msg != "SUCCESS") { 
            this.$message.error(response.data.msg);
          }
          //数据封装
          var data = [
            response.data.data.records[0].rs,
            response.data.data.records[0].cw,
            response.data.data.records[0].xz,
            response.data.data.records[0].sc
          ]

          this.getZhu(data);
        }).catch((error) => { 
          console.log(error)
        })
      },
      //柱状图
      getZhu: function (data) { 
        let myEchart = this.$echarts.init(document.getElementById("zhu"));
        myEchart.setOption({ 
          xAxis: {   //x轴
            // 数据条目名称
            data: ['人事', '财务', '行政', '市场']
          },
          yAxis: { }, //y轴
          series: [
            { 
              type: 'bar',    //图表类别: bar :柱状图
              // 值
              data: data
            }
          ]
        })
      },
      /** * 获取出勤数据 */
      getAttendanceTableDate() { 
        this.$axios({ 
          method: 'post',
          headers: { 
            'Content-Type': 'application/json'
          },
          url: 'http://127.0.0.1:8080/employeeAttendance/getAntt',
          data: { 
          }
        }).then((response) => { 
          if (response.data.msg != "SUCCESS") { 
            this.$message.error(response.data.msg);
          }
          //数据封装
          var data = [
            { value: response.data.data.records[0].zc, name: '正常'},
            { value: response.data.data.records[0].cd, name: '迟到'},
            { value: response.data.data.records[0].zt, name: '早退'},
            { value: response.data.data.records[0].qq, name: '缺勤'},
            { value: response.data.data.records[0].qj, name: '请假'}
          ]
          this.getBin(data);
        }).catch((error) => { 
          console.log(error)
        })
      },
      getBin: function (data) { 
        let myEchart = this.$echarts.init(document.getElementById("bin"));
        myEchart.setOption({ 
          tooltip: { 
            trigger: 'item'
          },
          legend: { 
            orient: 'vertical',
            left: 'left'
          },
          series: [
            { 
              name: '员工考勤',
              type: 'pie',
              radius: '50%',
              data: data,
              emphasis: { 
                itemStyle: { 
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        });
      },
    },
    // *注意不要写在creatd()里 会出现dom元素未加载报错
    // 推荐写在mounted()里
    mounted() { 
      this.getAllEmployee();
      this.getAttendanceTableDate();
    },
    created() { 

    }
  }
</script>
<style lang="less" scoped
  .box-card { 
    margin: 10px;
  }
</style>

效果图：