Bonus-AI-LargeScreen/src/views/updateIDCard/pieIDResultCount.vue

<template>
    <div class="pieBoxIDResultCount">
        <div class="pieIDResultCount" ref="pieIDResultCount"></div>
        <div class="pieTextBoxIDResultCount">
            <div class='pieTextIDResultCount'>
                识别正确数
            </div>
            <div class='pieTextIDResultCount'>
                识别错误数
            </div>
        </div>
    </div>
</template>

<script>
import { init, graphic } from 'echarts'
import { getPieData } from "@/api/updateIDCard/updateIDCard.js";


function roundToTwo(num) {
    let tmp_num = num.toFixed(2).toString();  

    return tmp_num;
}
    
export default {
    name: 'pieIDResultCount',
    data() {
        return {
            pieOneChart: null,
            pieEntityNameValue: {
                pieright: '',
                pieerror: ''
            }
        }
    },
    mounted() {
        this.getPieDataID();

    },
    created() {
        this.interval_IDPie = setInterval(() => {
            this.pieIDResultCount();
        }, 60 * 60 * 1000); // 5分钟 = 5 * 60 * 1000 毫秒
    },
    methods: {

        getPieDataID() {
            getPieData(1).then(res => {
                try {
                    if (res.code == 200) {
                       
                        this.pieEntityNameValue.pieright = (res.data.correctNu / res.data.totalNu * 100);
                    
                        this.pieEntityNameValue.pieerror = (res.data.incorrectNu / res.data.totalNu * 100);
            
                        this.pieIDResultCount()
                       
                    
                    }
                } catch (error) {
                    console.error('Error:', error);
                }
            }).catch(error => {
                console.error('Error:', error);
            });
        },
        pieIDResultCount() {
            let pieBlank = {
                color: 'rgba(255,255,255,.8)',
            };
            let pieEntity = {
                color: new graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: 'rgba(0, 255, 225, 0.3)' },
                    { offset: .5, color: 'rgba(100, 255, 100, 1)' },
                    { offset: 1, color: 'rgba(0, 255, 255, 0.7)' },
                ]),

            };
            let pieRadius = [30, 60];
            let pieIDResultCount = init(this.$refs.pieIDResultCount);
            console.log(this.pieEntityNameValue)
            console.log(this.pieEntityNameValue.pieright)
            let pieData = [
                { name: 'pieright', value: this.pieEntityNameValue.pieright },
                { name: 'pieerror', value: this.pieEntityNameValue.pieerror }
            ];
            // console.log(pieData)
            pieIDResultCount.setOption({

                series: pieData.map((data, index) => ({
                    type: 'pie',
                    top: '15%',
                    center: [`${23 + 51 * index}%`, '50%'],
                    radius: pieRadius,
                    label: {
                        show: true,
                        formatter: function (params) {
                            if (params.name === 'blank')
                                return roundToTwo(100 - params.value) + "%"
                            else
                                return roundToTwo(params.value) + "%"//没有这个参数会出现数据漂移的现象，如0.1+0.2=0.3
                        },
                        position: 'center',
                        fontSize: 15,
                        fontWeight: 'bold',
                        color: 'rgba(0, 255, 255, 0.7)'
                    },
                    data: [
                        { name: 'entity', value: data.value, itemStyle: pieEntity },
                        { name: 'blank', value: 100 - data.value, itemStyle: pieBlank }
                    ]
                }))
            });
        },
    }
}
</script>

<style scoped>
.pieBoxIDResultCount {
    height: 20rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

}

.pieIDResultCount {
    flex: 10;
    width: 100%;

}

.pieTextBoxIDResultCount {
    flex: 2;
    display: flex;
    color: #fff;
    width: 100%;
    font-size: 1rem;
    margin-left: 30%;
}

.pieTextIDResultCount {
    flex: 1
}
</style>