327 lines
14 KiB
HTML
327 lines
14 KiB
HTML
<!--#
|
|
layout("/layouts/platform.html"){
|
|
#-->
|
|
<!--
|
|
查询统计
|
|
Created by lyw on 2020/3/10 15:45
|
|
-->
|
|
<style>
|
|
|
|
</style>
|
|
<div id="app" v-cloak style="padding: 10px">
|
|
|
|
<div style="width: 100%;height: 43.5%;background: #fff;">
|
|
<div id="year_chart" style="height: 100%;box-sizing: border-box;padding: 20px"></div>
|
|
</div>
|
|
|
|
<div style="width: 100%;height: 5px;background-color: rgb(240,240,240)"></div>
|
|
<div style="width: 100%;background-color: rgb(240,240,240);">
|
|
<el-date-picker
|
|
@change="changYear"
|
|
style="width: 100%;"
|
|
v-model="year"
|
|
type="year"
|
|
value-format="yyyy"
|
|
placeholder="选择年">
|
|
</el-date-picker>
|
|
</div>
|
|
<div style="width: 100%;height: 5px;background-color: rgb(240,240,240)"></div>
|
|
<div style="width: 100%;height: 52.5%;background: #fff;">
|
|
<el-row style="height: 100%">
|
|
<!-- <el-col :span="8" style="box-sizing: border-box;padding: 20px;height: 100%">
|
|
<div id="bj_chart"
|
|
style="height: 100%;border-right: 2px rgb(240,240,240) solid"></div>
|
|
</el-col>-->
|
|
<el-col :span="24" style="box-sizing: border-box;padding: 20px;height: 100%">
|
|
<div id="ps_chart"
|
|
style="height: 100%;border-right: 2px rgb(240,240,240) solid"></div>
|
|
</el-col>
|
|
<!-- <el-col :span="8" style="box-sizing: border-box;padding: 20px;height: 100%">
|
|
<div id="ms_chart" style="height: 100%;"></div>
|
|
</el-col>-->
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var vue = new Vue({
|
|
el: '#app',
|
|
data: function () {
|
|
var self = this
|
|
return {
|
|
year: new Date().getFullYear().toString(),
|
|
}
|
|
},
|
|
methods: {
|
|
changYear: function () {
|
|
var self = this
|
|
self.getData3()
|
|
self.getData4()
|
|
self.getData5()
|
|
},
|
|
async getData1() {
|
|
const resp = await $.get("/platform/zgfw/jzgznbmdj/sjkb/getData1")
|
|
if (resp.code === 0) {
|
|
const dom = document.getElementById("year_chart")
|
|
const myChart = echarts.init(dom)
|
|
const option = {
|
|
color: ["#5470c6", "#91cc75"],
|
|
title: {
|
|
text: '年度报名趋势'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: resp.data.names
|
|
},
|
|
grid: {
|
|
left: '4%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
xAxis: [
|
|
{
|
|
name: '年份',
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: resp.data.years
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
name: '人数',
|
|
type: 'value'
|
|
}
|
|
],
|
|
series: resp.data.arr
|
|
};
|
|
if (option && typeof option === "object") {
|
|
myChart.setOption(option, true);
|
|
myChart.on('click', function (params) {
|
|
this.year = params.name
|
|
// self.getData2()
|
|
// this.getData3()
|
|
this.getData4()
|
|
// this.getData5()
|
|
});
|
|
}
|
|
}
|
|
|
|
},
|
|
// getData2: function () {
|
|
// var self = this
|
|
// $.get("/platform/zgfw/jzgznbmdj/sjkb/getData2", {'year': self.year}, function (data) {
|
|
// if (data.code == 0) {
|
|
// var dom = document.getElementById("lxzb_chart");
|
|
// var myChart = echarts.init(dom, 'shine');
|
|
// option = {
|
|
// title: {
|
|
// text: self.year + '年报名类型占比',
|
|
// subtext: '',
|
|
// left: 'center'
|
|
// },
|
|
// tooltip: {
|
|
// trigger: 'item',
|
|
// formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
// },
|
|
//
|
|
// series: [
|
|
// {
|
|
// name: '人数占比',
|
|
// type: 'pie',
|
|
// radius: '55%',
|
|
// center: ['50%', '55%'],
|
|
// data: data.data.data,
|
|
// emphasis: {
|
|
// itemStyle: {
|
|
// shadowBlur: 10,
|
|
// shadowOffsetX: 0,
|
|
// shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
// }
|
|
// }
|
|
// }
|
|
// ]
|
|
// };
|
|
// if (option && typeof option === "object") {
|
|
// myChart.setOption(option, true);
|
|
// }
|
|
// }
|
|
// })
|
|
// },
|
|
getData3: function () {
|
|
var self = this
|
|
$.get("/platform/zgfw/jzgznbmdj/sjkb/getData3", {'year': self.year}, function (data) {
|
|
if (data.code == 0) {
|
|
var dom = document.getElementById("bj_chart");
|
|
var myChart = echarts.init(dom, 'shine');
|
|
option = {
|
|
title: {
|
|
text: self.year + '年幼升小申请班级占比',
|
|
subtext: '',
|
|
left: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
},
|
|
|
|
series: [
|
|
{
|
|
name: '人数占比',
|
|
type: 'pie',
|
|
radius: '55%',
|
|
center: ['50%', '55%'],
|
|
data: data.data,
|
|
label: {
|
|
align: 'left',
|
|
normal: {
|
|
formatter: function (v) {
|
|
return v.name.length > 5 ? v.name.substr(0, 5) + "..." : v.name;
|
|
},
|
|
textStyle: {
|
|
// fontSize : 8
|
|
}
|
|
}
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
if (option && typeof option === "object") {
|
|
myChart.setOption(option, true);
|
|
}
|
|
}
|
|
})
|
|
},
|
|
getData4: function () {
|
|
var self = this
|
|
$.get("/platform/zgfw/jzgznbmdj/sjkb/getData4", {'year': self.year}, function (data) {
|
|
if (data.code == 0) {
|
|
var dom = document.getElementById("ps_chart");
|
|
var myChart = echarts.init(dom, 'shine');
|
|
option = {
|
|
title: {
|
|
text: self.year + '年小学申请学校占比',
|
|
subtext: '',
|
|
left: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
},
|
|
series: [
|
|
{
|
|
name: '人数占比',
|
|
type: 'pie',
|
|
radius: '55%',
|
|
center: ['50%', '55%'],
|
|
data: data.data,
|
|
formatter: function (name) {
|
|
return name.length > 5 ? name.substr(0, 5) + "..." : name;
|
|
},
|
|
label: {
|
|
align: 'left',
|
|
normal: {
|
|
formatter: function (v) {
|
|
return v.name.length > 5 ? v.name.substr(0, 5) + "..." : v.name;
|
|
},
|
|
textStyle: {
|
|
// fontSize : 8
|
|
}
|
|
}
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
if (option && typeof option === "object") {
|
|
myChart.setOption(option, true);
|
|
}
|
|
}
|
|
})
|
|
},
|
|
getData5: function () {
|
|
var self = this
|
|
$.get("/platform/zgfw/jzgznbmdj/sjkb/getData5", {'year': self.year}, function (data) {
|
|
if (data.code == 0) {
|
|
var dom = document.getElementById("ms_chart");
|
|
var myChart = echarts.init(dom, 'shine');
|
|
option = {
|
|
color: ["#5470c6", "#91cc75"],
|
|
title: {
|
|
text: self.year + '年初升高申请学校占比',
|
|
subtext: '',
|
|
left: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
},
|
|
|
|
series: [
|
|
{
|
|
name: '人数占比',
|
|
type: 'pie',
|
|
radius: '55%',
|
|
center: ['50%', '55%'],
|
|
label: {
|
|
align: 'left',
|
|
normal: {
|
|
formatter: function (v) {
|
|
return v.name.length > 5 ? v.name.substr(0, 5) + "..." : v.name;
|
|
},
|
|
textStyle: {
|
|
// fontSize : 8
|
|
}
|
|
}
|
|
},
|
|
data: data.data,
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
if (option && typeof option === "object") {
|
|
myChart.setOption(option, true);
|
|
}
|
|
}
|
|
})
|
|
},
|
|
},
|
|
created() {
|
|
this.getData1()
|
|
// this.getData2();
|
|
this.getData3()
|
|
this.getData4()
|
|
this.getData5()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<!--#
|
|
}
|
|
#--> |