209 lines
5.5 KiB
Plaintext
209 lines
5.5 KiB
Plaintext
<template>
|
|
<div ref="enroll_stats" style="width:100%;height:100%;" />
|
|
</template>
|
|
<script>
|
|
import echarts from 'echarts'
|
|
import { getEnrollDataByQuarter } from '@/api/dashboard'
|
|
import { fontSize } from 'utils/fontsize'
|
|
const Count = 6
|
|
export default {
|
|
props: {
|
|
area: { type: String, default: '' }
|
|
},
|
|
data() {
|
|
return {
|
|
myChart: ''
|
|
}
|
|
},
|
|
watch: {
|
|
area() {
|
|
const that = this
|
|
this.$nextTick(function() {
|
|
if (that.myChart) {
|
|
that.myChart.resize()
|
|
}
|
|
})
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
initChart(xData, data) {
|
|
const colorArray = [
|
|
{
|
|
top: '#C4E759',
|
|
bottom: '#6DE195'
|
|
},
|
|
{
|
|
top: '#8DE7FF',
|
|
bottom: '#ABC7FF'
|
|
},
|
|
{
|
|
top: '#41D8DD',
|
|
bottom: '#5583EE'
|
|
}
|
|
// {
|
|
// top: '#DEB0DF',
|
|
// bottom: '#a16bfe'
|
|
// },
|
|
// {
|
|
// top: '#F8C390',
|
|
// bottom: '#D279EE'
|
|
// }
|
|
// {
|
|
// top: '#E16E93',
|
|
// bottom: '#9D2E7D'
|
|
// }
|
|
]
|
|
|
|
const option = {
|
|
// backgroundColor: "#38445E",
|
|
title: {
|
|
text: 'Enrollments of Past 6 Months',
|
|
x: '4%',
|
|
top: 5,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: fontSize(0.16)
|
|
}
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
formatter: '{b} : {c}'
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
show: false
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
axisTick: {
|
|
show: false,
|
|
alignWithLabel: false
|
|
},
|
|
inverse: 'true',
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: fontSize(0.14)
|
|
}
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
data: xData
|
|
},
|
|
grid: {
|
|
left: '80',
|
|
top: '15%',
|
|
bottom: 10
|
|
},
|
|
series: [
|
|
{
|
|
type: 'bar',
|
|
barMaxWidth: fontSize(0.2),
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'right',
|
|
textStyle: {
|
|
fontSize: fontSize(0.14)
|
|
},
|
|
formatter: '{c}',
|
|
color: '#fff'
|
|
}
|
|
},
|
|
data: data,
|
|
barWidth: '70%',
|
|
// barCategoryGap: '55%',
|
|
itemStyle: {
|
|
normal: {
|
|
show: true,
|
|
color: function(params) {
|
|
const num = colorArray.length
|
|
return {
|
|
type: 'linear',
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: colorArray[params.dataIndex % num].bottom
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: colorArray[params.dataIndex % num].top
|
|
},
|
|
{
|
|
offset: 0,
|
|
color: colorArray[params.dataIndex % num].bottom
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: colorArray[params.dataIndex % num].top
|
|
},
|
|
{
|
|
offset: 0,
|
|
color: colorArray[params.dataIndex % num].bottom
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: colorArray[params.dataIndex % num].top
|
|
},
|
|
{
|
|
offset: 0,
|
|
color: colorArray[params.dataIndex % num].bottom
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: colorArray[params.dataIndex % num].top
|
|
},
|
|
{
|
|
offset: 0,
|
|
color: colorArray[params.dataIndex % num].bottom
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: colorArray[params.dataIndex % num].top
|
|
}
|
|
]
|
|
}
|
|
},
|
|
barBorderRadius: 10,
|
|
borderWidth: 0,
|
|
borderColor: '#333'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
if (this.$refs.enroll_stats) {
|
|
this.myChart = echarts.init(this.$refs.enroll_stats)
|
|
this.myChart.setOption(option)
|
|
}
|
|
},
|
|
getData() {
|
|
getEnrollDataByQuarter(0, Count).then(res => {
|
|
if (res.IsSuccess) {
|
|
if (res.Result) {
|
|
const xData = []
|
|
const data = []
|
|
const result = res.Result
|
|
for (let i = 0; i < result.length; i++) {
|
|
xData.push(result[i].ViewStr)
|
|
data.push(result[i].EnrollCount)
|
|
}
|
|
this.initChart(xData, data)
|
|
}
|
|
} else {
|
|
this.$message({ message: res.ErrorMessage, type: 'error' })
|
|
}
|
|
})
|
|
// .catch(error => {
|
|
// this.$message({ message: error, type: 'error' })
|
|
// })
|
|
}
|
|
}
|
|
}
|
|
</script>
|