first commit
This commit is contained in:
@@ -0,0 +1,164 @@
|
||||
<!--#
|
||||
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>
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
Reference in New Issue
Block a user