153 lines
3.9 KiB
Plaintext
153 lines
3.9 KiB
Plaintext
<template>
|
|
<div ref="reading_stats" style="width:100%;height:100%;padding-top:5px;" />
|
|
</template>
|
|
<script>
|
|
import echarts from 'echarts'
|
|
import { getReadingDataByType } 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.getReadingData()
|
|
},
|
|
methods: {
|
|
initChart(data) {
|
|
const colorList = ['#2fA2FF ', '#27d08a', '#2f89cf', '#FBD444', '#7F6AAD', '#585247']
|
|
const option = {
|
|
title: {
|
|
text: 'Workload',
|
|
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: 'Total',
|
|
type: 'pie',
|
|
radius: ['50%', '75%'],
|
|
center: ['50%', '50%'],
|
|
labelLine: {
|
|
normal: {
|
|
length: '4%',
|
|
length2: '2%',
|
|
lineStyle: {
|
|
color: '#e6e6e6'
|
|
}
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
position: 'inner',
|
|
// formatter: '{a|{b}}\n{hr|}\n{per|{c}}',
|
|
formatter: '{per|{c}}',
|
|
rich: {
|
|
a: {
|
|
color: '#fff',
|
|
fontSize: fontSize(0.12),
|
|
lineHeight: fontSize(0.2),
|
|
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
|
|
}
|
|
],
|
|
animationEasing: 'elasticOut',
|
|
animationDelayUpdate: function(idx) {
|
|
return idx * 5
|
|
}
|
|
}
|
|
if (this.$refs.reading_stats) {
|
|
this.myChart = echarts.init(this.$refs.reading_stats)
|
|
this.myChart.setOption(option)
|
|
}
|
|
},
|
|
getReadingData() {
|
|
getReadingDataByType().then(res => {
|
|
if (res.IsSuccess) {
|
|
const data = []
|
|
if (res.Result) {
|
|
for (var key in res.Result) {
|
|
let k = key
|
|
if (key === 'Timepoint') {
|
|
k = 'TP'
|
|
} else if (key === 'Adjudication') {
|
|
k = 'AD'
|
|
} else if (key === 'Global') {
|
|
k = 'GL'
|
|
}
|
|
data.push({
|
|
name: k,
|
|
value: res.Result[key]
|
|
})
|
|
this.sum += res.Result[key]
|
|
}
|
|
}
|
|
this.initChart(data)
|
|
} else {
|
|
this.$message({ message: res.ErrorMessage, type: 'error' })
|
|
}
|
|
})
|
|
// .catch(error => {
|
|
// this.$message({ message: error, type: 'error' })
|
|
// })
|
|
}
|
|
}
|
|
}
|
|
</script>
|