145 lines
3.5 KiB
Vue
145 lines
3.5 KiB
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() {
|
||
|
||
},
|
||
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) {
|
||
this.$modal.msgError("矩形图加载失败，请刷新页面或者请求管理员");
|
||
this.$modal.closeLoading();
|
||
}
|
||
}).catch(error => {
|
||
this.$modal.msgError("饼图加载失败，请刷新页面或者请求管理员");
|
||
this.$modal.closeLoading();
|
||
});
|
||
},
|
||
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>
|