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

<script>
import { init, graphic } from 'echarts'
export default {
    name: 'pieIDResultCount',
    data() {
        return {
            pieOneChart: null,
            pieEntityNameValue: {
                '正常': 70,
                '异常': 30,
                'bu异常': 90,
            }
        }
    },
    mounted() {
        this.pieIDResultCount();
    },
    methods: {
        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);
            let pieData = Object.entries(this.pieEntityNameValue).map(([key, value]) => {
                return {
                    name: key,
                    value: parseInt(value),
                    itemStyle: pieEntity
                };
            });

            pieIDResultCount.setOption({

                series: pieData.map((data, index) => ({
                    type: 'pie',
                    top: '15%',
                    center: [`${18 + 32 * index}%`, '50%'],
                    radius: pieRadius,
                    label: {
                        show: true,
                        formatter: function (params) {
                            if (params.name === 'blank')
                                return (100 - params.value) + "%"
                            else
                                return params.value + "%"
                        },
                        position: 'center',
                        fontSize: 15,
                        fontWeight: 'bold',
                        color: 'rgba(0, 255, 255, 0.7)'
                    },
                    data: [
                        data,
                        { 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: 18%;
}

.pieTextIDResultCount {
    flex: 1
}
</style>