168 lines
3.9 KiB
Plaintext
168 lines
3.9 KiB
Plaintext
<template>
|
|
<div ref="trials_stats" style="width:100%;height:100%;" />
|
|
</template>
|
|
<script>
|
|
import echarts from 'echarts'
|
|
import { getTrialCountRank } from '@/api/dashboard'
|
|
import { fontSize } from 'utils/fontsize'
|
|
const Count = 5
|
|
export default {
|
|
props: {
|
|
area: { type: String, default: '' }
|
|
},
|
|
data() {
|
|
return {
|
|
myChart: '',
|
|
data: []
|
|
}
|
|
},
|
|
watch: {
|
|
area() {
|
|
if (this.myChart) {
|
|
this.myChart.resize()
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
initChart(xData, data) {
|
|
const option = {
|
|
title: {
|
|
text: 'Enrollments of Top 5 Reviewers',
|
|
x: '4%',
|
|
top: 5,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: fontSize(0.16)
|
|
}
|
|
},
|
|
grid: {
|
|
// borderWidth: 0,
|
|
top: '22%',
|
|
left: 40,
|
|
bottom: 25,
|
|
textStyle: {
|
|
color: '#999'
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
textStyle: {
|
|
color: '#999'
|
|
}
|
|
}
|
|
},
|
|
xAxis: [
|
|
{
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'rgba(255,255,255,.1)',
|
|
// width: 1,
|
|
type: 'solid'
|
|
}
|
|
},
|
|
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
show: true,
|
|
// splitNumber: 15,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: fontSize(0.14)
|
|
}
|
|
},
|
|
|
|
data: xData
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: fontSize(0.14)
|
|
}
|
|
},
|
|
minInterval: 1,
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'rgba(255,255,255,.1 )',
|
|
// width: 1,
|
|
type: 'solid'
|
|
}
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: 'rgba(255,255,255,.1)'
|
|
}
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
type: 'bar',
|
|
data: data,
|
|
barMaxWidth: fontSize(0.4),
|
|
// barGap: '10%',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#27d08a',
|
|
opacity: 1
|
|
// barBorderRadius: 5
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: fontSize(0.14)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
if (this.$refs.trials_stats) {
|
|
this.myChart = echarts.init(this.$refs.trials_stats)
|
|
this.myChart.setOption(option)
|
|
}
|
|
},
|
|
getData() {
|
|
getTrialCountRank(Count).then(res => {
|
|
if (res.IsSuccess) {
|
|
if (res.Result) {
|
|
const xData = []
|
|
const data = []
|
|
for (let i = 0; i < res.Result.length; i++) {
|
|
xData.push(res.Result[i].ReviewerCode)
|
|
data.push(res.Result[i].TrialCount)
|
|
}
|
|
this.initChart(xData, data)
|
|
}
|
|
} else {
|
|
this.$message({ message: res.ErrorMessage, type: 'error' })
|
|
}
|
|
})
|
|
// .catch(error => {
|
|
// this.$message({ message: error, type: 'error' })
|
|
// })
|
|
}
|
|
}
|
|
}
|
|
</script>
|