141 lines
3.6 KiB
Plaintext
141 lines
3.6 KiB
Plaintext
<template>
|
|
<div ref="reviewers_stats" style="width:100%;height:100%;padding:5px;" />
|
|
</template>
|
|
<script>
|
|
import echarts from 'echarts'
|
|
import { getReviewersByRank } from '@/api/dashboard'
|
|
import { fontSize } from 'utils/fontsize'
|
|
export default {
|
|
props: {
|
|
area: { type: String, default: '' }
|
|
},
|
|
data() {
|
|
return {
|
|
myChart: '',
|
|
data: [],
|
|
sum: 0
|
|
}
|
|
},
|
|
watch: {
|
|
area() {
|
|
if (this.myChart) {
|
|
this.myChart.resize()
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
initChart(data) {
|
|
const colorList = ['#47A2FF ', '#53C8D1', '#6666CC', '#00FFCC']
|
|
const option = {
|
|
title: {
|
|
text: 'Reviewers',
|
|
subtext: this.sum,
|
|
textStyle: {
|
|
fontSize: fontSize(0.16),
|
|
color: '#fff'
|
|
},
|
|
subtextStyle: {
|
|
fontSize: fontSize(0.2),
|
|
color: '#fff'
|
|
},
|
|
textAlign: 'center',
|
|
left: '49%',
|
|
top: '41%'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|
},
|
|
legend: {
|
|
show: true,
|
|
top: '2%',
|
|
icon: 'circle',
|
|
itemWidth: fontSize(0.1),
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: fontSize(0.14)
|
|
}
|
|
},
|
|
color: colorList,
|
|
series: [
|
|
{
|
|
name: 'Reviewers',
|
|
type: 'pie',
|
|
radius: ['50%', '75%'],
|
|
center: ['50%', '50%'],
|
|
labelLine: {
|
|
normal: {
|
|
length: '4%',
|
|
length2: '2%',
|
|
lineStyle: {
|
|
color: '#e6e6e6'
|
|
}
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
position: 'inner',
|
|
formatter: '{per|{c}}',
|
|
// formatter: '{a|{b}}\n{hr|}\n{per|{c}}',
|
|
rich: {
|
|
a: {
|
|
color: '#fff',
|
|
fontSize: 11,
|
|
lineHeight: 20,
|
|
align: 'center'
|
|
},
|
|
hr: {
|
|
width: '100%',
|
|
height: 0,
|
|
alien: 'center'
|
|
},
|
|
per: {
|
|
color: '#fff',
|
|
align: 'center',
|
|
fontSize: fontSize(0.15)
|
|
}
|
|
}
|
|
}
|
|
},
|
|
itemStyle: {
|
|
borderWidth: fontSize(0.3)
|
|
// borderColor: '#fff'
|
|
},
|
|
data: data
|
|
}
|
|
]
|
|
}
|
|
if (this.$refs.reviewers_stats) {
|
|
this.myChart = echarts.init(this.$refs.reviewers_stats)
|
|
this.myChart.setOption(option)
|
|
}
|
|
},
|
|
getData() {
|
|
getReviewersByRank().then(res => {
|
|
if (res.IsSuccess) {
|
|
const data = []
|
|
if (res.Result) {
|
|
for (let i = 0; i < res.Result.length; i++) {
|
|
data.push({
|
|
name: res.Result[i].RankNameAbbreviation,
|
|
value: res.Result[i].ReviewerCount
|
|
})
|
|
this.sum += res.Result[i].ReviewerCount
|
|
}
|
|
}
|
|
this.initChart(data)
|
|
} else {
|
|
this.$message({ message: res.ErrorMessage, type: 'error' })
|
|
}
|
|
})
|
|
// .catch(error => {
|
|
// this.$message({ message: error, type: 'error' })
|
|
// })
|
|
}
|
|
}
|
|
}
|
|
</script>
|