数据看板
This commit is contained in:
parent
49e79471da
commit
73ac8490cb
|
|
@ -1,134 +1,140 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="content-box">
|
||||
<div class="title-box">
|
||||
<div style="margin-left: 10px;font-size: 22px;font-weight: bold;">当月异常统计</div>
|
||||
</div>
|
||||
<div class="chart-box" @click="toggleDialog(12)">
|
||||
<div id="barBox" style="width: 100%;height: 400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="content-box">
|
||||
<div class="title-box">
|
||||
<div style="margin-left: 10px;font-size: 22px;font-weight: bold;">当月异常统计</div>
|
||||
</div>
|
||||
<div class="chart-box" @click="toggleDialog(12)">
|
||||
<div id="barBox" style="width: 100%;height: 400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
components: {},
|
||||
name: 'bottomTwo',
|
||||
props: {
|
||||
pageData: {
|
||||
// required: true,
|
||||
type: Object,
|
||||
default: {
|
||||
addressErrorNum: 0,
|
||||
earlyNum: 0,
|
||||
einErrorNum: 0,
|
||||
lateNum: 0,
|
||||
leaveNum: 0,
|
||||
skippingNum: 0
|
||||
}
|
||||
},
|
||||
name: 'bottomTwo',
|
||||
props: {
|
||||
pageData: {
|
||||
// required: true,
|
||||
type: Object,
|
||||
default:{
|
||||
addressErrorNum:0,
|
||||
earlyNum:0,
|
||||
einErrorNum:0,
|
||||
lateNum:0,
|
||||
leaveNum:0,
|
||||
skippingNum:0
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pieCharts: null,
|
||||
dateTime:"",
|
||||
barYData:[22, 18, 11, 23, 29, 33]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
pageData: {
|
||||
handler() {
|
||||
this.getInitData()
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pieCharts: null,
|
||||
dateTime: "",
|
||||
barYData: [22, 18, 11, 23, 29, 33]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
pageData: {
|
||||
handler() {
|
||||
this.getInitData()
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.getInitData()
|
||||
},
|
||||
methods: {
|
||||
getInitData() {
|
||||
setTimeout(() => {
|
||||
this.barYData = [Number(this.pageData.lateNum), Number(this.pageData.earlyNum), Number(this.pageData.skippingNum), Number(this.pageData.leaveNum), Number(this.pageData.addressErrorNum), Number(this.pageData.einErrorNum)]
|
||||
console.log(this.barYData)
|
||||
this.initChart()
|
||||
}, 500)
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.getInitData()
|
||||
initChart() {
|
||||
this.pieCharts = echarts.init(document.getElementById('barBox'))
|
||||
var option = {
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '5%',
|
||||
top: '5%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
data: ['迟到', '早退', '旷工', '请假', '打卡地异常', '出入异常']
|
||||
},
|
||||
yAxis: {},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data: this.barYData,
|
||||
itemStyle: {
|
||||
color: "#157DF3"
|
||||
},
|
||||
label: {
|
||||
show: true, // 显示标签
|
||||
position: 'top', // 设置标签的位置在柱子的上方
|
||||
formatter: '{c}' // 显示的数据格式，这里显示的是原始数值
|
||||
}
|
||||
}]
|
||||
};
|
||||
this.pieCharts.setOption(option)
|
||||
// 监听柱状图的点击事件
|
||||
this.pieCharts.on('click', function (params) {
|
||||
// 控制台输出点击的数据的信息
|
||||
console.log(params);
|
||||
// 在这里添加你的点击事件逻辑
|
||||
// 例如：弹窗显示点击的数据的详细信息
|
||||
// alert('你点击的是：' + params.name);
|
||||
});
|
||||
|
||||
},
|
||||
methods: {
|
||||
getInitData(){
|
||||
setTimeout(()=>{
|
||||
this.barYData=[Number(this.pageData.lateNum),Number(this.pageData.earlyNum),Number(this.pageData.skippingNum),Number(this.pageData.leaveNum),Number(this.pageData.addressErrorNum),Number(this.pageData.einErrorNum)]
|
||||
console.log(this.barYData)
|
||||
this.initChart()
|
||||
},500)
|
||||
|
||||
},
|
||||
initChart(){
|
||||
this.pieCharts = echarts.init(document.getElementById('barBox'))
|
||||
var option = {
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '5%',
|
||||
top: '5%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
data: ['迟到', '早退', '旷工', '请假', '打卡地异常', '出入异常']
|
||||
},
|
||||
yAxis: {},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data:this.barYData,
|
||||
itemStyle:{
|
||||
color:"#157DF3"
|
||||
}
|
||||
}]
|
||||
};
|
||||
this.pieCharts.setOption(option)
|
||||
// 监听柱状图的点击事件
|
||||
this.pieCharts.on('click', function (params) {
|
||||
// 控制台输出点击的数据的信息
|
||||
console.log(params);
|
||||
// 在这里添加你的点击事件逻辑
|
||||
// 例如：弹窗显示点击的数据的详细信息
|
||||
// alert('你点击的是：' + params.name);
|
||||
});
|
||||
|
||||
},
|
||||
toggleDialog(v) {
|
||||
this.$emit('openDialog', { order: v })
|
||||
},
|
||||
toggleDialog(v) {
|
||||
this.$emit('openDialog', {order: v})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding-top: 20px;
|
||||
.content-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding-top: 20px;
|
||||
.content-box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.title-box{
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.title-box {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.chart-box {
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
}
|
||||
.chart-box{
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue