150 lines
4.3 KiB
Vue
150 lines
4.3 KiB
Vue
<template>
|
||
<div class="pieBoxVioResultCount">
|
||
<div class="pieVioResultCount" ref="pieVioResultCount"></div>
|
||
<div class="pieTextBoxVioResultCount">
|
||
<div class='pieTextVioResultCount'>
|
||
识别正确数
|
||
</div>
|
||
<div class='pieTextVioResultCount'>
|
||
识别错误数
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { init, graphic } from 'echarts'
|
||
import { getPieData } from "@/api/Violation/Violation.js";
|
||
|
||
|
||
function roundToTwo(num) {
|
||
return tmp_num = num.toFixed(2).toString();
|
||
|
||
}
|
||
|
||
export default {
|
||
name: 'pieVioResultCount',
|
||
data() {
|
||
return {
|
||
pieOneChart: null,
|
||
pieEntityNameValue: {
|
||
pieright: '',
|
||
pieerror: ''
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getPieDataVio();
|
||
|
||
},
|
||
created() {
|
||
this.interval_VioPie = setInterval(() => {
|
||
this.pieVioResultCount();
|
||
}, 60 * 60 * 1000); // 5分钟 = 5 * 60 * 1000 毫秒
|
||
},
|
||
methods: {
|
||
|
||
getPieDataVio() {
|
||
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.pieVioResultCount()
|
||
|
||
|
||
}
|
||
} catch (error) {
|
||
this.$modal.msgError("饼图加载失败，请刷新页面或者请求管理员");
|
||
this.$modal.closeLoading();
|
||
}
|
||
}).catch(error => {
|
||
this.$modal.msgError("饼图加载失败，请刷新页面或者请求管理员");
|
||
this.$modal.closeLoading();
|
||
});
|
||
},
|
||
pieVioResultCount() {
|
||
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 pieVioResultCount = init(this.$refs.pieVioResultCount);
|
||
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)
|
||
pieVioResultCount.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>
|
||
.pieBoxVioResultCount {
|
||
height: 20rem;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
|
||
}
|
||
|
||
.pieVioResultCount {
|
||
flex: 10;
|
||
width: 100%;
|
||
|
||
}
|
||
|
||
.pieTextBoxVioResultCount {
|
||
flex: 2;
|
||
display: flex;
|
||
color: #fff;
|
||
width: 100%;
|
||
font-size: 1rem;
|
||
margin-left: 30%;
|
||
}
|
||
|
||
.pieTextVioResultCount {
|
||
flex: 1
|
||
}
|
||
</style> |