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