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: 380px;"></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]
        }
    },
    created() {

    },
    mounted() { 
        this.$nextTick(() => {
            this.getInitData()
        })
    },
    methods: {
        getInitData(){
            console.log(this.pageData)
            this.barYData=[this.pageData.lateNum,this.pageData.earlyNum,this.pageData.skippingNum,this.pageData.leaveNum,this.pageData.addressErrorNum,this.pageData.einErrorNum]
            this.initChart()
        },
        initChart(){
            this.pieCharts = echarts.init(document.getElementById('barBox'))
            var option = {
                xAxis: {
                    data: ['迟到', '早退', '旷工', '请假', '打卡地异常', '出入异常']
                },
                yAxis: {},
                series: [{
                    type: 'bar',
                    data:this.barYData
                }]
            };

            this.pieCharts.setOption(option)
        },
        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: 400px;
    }

  
}

</style>