参考链接：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>
效果图：
