$(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', "teachingStaff.html?year=" + $(this).text()); let on_year = $(this).text(); echarts_11(on_year); echarts_12(on_year); echarts_13(on_year); echarts_2(on_year); echarts_31(on_year); echarts_4(on_year); echarts_51(on_year); echarts_7(on_year); }); echarts_11(config_now_year); echarts_12(config_now_year); echarts_13(config_now_year); echarts_2(config_now_year); echarts_31(config_now_year); echarts_4(config_now_year); echarts_51(config_now_year); echarts_7(config_now_year); // 专任教师师生比(小学) function echarts_11(year) { $.post(config_serverIp + "dataex/report/QuerySimpleGP", JSON.stringify({ "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab", "query": { "query_id": "A017", "query_param": [ year ] }, "query_cache": 0, "query_count": [ "teacherno", "studentno" ], "query_format": "json", "query_group": [ "stage" ] }), function (resport) { var data = resport.result; var newData = JSON.parse(data); var student_num = (Number(newData[0].studentno) / Number(newData[0].teacherno)).toFixed(2); // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('echarts11')); option = { title: { text: '小学', left: 'center', textStyle: { color: '#fff', fontSize: '16' } }, tooltip: { trigger: 'item', formatter: "{a}
{b}: {c} ({d}%)", position: function (p) { //其中p为当前鼠标的位置 return [p[0] + 10, p[1] - 10]; } }, legend: { show: false, }, graphic: { type: 'text', left: 'center', top: '40%', style: { text: `1:${student_num}`, textAlign: 'center', fill: '#6EE3DA', fontSize: '16' } }, series: [ { name: '小学', type: 'pie', center: ['50%', '42%'], radius: ['40%', '60%'], color: ['#168EFE', '#FFA06C'], label: { show: true }, labelLine: { show: true }, data: [ { value: 1, name: '教师' }, { value: student_num, name: '学生' }, ], emphasis: { // label: { // show: true, // fontSize: '20', // fontWeight: 'bold', // formatter: '{c}: {c}' // }, itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); }, 'json'); } // 专任教师师生比(初中) function echarts_12(year) { $.post(config_serverIp + "dataex/report/QuerySimpleGP", JSON.stringify({ "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab", "query": { "query_id": "A017", "query_param": [ year ] }, "query_cache": 0, "query_count": [ "teacherno", "studentno" ], "query_format": "json", "query_group": [ "stage" ] }), function (resport) { var data = resport.result; var newData = JSON.parse(data); var student_num = (Number(newData[1].studentno) / Number(newData[1].teacherno)).toFixed(2); // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('echarts12')); option = { title: { text: '初中', left: 'center', textStyle: { color: '#fff', fontSize: '16' } }, tooltip: { trigger: 'item', formatter: "{a}
{b}: {c} ({d}%)", position: function (p) { //其中p为当前鼠标的位置 return [p[0] + 10, p[1] - 10]; } }, legend: { show: false, }, graphic: { type: 'text', left: 'center', top: '40%', style: { text: `1:${student_num}`, textAlign: 'center', fill: '#6EE3DA', fontSize: '16' } }, series: [ { name: '初中', type: 'pie', center: ['50%', '42%'], radius: ['40%', '60%'], color: ['#168EFE', '#FFA06C'], data: [ { value: 1, name: '教师' }, { value: student_num, name: '学生' }, ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); }, 'json'); } // 专任教师师生比(高中) function echarts_13(year) { $.post(config_serverIp + "dataex/report/QuerySimpleGP", JSON.stringify({ "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab", "query": { "query_id": "A017", "query_param": [ year ] }, "query_cache": 0, "query_count": [ "teacherno", "studentno" ], "query_format": "json", "query_group": [ "stage" ] }), function (resport) { var data = resport.result; var newData = JSON.parse(data); var student_num = (Number(newData[2].studentno) / Number(newData[2].teacherno)).toFixed(2); // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('echarts13')); option = { title: { text: '高中', left: 'center', textStyle: { color: '#fff', fontSize: '16' } }, tooltip: { trigger: 'item', formatter: "{a}
{b}: {c} ({d}%)", position: function (p) { //其中p为当前鼠标的位置 return [p[0] + 10, p[1] - 10]; } }, legend: { show: false, }, graphic: { type: 'text', left: 'center', top: '40%', style: { text: `1:${student_num}`, textAlign: 'center', fill: '#6EE3DA', fontSize: '16' } }, series: [ { name: '高中', type: 'pie', center: ['50%', '42%'], radius: ['40%', '60%'], color: ['#168EFE', '#FFA06C'], data: [ { value: 1, name: '教师' }, { value: student_num, name: '学生' }, ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); }, 'json'); } // 城乡专任教师师生比 function echarts_2(year) { $.post(config_serverIp + "dataex/report/QuerySimpleGP", JSON.stringify({ "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab", "query": { "query_id": "A014", "query_param": [ year ] }, "query_cache": 0, "query_count": [ "studentno", "teacherno" ], "query_format": "echarts", "query_group": [ "stage", "citycountrygroup" ] }), function (resport) { var data = resport.result; var newData = JSON.parse(data); var cityNum = [];// 城区 var townNum = [];// 镇区 var ruralNum = [];// 乡村 newData.datas[1].map((item, index) => { cityNum.push(((item / newData.datas2[1][index])).toFixed(2)); }) newData.datas[2].map((item, index) => { townNum.push((item / newData.datas2[2][index]).toFixed(2)); }) newData.datas[0].map((item, index) => { ruralNum.push((item / newData.datas2[0][index]).toFixed(2)); }) // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('echart2')); // 城乡专任教师师生比 option = { // backgroundColor: '#00265f', tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: newData.groups[1], textStyle: { color: '#fff' } }, grid: { left: '0%', top: '5%', right: '0%', bottom: '5%', containLabel: true }, xAxis: [{ type: 'category', data: newData.groups[0], 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)", type: 'dashed' } } }], series: [ { name: newData.groups[1][0], type: 'bar', data: cityNum, barWidth: '15%', //柱子宽度 // barGap: 1, //柱子之间间距 itemStyle: { normal: { color: '#168EFE', opacity: 1, barBorderRadius: 5, } } }, { name: newData.groups[1][1], type: 'bar', data: townNum, barWidth: '15%', //柱子宽度 // barGap: 1, //柱子之间间距 itemStyle: { normal: { color: '#8882F7', opacity: 1, barBorderRadius: 5, } } }, { name: newData.groups[1][2], type: 'bar', data: ruralNum, barWidth: '15%', //柱子宽度 // barGap: 1, //柱子之间间距 itemStyle: { normal: { color: '#FFA06C', opacity: 1, barBorderRadius: 5, } } } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); }, 'json') } // 专任教师职称情况 function echarts_31(year) { $.post(config_serverIp + "dataex/report/QuerySimpleGP", JSON.stringify({ "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab", "query": { "query_id": "A016", "query_param": [ year ] }, "query_cache": 0, "query_count": [ "teacherno" ], "query_format": "echarts", "query_group": [ "didgroup", "stage" ] }), function (resport) { var data = resport.result; var indata = JSON.parse(data); newDataSmall = dataToChar(indata); newDataMiddle = dataToChar1(indata); newDataHeight = dataToChar2(indata); // debugger // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('fb1')); option = { title: [{ subtext: '小学', left: '15%', top: '0%', textAlign: 'center', subtextStyle: { color: "#fff", fontSize: '14' } }, { subtext: '初中', left: '50%', top: '0%', textAlign: 'center', subtextStyle: { color: "#fff", fontSize: '14' } }, { subtext: '高中', left: '85%', top: '0%', textAlign: 'center', subtextStyle: { color: "#fff", fontSize: '14' } }], tooltip: { trigger: 'item', formatter: "{a}
{b}: {c} ({d}%)", position: function (p) { //其中p为当前鼠标的位置 return [p[0] + 10, p[1] - 10]; } }, legend: { top: '70%', left: 'center', itemWidth: 10, itemHeight: 10, textStyle: { color: 'rgba(255,255,255,.5)', fontSize: '12', } }, series: [ { name: '小学', type: 'pie', radius: ['25%', '35%'], center: ['15%', '40%'], color: ['#168EFE', '#8882F7', '#FFA06C', '#FFDB65', '#2CD1C0', '#FF88A8'], label: { show: false }, labelLine: { show: false }, data: newDataSmall, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }, { name: '初中', type: 'pie', radius: ['25%', '35%'], center: ['50%', '40%'], color: ['#168EFE', '#8882F7', '#FFA06C', '#FFDB65', '#2CD1C0', '#FF88A8'], label: { show: false }, labelLine: { show: false }, data: newDataMiddle, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }, { name: '高中', type: 'pie', radius: ['25%', '35%'], center: ['85%', '40%'], color: ['#168EFE', '#8882F7', '#FFA06C', '#FFDB65', '#2CD1C0', '#FF88A8'], label: { show: false }, labelLine: { show: false }, data: newDataHeight, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }, ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); }, 'json'); } // 专任教师年龄情况 function echarts_4(year) { $.post(config_serverIp + "dataex/report/QuerySimpleGP", JSON.stringify({ "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab", "query": { "query_id": "A015", "query_param": [ year ] }, "query_cache": 0, "query_count": [ "total" ], "query_format": "echarts", "query_group": [ "didgroup", "stage" ] }), function (resport) { var data = resport.result; var newData = JSON.parse(data); // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('echart4')); // 情况 option = { // backgroundColor: '#00265f', title: [{ text: '', left: 'left', textStyle: { color: '#fff', fontSize: '12', marginBottom: '1rem', } }], tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, grid: { left: '0%', top: '14%', right: '0%', bottom: '4%', containLabel: true }, legend: { data: newData.groups[1], textStyle: { color: '#fff' } }, xAxis: [{ type: 'category', data: newData.groups[0], 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)", type: 'dashed' } } }], series: [ { name: '小学', type: 'bar', data: newData.datas[0], barWidth: '15%', //柱子宽度 // barGap: 1, //柱子之间间距 itemStyle: { normal: { color: '#168EFE', opacity: 1, barBorderRadius: 5, } } }, { name: '初中', type: 'bar', data: newData.datas[1], barWidth: '15%', //柱子宽度 // barGap: 1, //柱子之间间距 itemStyle: { normal: { color: '#FF88A8', opacity: 1, barBorderRadius: 5, } } }, { name: '高中', type: 'bar', data: newData.datas[2], barWidth: '15%', //柱子宽度 // barGap: 1, //柱子之间间距 itemStyle: { normal: { color: '#FFA06C', opacity: 1, barBorderRadius: 5, } } } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); }, 'json'); } // 专任教师学历情况 function echarts_51(year) { $.post(config_serverIp + "dataex/report/QuerySimpleGP", JSON.stringify({ "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab", "query": { "query_id": "A013", "query_param": [ year ] }, "query_cache": 0, "query_count": [ "teacherno" ], "query_format": "echarts", "query_group": [ "didgroup", "stage" ] }), function (resport) { var data = resport.result; var indata = JSON.parse(data); newDataSmall = dataToChar(indata); newDataMiddle = dataToChar1(indata); newDataHeight = dataToChar2(indata); // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('echarts51')); option = { title: [{ subtext: '小学', left: '15%', top: '0%', textAlign: 'center', subtextStyle: { color: "#fff", fontSize: '14' } }, { subtext: '初中', left: '50%', top: '0%', textAlign: 'center', subtextStyle: { color: "#fff", fontSize: '14' } }, { subtext: '高中', left: '85%', top: '0%', textAlign: 'center', subtextStyle: { color: "#fff", fontSize: '14' } }], tooltip: { trigger: 'item', formatter: "{a}
{b}: {c} ({d}%)", position: function (p) { //其中p为当前鼠标的位置 return [p[0] + 10, p[1] - 10]; } }, legend: { top: '70%', itemWidth: 10, itemHeight: 10, textStyle: { color: 'rgba(255,255,255,.5)', fontSize: '12', } }, series: [ { name: '小学', type: 'pie', radius: ['25%', '35%'], center: ['15%', '40%'], color: ['#168EFE', '#8882F7', '#FFA06C', '#FFDB65', '#2CD1C0', '#FF88A8'], label: { show: false }, labelLine: { show: false }, data: newDataSmall, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }, { name: '初中', type: 'pie', radius: ['25%', '35%'], center: ['50%', '40%'], color: ['#168EFE', '#8882F7', '#FFA06C', '#FFDB65', '#2CD1C0', '#FF88A8'], label: { show: false }, labelLine: { show: false }, data: newDataMiddle, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }, { name: '高中', type: 'pie', radius: ['25%', '35%'], center: ['85%', '40%'], color: ['#168EFE', '#8882F7', '#FFA06C', '#FFDB65', '#2CD1C0', '#FF88A8'], label: { show: false }, labelLine: { show: false }, data: newDataHeight, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }, ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); }, 'json'); } // 整体情况 function echarts_7(year) { $.post(config_serverIp + "dataex/report/QuerySimpleGP", JSON.stringify({ "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab", "query": { "query_id": "A012", "query_param": [ year ] }, "query_cache": 0, "query_count": [ "total" ], "query_format": "json", "query_group": [ "" ] }), function (resport) { var data = resport.result; var newData = JSON.parse(data); console.log("newData:",newData) var allNum; newData.map((item, index) => { if (item.didgroup === '教职工总人数') { // 教职工总数 allNum = Number(newData[index].total); let teacherAll = document.querySelector("#teacharAll"); var numberArr = (newData[index].total + "").split(""); let jzgnr = "" numberArr.map((item) => { jzgnr += `
${item}
`; }) teacherAll.innerHTML = jzgnr } else if (item.didgroup === '专任教师总人数') { // 专职教师人数 let teacherNum = document.querySelector("#teacharNum"); var numberArr = (newData[index].total + "").split(""); let zrjsnr = "" numberArr.map((item) => { zrjsnr += `
${item}
`; }) teacherNum.innerHTML = zrjsnr } else if (item.didgroup === '在编教师总人数') { // 在编教师人数 let teacherNumber = document.querySelector("#teacherNumber"); var numberArr = (newData[index].total + "").split(""); let zbjsnr = "" numberArr.map((item) => { zbjsnr += `
${item}
`; }) teacherNumber.innerHTML = zbjsnr } else if (item.didgroup === '女教职工总人数') { let womanNum = Number(newData[index].total); // 女教师人数 let womanTeacher = document.querySelector("#womanTeacher"); let womanPercentage = document.querySelector("#womanPercentage"); womanTeacher.innerHTML = "女教师:" + womanNum; womanPercentage.innerHTML = "教师占比:" + (womanNum / allNum * 100).toFixed(2) + "%"; // 男教师人数 let manTeacher = document.querySelector("#manTeacher"); let manPercentage = document.querySelector("#manPercentage"); manTeacher.innerHTML = "男教师:" + (allNum - womanNum); manPercentage.innerHTML = "教师占比:" + ((allNum - womanNum) / allNum * 100).toFixed(2) + "%"; } }) }, 'json'); } })