165 lines
5.6 KiB
HTML
165 lines
5.6 KiB
HTML
<!--#
|
|
layout("/layouts/platform.html"){
|
|
#-->
|
|
<script src="https://cdn.jsdelivr.net/npm/echarts@4.1.0/dist/echarts.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@4.0.2"></script>
|
|
<style>
|
|
/*.el-card__body{*/
|
|
/* height: 100%;*/
|
|
/*}*/
|
|
.echarts {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
<div id="app" v-cloak class="p10">
|
|
<el-card>
|
|
<v-chart style="width: 100%;height: 800px" theme="mine" :options="yearOptions2"></v-chart>
|
|
</el-card>
|
|
|
|
</div>
|
|
<script>
|
|
|
|
let vm = new Vue({
|
|
el:'#app',
|
|
data(){
|
|
return{
|
|
yearOptions2:{
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['结题优秀','结题通过','立项','总申报']
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '3%',
|
|
bottom: '15%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'value'
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: []
|
|
},
|
|
series: [
|
|
{
|
|
name: '结题优秀',
|
|
type: 'bar',
|
|
stack: '结题优秀数',
|
|
label: {
|
|
show: true,
|
|
position: 'insideRight'
|
|
},
|
|
data: []
|
|
},
|
|
{
|
|
name: '结题通过',
|
|
type: 'bar',
|
|
stack: '结题通过数',
|
|
label: {
|
|
show: true,
|
|
position: 'insideRight'
|
|
},
|
|
data: []
|
|
},
|
|
{
|
|
name: '立项',
|
|
type: 'bar',
|
|
stack: '立项数',
|
|
label: {
|
|
show: true,
|
|
position: 'insideRight'
|
|
},
|
|
data: []
|
|
},
|
|
{
|
|
name: '总申报',
|
|
type: 'bar',
|
|
stack: '总申报数',
|
|
label: {
|
|
show: true,
|
|
position: 'insideRight'
|
|
},
|
|
data: []
|
|
}
|
|
]
|
|
},
|
|
unionList:[],
|
|
yearList:[],
|
|
dataList:[]
|
|
}
|
|
},
|
|
methods:{
|
|
dataFormatter(year){
|
|
let o = {}
|
|
let totalArr = []
|
|
for (let y of this.yearList){
|
|
for (let d of this.dataList[y]){
|
|
const v = {name:d.unionname,value:d.totalnum}
|
|
totalArr.push(v)
|
|
}
|
|
}
|
|
o.total = totalArr
|
|
let lxArr = []
|
|
for (let y of this.yearList){
|
|
for (let d of this.dataList[y]){
|
|
const v = {name:d.unionname,value:d.lxnum}
|
|
lxArr.push(v)
|
|
}
|
|
}
|
|
o.lx = lxArr
|
|
let passArr = []
|
|
for (let y of this.yearList){
|
|
for (let d of this.dataList[y]){
|
|
const v = {name:d.unionname,value:d.passnum}
|
|
passArr.push(v)
|
|
}
|
|
}
|
|
o.pass = passArr
|
|
let goodArr = []
|
|
for (let y of this.yearList){
|
|
for (let d of this.dataList[y]){
|
|
const v = {name:d.unionname,value:d.goodnum}
|
|
goodArr.push(v)
|
|
}
|
|
}
|
|
o.good = goodArr
|
|
console.log(o)
|
|
return o
|
|
},
|
|
async getUnionList(){
|
|
const {data} = await $.get('/platform/syr/cxtj/yeartj/getUnionList',{})
|
|
for (let o of data){
|
|
this.unionList.push(o.unionname)
|
|
}
|
|
},
|
|
async getDataList(){
|
|
const {data} = await $.get('/platform/syr/cxtj/yeartj/data',{})
|
|
this.yearList = Object.keys(data)
|
|
this.dataList = data
|
|
},
|
|
async inita(){
|
|
this.yearOptions2.yAxis.data = this.unionList
|
|
this.yearOptions2.series[0].data = this.dataFormatter(2020).good
|
|
this.yearOptions2.series[1].data = this.dataFormatter(2020).pass
|
|
this.yearOptions2.series[2].data = this.dataFormatter(2020).lx
|
|
this.yearOptions2.series[3].data = this.dataFormatter(2020).total
|
|
}
|
|
},
|
|
async created(){
|
|
await this.getUnionList()
|
|
await this.getDataList()
|
|
await this.inita()
|
|
}
|
|
})
|
|
</script>
|
|
<!--#
|
|
}
|
|
#-->
|