|
|
// 专任教师年龄情况
|
|
|
$(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', "fulltimeTeachersAge.html?year=" + $(this).text());
|
|
|
let on_year = $(this).text();
|
|
|
echartSizeInfo(on_year);
|
|
|
|
|
|
});
|
|
|
// var data = [
|
|
|
// {name: '南关区', info1: '10%', info2: '5%', info3: '2%', info4: '12%', info5: '4%', info6: '9%', info7: '22%', info8: '7%', info9: '8%',},
|
|
|
// {name: '宽城区', info1: '6%', info2: '1%', info3: '2%', info4: '7%', info5: '4%', info6: '6%', info7: '16%', info8: '10%', info9: '18%',},
|
|
|
// {name: '朝阳区', info1: '12%', info2: '5%', info3: '6%', info4: '8%', info5: '12%', info6: '17%', info7: '4%', info8: '8%', info9: '9%',},
|
|
|
// {name: '二道区', info1: '3%', info2: '7%', info3: '3%', info4: '19%', info5: '8%', info6: '4%', info7: '7%', info8: '18%', info9: '12%',},
|
|
|
// {name: '绿园区', info1: '6%', info2: '9%', info3: '2%', info4: '15%', info5: '4%', info6: '2%', info7: '22%', info8: '7%', info9: '8%',},
|
|
|
// {name: '双阳区', info1: '10%', info2: '3%', info3: '7%', info4: '11%', info5: '4%', info6: '9%', info7: '12%', info8: '10%', info9: '8%',},
|
|
|
// {name: '九台区', info1: '7%', info2: '15%', info3: '3%', info4: '5%', info5: '6%', info6: '8%', info7: '22%', info8: '9%', info9: '12%',},
|
|
|
// {name: '农安县', info1: '12%', info2: '15%', info3: '2%', info4: '12%', info5: '4%', info6: '9%', info7: '12%', info8: '2%', info9: '2%',},
|
|
|
// {name: '经开区', info1: '2%', info2: '15%', info3: '12%', info4: '12%', info5: '2%', info6: '9%', info7: '6%', info8: '7%', info9: '12%',},
|
|
|
// {name: '净月区', info1: '18%', info2: '2%', info3: '2%', info4: '12%', info5: '4%', info6: '9%', info7: '8%', info8: '7%', info9: '8%',},
|
|
|
// {name: '高新区', info1: '12%', info2: '5%', info3: '2%', info4: '14%', info5: '12%', info6: '2%', info7: '22%', info8: '7%', info9: '19%',},
|
|
|
// {name: '汽车区', info1: '12%', info2: '5%', info3: '2%', info4: '12%', info5: '4%', info6: '9%', info7: '22%', info8: '7%', info9: '8%',},
|
|
|
// {name: '榆树市', info1: '10%', info2: '5%', info3: '2%', info4: '12%', info5: '4%', info6: '9%', info7: '22%', info8: '7%', info9: '8%',},
|
|
|
// {name: '德惠市', info1: '10%', info2: '5%', info3: '2%', info4: '12%', info5: '4%', info6: '9%', info7: '22%', info8: '7%', info9: '8%',},
|
|
|
// ]
|
|
|
|
|
|
|
|
|
var tableData = [];
|
|
|
var typeOfBe = '小学';
|
|
|
|
|
|
$('#Sxiaoxue').click(function (event) {
|
|
|
$(this).addClass('active');
|
|
|
$(this).siblings().removeClass('active');
|
|
|
typeOfBe = '小学';
|
|
|
tableData = [];
|
|
|
echartSizeInfo(config_now_year);
|
|
|
})
|
|
|
|
|
|
$('#Schuzhong').click(function (event) {
|
|
|
$(this).addClass('active');
|
|
|
$(this).siblings().removeClass('active');
|
|
|
typeOfBe = '初中';
|
|
|
tableData = [];
|
|
|
echartSizeInfo(config_now_year);
|
|
|
})
|
|
|
|
|
|
$('#Sgaozhong').click(function (event) {
|
|
|
$(this).addClass('active');
|
|
|
$(this).siblings().removeClass('active');
|
|
|
typeOfBe = '高中';
|
|
|
tableData = [];
|
|
|
echartSizeInfo(config_now_year);
|
|
|
})
|
|
|
|
|
|
|
|
|
echartSizeInfo(config_now_year);
|
|
|
|
|
|
|
|
|
function echartSizeInfo(year) {
|
|
|
|
|
|
$.post(config_serverIp + "dataex/report/QuerySimpleGP", JSON.stringify({
|
|
|
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
|
|
|
"query": {
|
|
|
"query_id": "A029",
|
|
|
"query_param": [
|
|
|
year
|
|
|
]
|
|
|
},
|
|
|
"query_cache": 0,
|
|
|
"query_count": [
|
|
|
"total"
|
|
|
],
|
|
|
"query_format": "json",
|
|
|
"query_group": [
|
|
|
"gatherregionc"
|
|
|
]
|
|
|
}), function (resport) {
|
|
|
|
|
|
var data = resport.result;
|
|
|
var indata = [];
|
|
|
if(data && data !== ""){
|
|
|
indata = JSON.parse(data);
|
|
|
}
|
|
|
var nameData = [];
|
|
|
var info1 = [];
|
|
|
var info2 = [];
|
|
|
var info3 = [];
|
|
|
var info4 = [];
|
|
|
var info5 = [];
|
|
|
var info6 = [];
|
|
|
var info7 = [];
|
|
|
var info8 = [];
|
|
|
var info9 = [];
|
|
|
|
|
|
|
|
|
indata.forEach((item, index) => {
|
|
|
if (item.stage === typeOfBe) {
|
|
|
if (item.didgroup === "24岁及以下") {
|
|
|
nameData.push(item.gatherregionc);
|
|
|
if (item.teacherno == 0) {
|
|
|
info1.push(0);
|
|
|
} else {
|
|
|
info1.push(Math.round(((item.total / item.teacherno).toFixed(4)) * 100));
|
|
|
}
|
|
|
|
|
|
}
|
|
|
if (item.didgroup === "25-29岁") {
|
|
|
if (item.teacherno == 0) {
|
|
|
info2.push(0);
|
|
|
} else {
|
|
|
info2.push(Math.round(((item.total / item.teacherno).toFixed(4)) * 100));
|
|
|
}
|
|
|
|
|
|
}
|
|
|
if (item.didgroup === "30-34岁") {
|
|
|
if (item.teacherno == 0) {
|
|
|
info3.push(0);
|
|
|
} else {
|
|
|
info3.push(Math.round(((item.total / item.teacherno).toFixed(4)) * 100));
|
|
|
}
|
|
|
|
|
|
}
|
|
|
if (item.didgroup === "35-39岁") {
|
|
|
if (item.teacherno == 0) {
|
|
|
info4.push(0);
|
|
|
} else {
|
|
|
info4.push(Math.round(((item.total / item.teacherno).toFixed(4)) * 100));
|
|
|
}
|
|
|
|
|
|
}
|
|
|
if (item.didgroup === "40-44岁") {
|
|
|
if (item.teacherno == 0) {
|
|
|
info5.push(0);
|
|
|
} else {
|
|
|
info5.push(Math.round(((item.total / item.teacherno).toFixed(4)) * 100));
|
|
|
}
|
|
|
|
|
|
}
|
|
|
if (item.didgroup === "45-49岁") {
|
|
|
if (item.teacherno == 0) {
|
|
|
info6.push(0);
|
|
|
} else {
|
|
|
info6.push(Math.round(((item.total / item.teacherno).toFixed(4)) * 100));
|
|
|
}
|
|
|
|
|
|
}
|
|
|
if (item.didgroup === "50-54岁") {
|
|
|
if (item.teacherno == 0) {
|
|
|
info7.push(0);
|
|
|
} else {
|
|
|
info7.push(Math.round(((item.total / item.teacherno).toFixed(4)) * 100));
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
if (item.didgroup === "55-59岁") {
|
|
|
if (item.teacherno == 0) {
|
|
|
info8.push(0);
|
|
|
} else {
|
|
|
info8.push(Math.round(((item.total / item.teacherno).toFixed(4)) * 100));
|
|
|
}
|
|
|
|
|
|
}
|
|
|
if (item.didgroup === "60岁及以上") {
|
|
|
if (item.teacherno == 0) {
|
|
|
info9.push(0);
|
|
|
} else {
|
|
|
info9.push(Math.round(((item.total / item.teacherno).toFixed(4)) * 100));
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
|
|
|
nameData.forEach((item, index) => {
|
|
|
tableData.push({
|
|
|
name: item,
|
|
|
info1: `${info1[index]}%`,
|
|
|
info2: `${info2[index]}%`,
|
|
|
info3: `${info3[index]}%`,
|
|
|
info4: `${info4[index]}%`,
|
|
|
info5: `${info5[index]}%`,
|
|
|
info6: `${info6[index]}%`,
|
|
|
info7: `${info7[index]}%`,
|
|
|
info8: `${info8[index]}%`,
|
|
|
info9: `${info9[index]}%`,
|
|
|
})
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
var myChart = echarts.init(document.getElementById('echartTeacherAge')); // 专任教师年龄情况柱状图
|
|
|
|
|
|
|
|
|
option = {
|
|
|
// backgroundColor: '#00265f',
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
type: 'shadow'
|
|
|
}
|
|
|
},
|
|
|
|
|
|
legend: {
|
|
|
data: ['24岁及以下', '25-29岁', '30-34岁', '35-39岁', '40-44岁', '45-49岁', '50-54岁', '55-59岁', '60岁及以上'],
|
|
|
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: '24岁及以下',
|
|
|
stack: '年龄',
|
|
|
type: 'bar',
|
|
|
data: info1,
|
|
|
barWidth: '25%', //柱子宽度
|
|
|
// barGap: 1, //柱子之间间距
|
|
|
// label: {
|
|
|
// show: true,
|
|
|
// position: 'top'
|
|
|
// },
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: '#00BBFF',
|
|
|
opacity: 1,
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
name: '25-29岁',
|
|
|
stack: '年龄',
|
|
|
type: 'bar',
|
|
|
data: info2,
|
|
|
barWidth: '25%', //柱子宽度
|
|
|
// barGap: 1, //柱子之间间距
|
|
|
// label: {
|
|
|
// show: true,
|
|
|
// position: 'top'
|
|
|
// },
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: '#ffaa33',
|
|
|
opacity: 1,
|
|
|
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
name: '30-34岁',
|
|
|
stack: '年龄',
|
|
|
type: 'bar',
|
|
|
data: info3,
|
|
|
barWidth: '25%', //柱子宽度
|
|
|
// barGap: 1, //柱子之间间距
|
|
|
// label: {
|
|
|
// show: true,
|
|
|
// position: 'top'
|
|
|
// },
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: '#dddddd',
|
|
|
opacity: 1,
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
name: '35-39岁',
|
|
|
stack: '年龄',
|
|
|
type: 'bar',
|
|
|
data: info4,
|
|
|
barWidth: '25%', //柱子宽度
|
|
|
// barGap: 1, //柱子之间间距
|
|
|
// label: {
|
|
|
// show: true,
|
|
|
// position: 'top'
|
|
|
// },
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: '#ffff00',
|
|
|
opacity: 1,
|
|
|
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
name: '40-44岁',
|
|
|
stack: '年龄',
|
|
|
type: 'bar',
|
|
|
data: info5,
|
|
|
barWidth: '25%', //柱子宽度
|
|
|
// barGap: 1, //柱子之间间距
|
|
|
// label: {
|
|
|
// show: true,
|
|
|
// position: 'top'
|
|
|
// },
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: '#5555ff',
|
|
|
opacity: 1,
|
|
|
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
name: '45-49岁',
|
|
|
stack: '年龄',
|
|
|
type: 'bar',
|
|
|
data: info6,
|
|
|
barWidth: '25%', //柱子宽度
|
|
|
// barGap: 1, //柱子之间间距
|
|
|
// label: {
|
|
|
// show: true,
|
|
|
// position: 'top'
|
|
|
// },
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: '#00dd00',
|
|
|
opacity: 1,
|
|
|
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
name: '50-54岁',
|
|
|
stack: '年龄',
|
|
|
type: 'bar',
|
|
|
data: info7,
|
|
|
barWidth: '25%', //柱子宽度
|
|
|
// barGap: 1, //柱子之间间距
|
|
|
// label: {
|
|
|
// show: true,
|
|
|
// position: 'top'
|
|
|
// },
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: '#c71585',
|
|
|
opacity: 1,
|
|
|
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
name: '55-59岁',
|
|
|
stack: '年龄',
|
|
|
type: 'bar',
|
|
|
data: info8,
|
|
|
barWidth: '25%', //柱子宽度
|
|
|
// barGap: 1, //柱子之间间距
|
|
|
// label: {
|
|
|
// show: true,
|
|
|
// position: 'top'
|
|
|
// },
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: '#8b4513',
|
|
|
opacity: 1,
|
|
|
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
name: '60岁及以上',
|
|
|
stack: '年龄',
|
|
|
type: 'bar',
|
|
|
data: info9,
|
|
|
barWidth: '25%', //柱子宽度
|
|
|
// barGap: 1, //柱子之间间距
|
|
|
// label: {
|
|
|
// show: true,
|
|
|
// position: 'top'
|
|
|
// },
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: '#444444',
|
|
|
opacity: 1,
|
|
|
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
|
|
|
]
|
|
|
};
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", function () {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
getTable();
|
|
|
}, 'json')
|
|
|
}
|
|
|
|
|
|
function getTable() {
|
|
|
|
|
|
$('#teacherAgeTable').empty();
|
|
|
$('#teacherAgeTable').append(
|
|
|
'<tr style="line-height: 0.35rem;"><th style="text-align: center; color: #fff; border-right: 1px solid rgba(255,255,255,.2); width: 5%; background: #0044bb;">序号</th><th style="text-align: center; color: #fff; border-right: 1px solid rgba(255,255,255,.2); width: 10%; background: #0044bb;">县域名称</th><th style="text-align: center; color: #fff; border-right: 1px solid rgba(255,255,255,.2); width: 9.4%; background: #0044bb;">24岁及以下</th><th style="text-align: center; color: #fff; border-right: 1px solid rgba(255,255,255,.2); width: 9.4%; background: #0044bb;">25-29岁</th><th style="text-align: center; color: #fff; border-right: 1px solid rgba(255,255,255,.2); width: 9.4%; background: #0044bb;">30-34岁</th><th style="text-align: center; color: #fff; border-right: 1px solid rgba(255,255,255,.2); width: 9.4%; background: #0044bb;">35-39岁</th><th style="text-align: center; color: #fff; border-right: 1px solid rgba(255,255,255,.2); width: 9.4%; background: #0044bb;">40-44岁</th><th style="text-align: center; color: #fff; border-right: 1px solid rgba(255,255,255,.2); width: 9.4%; background: #0044bb;">45-49岁</th><th style="text-align: center; color: #fff; border-right: 1px solid rgba(255,255,255,.2); width: 9.4%; background: #0044bb;">50-54岁</th><th style="text-align: center; color: #fff; border-right: 1px solid rgba(255,255,255,.2); width: 9.4%; background: #0044bb;">55-59岁</th><th style="text-align: center; color: #fff; width: 9.4%; background: #0044bb;">60岁及以上</th></tr>'
|
|
|
)
|
|
|
|
|
|
tableData.forEach((item, index) => {
|
|
|
var newIndex = index + 1;
|
|
|
$('#teacherAgeTable').append(
|
|
|
"<tr style='line-height: 0.35rem; border-bottom: 1px solid rgba(255,255,255,.2)'><td style='text-align: center; color: rgba(255,255,255,.6); border-right: 1px solid rgba(255,255,255,.2); width: 5%;'>" + newIndex + "</td><td style='text-align: center; color: rgba(255,255,255,.6); border-right: 1px solid rgba(255,255,255,.2); width: 10%;'>" + item.name + "</td><td style='text-align: center; color: rgba(255,255,255,.6); width: 9.4%; border-right: 1px solid rgba(255,255,255,.2);'>" + item.info1 + "</td><td style='text-align: center; color: rgba(255,255,255,.6); width: 9.4%; border-right: 1px solid rgba(255,255,255,.2);'>" + item.info2 + "</td><td style='text-align: center; color: rgba(255,255,255,.6); width: 9.4%; border-right: 1px solid rgba(255,255,255,.2);'>" + item.info3 + "</td><td style='text-align: center; color: rgba(255,255,255,.6); width: 9.4%; border-right: 1px solid rgba(255,255,255,.2);'>" + item.info4 + "</td><td style='text-align: center; color: rgba(255,255,255,.6); width: 9.4%; border-right: 1px solid rgba(255,255,255,.2);'>" + item.info5 + "</td><td style='text-align: center; color: rgba(255,255,255,.6); width: 9.4%; border-right: 1px solid rgba(255,255,255,.2);'>" + item.info6 + "</td><td style='text-align: center; color: rgba(255,255,255,.6); width: 9.4%; border-right: 1px solid rgba(255,255,255,.2);'>" + item.info7 + "</td><td style='text-align: center; color: rgba(255,255,255,.6); width: 9.4%; border-right: 1px solid rgba(255,255,255,.2);'>" + item.info8 + "</td><td style='text-align: center; color: rgba(255,255,255,.6); width: 9.4%;'>" + item.info9 + "</td></tr>"
|
|
|
)
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
}) |
