268 lines
7.0 KiB
Plaintext
268 lines
7.0 KiB
Plaintext
<template>
|
|
<div ref="monthly_reading_stats" style="width:100%;height:100%;" />
|
|
</template>
|
|
<script>
|
|
import echarts from 'echarts'
|
|
import { getReadingDataByMonth } 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, tpArr, adjArr, gArr, totalArr) {
|
|
const option = {
|
|
// backgroundColor: '#344b58',
|
|
title: {
|
|
text: 'Workload of Past 6 Months',
|
|
x: '4%',
|
|
top: 5,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: fontSize(0.16)
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
textStyle: {
|
|
color: '#999'
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
// borderWidth: 0,
|
|
top: '33%',
|
|
left: 80,
|
|
bottom: 25,
|
|
textStyle: {
|
|
color: '#999'
|
|
}
|
|
},
|
|
legend: {
|
|
x: '4%',
|
|
top: '13%',
|
|
icon: 'circle',
|
|
itemWidth: fontSize(0.1),
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: fontSize(0.14)
|
|
},
|
|
data: ['TP', 'AD', 'GL', 'Total']
|
|
},
|
|
xAxis: [
|
|
{
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'rgba(255,255,255,.1)',
|
|
// width: 1,
|
|
type: 'solid'
|
|
}
|
|
},
|
|
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
interval: 1,
|
|
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)
|
|
}
|
|
},
|
|
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: [
|
|
{
|
|
name: 'TP',
|
|
type: 'bar',
|
|
stack: 'Total',
|
|
barMaxWidth: fontSize(0.4),
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#2fA2FF',
|
|
|
|
label: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: fontSize(0.14)
|
|
},
|
|
position: 'inside',
|
|
formatter: function(p) {
|
|
return p.value > 0 ? p.value : ''
|
|
}
|
|
}
|
|
}
|
|
},
|
|
data: tpArr
|
|
},
|
|
|
|
{
|
|
name: 'AD',
|
|
type: 'bar',
|
|
stack: 'Total',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#27d08a',
|
|
barBorderRadius: 0,
|
|
label: {
|
|
show: true,
|
|
position: 'inside',
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: fontSize(0.14)
|
|
},
|
|
formatter: function(p) {
|
|
return p.value > 0 ? p.value : ''
|
|
}
|
|
}
|
|
}
|
|
},
|
|
data: adjArr
|
|
},
|
|
{
|
|
name: 'GL',
|
|
type: 'bar',
|
|
stack: 'Total',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#2f89cf',
|
|
barBorderRadius: 0,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: fontSize(0.14)
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: 'inside',
|
|
formatter: function(p) {
|
|
return p.value > 0 ? p.value : ''
|
|
}
|
|
}
|
|
}
|
|
},
|
|
data: gArr
|
|
},
|
|
{
|
|
name: 'Total',
|
|
type: 'line',
|
|
// "stack": "Total",
|
|
smooth: true, // 平滑曲线显示
|
|
symbolSize: 10,
|
|
symbol: 'circle',
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgba(252,230,48,1)',
|
|
// "barBorderRadius": 0,
|
|
label: {
|
|
// position: 'inside',
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: fontSize(0.14)
|
|
},
|
|
show: true,
|
|
position: 'top',
|
|
formatter: function(p) {
|
|
return p.value > 0 ? p.value : ''
|
|
}
|
|
}
|
|
}
|
|
},
|
|
data: totalArr
|
|
}
|
|
],
|
|
animationEasing: 'elasticOut',
|
|
animationDelayUpdate: function(idx) {
|
|
return idx * 5
|
|
}
|
|
}
|
|
if (this.$refs.monthly_reading_stats) {
|
|
this.myChart = echarts.init(this.$refs.monthly_reading_stats)
|
|
this.myChart.setOption(option)
|
|
}
|
|
},
|
|
getData() {
|
|
getReadingDataByMonth(Count).then(res => {
|
|
if (res.IsSuccess) {
|
|
if (res.Result) {
|
|
const xData = []
|
|
const tpArr = []
|
|
const adjArr = []
|
|
const gArr = []
|
|
const totalArr = []
|
|
const result = res.Result.reverse()
|
|
for (let i = 0; i < result.length; i++) {
|
|
xData.push(result[i].Month)
|
|
tpArr.push(result[i].Timepoint)
|
|
adjArr.push(result[i].Adjudication)
|
|
gArr.push(result[i].Global)
|
|
const total = result[i].Timepoint + result[i].Adjudication + result[i].Global
|
|
totalArr.push(total)
|
|
}
|
|
this.initChart(xData, tpArr, adjArr, gArr, totalArr)
|
|
}
|
|
} else {
|
|
this.$message({ message: res.ErrorMessage, type: 'error' })
|
|
}
|
|
})
|
|
// .catch(error => {
|
|
// this.$message({ message: error, type: 'error' })
|
|
// })
|
|
}
|
|
}
|
|
}
|
|
</script>
|