gz-att-web/src/views/dashboard/bottomTwo.vue

<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>
</template>

<script>
import * as echarts from 'echarts';
export default {
    components: {
        
    },
    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() {

    },
    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)
            
        },
        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 })
        },
    },
}
</script>

<style lang="scss" scoped>
.content{
    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;

    }
    .chart-box{
        width: 100%;
        height: 450px;
    }

  
}

</style>