118 lines
3.1 KiB
Vue
118 lines
3.1 KiB
Vue
|
<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>
|