You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
bigData_XT/js/fulltimeTeachersRecord.js

378 lines
16 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

// 专任教师学历情况
$(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', "fulltimeTeachersRecord.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%' },
// { name: '宽城区', info1: '6%', info2: '1%', info3: '2%', info4: '7%', info5: '4%' },
// { name: '朝阳区', info1: '12%', info2: '5%', info3: '6%', info4: '8%', info5: '12%' },
// { name: '二道区', info1: '3%', info2: '7%', info3: '3%', info4: '19%', info5: '8%' },
// { name: '绿园区', info1: '6%', info2: '9%', info3: '2%', info4: '15%', info5: '4%' },
// { name: '双阳区', info1: '10%', info2: '3%', info3: '7%', info4: '11%', info5: '4%' },
// { name: '九台区', info1: '7%', info2: '15%', info3: '3%', info4: '5%', info5: '6%' },
// { name: '农安县', info1: '12%', info2: '15%', info3: '2%', info4: '12%', info5: '4%' },
// { name: '经开区', info1: '2%', info2: '15%', info3: '12%', info4: '12%', info5: '2%' },
// { name: '净月区', info1: '18%', info2: '2%', info3: '2%', info4: '12%', info5: '4%' },
// { name: '高新区', info1: '12%', info2: '5%', info3: '2%', info4: '14%', info5: '12%' },
// { name: '汽车区', info1: '12%', info2: '5%', info3: '2%', info4: '12%', info5: '4%' },
// { name: '榆树市', info1: '10%', info2: '5%', info3: '2%', info4: '12%', info5: '4%' },
// { name: '德惠市', info1: '10%', info2: '5%', info3: '2%', info4: '12%', info5: '4%' },
// ]
var tableDate = [];
var typeOfBe = '小学';
$('#Sxiaoxue').click(function (event) {
$(this).addClass('active');
$(this).siblings().removeClass('active');
typeOfBe = '小学';
tableDate = [];
echartSizeInfo(config_now_year);
})
$('#Schuzhong').click(function (event) {
$(this).addClass('active');
$(this).siblings().removeClass('active');
typeOfBe = '初中';
tableDate = [];
echartSizeInfo(config_now_year);
})
$('#Sgaozhong').click(function (event) {
$(this).addClass('active');
$(this).siblings().removeClass('active');
typeOfBe = '高中';
tableDate = [];
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": "A030",
"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);
var nameData = [];
//var info0 = [];
var info1 = [];
var info2 = [];
var info3 = [];
var info4 = [];
var info5 = [];
indata.forEach((item, index) => {
if (item.stage === typeOfBe) {
// if (item.didgroup.trim() === "博士研究生") {
// if(nameData.indexOf(item.gatherregionc) < 0){
// nameData.push(item.gatherregionc);
// }
// console.log("nameDatanameDatanameData:",nameData)
// if (item.teacherno == 0) {
// info0.push(0);
// } else {
// info0.push(Math.round(((item.total / item.teacherno).toFixed(4)) * 100));
// }
// }
if (item.didgroup.trim() === "研究生毕业") {
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.trim() === "本科毕业") {
if (item.teacherno == 0) {
info2.push(0);
} else {
info2.push(Math.round(((item.total / item.teacherno).toFixed(4)) * 100));
}
}
if (item.didgroup.trim() === "专科毕业") {
if (item.teacherno == 0) {
info3.push(0);
} else {
info3.push(Math.round(((item.total / item.teacherno).toFixed(4)) * 100));
}
}
if (item.didgroup.trim() === "高中阶段毕业") {
if (item.teacherno == 0) {
info4.push(0);
} else {
info4.push(Math.round(((item.total / item.teacherno).toFixed(4)) * 100));
}
}
if (item.didgroup.trim() === "高中阶段以下毕业") {
if (item.teacherno == 0) {
info5.push(0);
} else {
info5.push(Math.round(((item.total / item.teacherno).toFixed(4)) * 100));
}
}
}
});
nameData.forEach((item, index) => {
tableDate.push({
name: item,
info1: `${info1[index]}%`,
info2: `${info2[index]}%`,
info3: `${info3[index]}%`,
info4: `${info4[index]}%`,
info5: `${info5[index]}%`,
})
});
// 基于准备好的dom初始化echarts实例
var myChart = echarts.init(document.getElementById('echartTeacherRecord')); // 专任教师年龄情况柱状图
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: '研究生毕业',
stack: '学历',
type: 'bar',
data: info1,
barWidth: '25%', //柱子宽度
// barGap: 1, //柱子之间间距
// label: {
// show: true,
// position: 'top'
// },
itemStyle: {
normal: {
color: '#00BBFF',
opacity: 1,
}
}
},
{
name: '本科毕业',
stack: '学历',
type: 'bar',
data: info2,
barWidth: '25%', //柱子宽度
// barGap: 1, //柱子之间间距
// label: {
// show: true,
// position: 'top'
// },
itemStyle: {
normal: {
color: '#ffaa33',
opacity: 1,
}
}
},
{
name: '专科毕业',
stack: '学历',
type: 'bar',
data: info3,
barWidth: '25%', //柱子宽度
// barGap: 1, //柱子之间间距
// label: {
// show: true,
// position: 'top'
// },
itemStyle: {
normal: {
color: '#dddddd',
opacity: 1,
}
}
},
{
name: '高中阶段毕业',
stack: '学历',
type: 'bar',
data: info4,
barWidth: '25%', //柱子宽度
// barGap: 1, //柱子之间间距
// label: {
// show: true,
// position: 'top'
// },
itemStyle: {
normal: {
color: '#ffff00',
opacity: 1,
}
}
},
{
name: '高中阶段以下毕业',
stack: '学历',
type: 'bar',
data: info5,
barWidth: '25%', //柱子宽度
// barGap: 1, //柱子之间间距
// label: {
// show: true,
// position: 'top'
// },
itemStyle: {
normal: {
color: '#5555ff',
opacity: 1,
}
}
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
getTable();
}, 'json')
}
function getTable() {
$('#teacherRecordTable').empty();
$('#teacherRecordTable').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: 15%; background: #0044bb;">县域名称</th><th style="text-align: center; color: #fff; border-right: 1px solid rgba(255,255,255,.2); width: 16%; background: #0044bb;">研究生</th><th style="text-align: center; color: #fff; border-right: 1px solid rgba(255,255,255,.2); width: 16%; background: #0044bb;">本科</th><th style="text-align: center; color: #fff; border-right: 1px solid rgba(255,255,255,.2); width: 16%; background: #0044bb;">专科</th><th style="text-align: center; color: #fff; border-right: 1px solid rgba(255,255,255,.2); width: 16%; background: #0044bb;">高中阶段</th><th style="text-align: center; color: #fff; width: 16%; background: #0044bb;">高中及以下</th></tr>'
)
tableDate.forEach((item, index) => {
var newIndex = index + 1;
$('#teacherRecordTable').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: 15%;'>" + item.name + "</td><td style='text-align: center; color: rgba(255,255,255,.6); width: 16%; border-right: 1px solid rgba(255,255,255,.2);'>" + item.info1 + "</td><td style='text-align: center; color: rgba(255,255,255,.6); width: 16%; border-right: 1px solid rgba(255,255,255,.2);'>" + item.info2 + "</td><td style='text-align: center; color: rgba(255,255,255,.6); width: 16%; border-right: 1px solid rgba(255,255,255,.2);'>" + item.info3 + "</td><td style='text-align: center; color: rgba(255,255,255,.6); width: 16%; border-right: 1px solid rgba(255,255,255,.2);'>" + item.info4 + "</td><td style='text-align: center; color: rgba(255,255,255,.6); width: 16%;'>" + item.info5 + "</td></tr>"
)
})
}
})