// 中小学生均校园占地面积情况
$(function () {
// 标题增加年份
$('#title_text').prepend(config_now_year)
// 渲染年份列表 在nav.js中获取select_year
$('#select-year').append(select_year)
$('.select').on('click', '.placeholder', function (e) {
var parent = $(this).closest('.select');
if (!parent.hasClass('is-open')) {
parent.addClass('is-open');
$('.select.is-open').not(parent).removeClass('is-open');
} else {
parent.removeClass('is-open');
}
e.stopPropagation();
}).on('click', 'ul>li', function () {
var parent = $(this).closest('.select');
parent.removeClass('is-open').find('.placeholder').text($(this).text());
$(window).attr('location', "schoolCovers.html?year=" + $(this).text());
let on_year = $(this).text();
echartSizeInfo(on_year);
});
// var data = [
// {name: '南关区', smallClasses: '10', bigClasses: '5', sbigClasser: '2'},
// {name: '宽城区', smallClasses: '12', bigClasses: '10', sbigClasser: '5'},
// {name: '朝阳区', smallClasses: '5', bigClasses: '15', sbigClasser: '3'},
// {name: '二道区', smallClasses: '6', bigClasses: '20', sbigClasser: '5'},
// {name: '绿园区', smallClasses: '7', bigClasses: '25', sbigClasser: '8'},
// {name: '双阳区', smallClasses: '9', bigClasses: '29', sbigClasser: '6'},
// {name: '九台区', smallClasses: '55', bigClasses: '40', sbigClasser: '14'},
// {name: '农安县', smallClasses: '21', bigClasses: '12', sbigClasser: '5'},
// {name: '经开区', smallClasses: '29', bigClasses: '4', sbigClasser: '22'},
// {name: '净月区', smallClasses: '15', bigClasses: '12', sbigClasser: '6'},
// {name: '高新区', smallClasses: '3', bigClasses: '20', sbigClasser: '10'},
// {name: '汽车区', smallClasses: '5', bigClasses: '25', sbigClasser: '20'},
// {name: '榆树市', smallClasses: '40', bigClasses: '20', sbigClasser: '17'},
// {name: '德惠市', smallClasses: '30', bigClasses: '10', sbigClasser: '15'},
// ]
var tableDate = [];
echartSizeInfo(config_now_year);
function echartSizeInfo(year) {
$.post(config_serverIp + "dataex/report/QuerySimpleGP", JSON.stringify({
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
"query": {
"query_id": "A032",
"query_param": [
year
]
},
"query_cache": 0,
"query_count": [
"total"
],
"query_format": "json",
"query_group": [
"gatherregionc"
]
}), function (resport) {
var data = resport.result;
var indata = JSON.parse(data);
console.log(indata)
var nameData = [];
var smallClasses = [];
var bigClasses = [];
var sbigClasser = [];
indata.forEach((item, index) => {
if (item.stage === '小学') {
nameData.push(item.gatherregionc);
if (item.total == 0) {
smallClasses.push(0);
} else {
// smallClasses.push(Math.round(((item.studentno / item.total).toFixed(4)) * 100));
smallClasses.push((item.total / item.studentno).toFixed(1));
}
}
if (item.stage === '初中') {
if (item.total == 0) {
bigClasses.push(0);
} else {
// bigClasses.push(Math.round(((item.studentno / item.total).toFixed(4)) * 100));
bigClasses.push((item.total / item.studentno).toFixed(1));
}
}
if (item.stage === '高中') {
console.log(item.gatherregionc, item.total)
if (item.total == 0) {
sbigClasser.push(0);
} else {
// sbigClasser.push(Math.ceil(((item.studentno / item.total).toFixed(4)) * 100));
sbigClasser.push((item.total / item.studentno).toFixed(1));
}
}
});
sbigClasser.splice(0, 0, 0);
sbigClasser.splice(1, 0, 0);
// sbigClasser.splice(2, 0, 0);
sbigClasser.splice(9, 0, 0);
sbigClasser.splice(10, 0, 0);
sbigClasser.splice(13, 0, 0);
nameData.forEach((item, index) => {
tableDate.push({
name: item,
smallClasses: `${smallClasses[index]}`,
bigClasses: `${bigClasses[index]}`,
sbigClasser: `${sbigClasser[index]}`,
})
});
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echartSchoolCovers')); // 专任教师数量情况柱状图
console.log(smallClasses, bigClasses, sbigClasser)
option = {
// backgroundColor: '#00265f',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['小学', '初中', '高中'],
textStyle: {
color: '#fff'
}
},
grid: {
left: '0%',
top: '8%',
right: '0%',
bottom: '4%',
containLabel: true
},
xAxis: [{
type: 'category',
data: nameData,
axisLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.1)",
width: 1,
type: "solid"
},
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
// rotate:50,
show: true,
splitNumber: 15,
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: '12',
},
},
}],
yAxis: [{
type: 'value',
axisLabel: {
formatter: `{value}㎡`,
show: true,
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: '12',
},
},
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: '小学',
type: 'bar',
data: smallClasses,
barWidth: '15%', //柱子宽度
// barGap: 1, //柱子之间间距
label: {
show: true,
position: 'top'
},
itemStyle: {
normal: {
color: '#168EFE',
opacity: 1,
barBorderRadius: 5,
}
}
},
{
name: '初中',
type: 'bar',
data: bigClasses,
barWidth: '15%', //柱子宽度
// barGap: 1, //柱子之间间距
label: {
show: true,
position: 'top'
},
itemStyle: {
normal: {
color: '#2CD1C0',
opacity: 1,
barBorderRadius: 5,
}
}
},
{
name: '高中',
type: 'bar',
data: sbigClasser,
barWidth: '15%', //柱子宽度
// barGap: 1, //柱子之间间距
label: {
show: true,
position: 'top'
},
itemStyle: {
normal: {
color: '#FFDB65',
opacity: 1,
barBorderRadius: 5,
}
}
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
getTable();
}, 'json')
}
function getTable() {
$('#schoolCoversTable').empty();
$('#schoolCoversTable').append(
'| 序号 | 县域名称 | 小学 | 初中 | 高中 |
|---|
'
)
tableDate.forEach((item, index) => {
var newIndex = index + 1;
$('#schoolCoversTable').append(
"| " + newIndex + " | " + item.name + " | " + item.smallClasses + " | " + item.bigClasses + " | " + item.sbigClasser + " |
"
)
})
}
})