$(function () { // 按名次统计 function initClassCriticalRankEcharts() { var legend_data = [">10名", "≤10名"]; var xAxis_data = ["全部班级", "九年级一班", "九年级二班"]; var series_data1 = [7, 4, 3]; var series_data2 = [-4, -2, -2]; var option = { title: { text: "人", x: "left", y: "top", textStyle: { color: "#5F6E82", fontSize: 12, fontWeight: 500 } }, color: ["#5C99FF", "#F39A2C"], legend: { itemWidth: 6, itemHeight: 6, bottom: 30, data: legend_data }, grid: { top: 30, left: 5, right: 0, bottom: 65, containLabel: true }, xAxis: [ { type: "category", offset: 10, position: "bottom", data: xAxis_data, axisLabel: { color: "#5F6E82" //更改坐标轴文字颜色 }, axisTick: { alignWithLabel: true }, boundaryGap: true, triggerEvent: true, axisLine: { show: true, //是否显示轴线 lineStyle: { color: "#DADADA" //刻度线的颜色 } } } ], yAxis: [ { type: "value", axisTick: { show: false //刻度 }, axisLine: { show: false, //是否显示轴线 lineStyle: { color: "#DADADA" //刻度线的颜色 } }, splitLine: { //网格线 lineStyle: { type: "dotted" //设置网格线类型 dotted:虚线 solid:实线 }, show: true //隐藏或显示 }, axisLabel: { color: "#5F6E82" //更改坐标轴文字颜色 } } ], series: [ { name: legend_data[0], type: "bar", stack: "one", barWidth: 32, // 柱状图最小高度 barMinHeight: 0, barGap: 0, label: { normal: { show: true, align: "center", verticalAlign: "bottom", position: "top", distance: 0 } }, data: series_data1 }, { name: legend_data[1], type: "bar", stack: "one", barWidth: 32, // 柱状图最小高度 barMinHeight: 0, barGap: 0, label: { normal: { show: true, align: "center", verticalAlign: "top", position: "bottom", distance: 0, formatter: function (params) { return Math.abs(params.value); } } }, data: series_data2 } ] }; var myEcharts = echarts.init(document.querySelector(".section_2_lin #classCriticalRankEcharts")); myEcharts.clear(); myEcharts.setOption(option); } // 按分数统计 function initClassCriticalScoreEcharts() { var legend_data = [">10分", "≤10分"]; var xAxis_data = ["全部班级", "九年级一班", "九年级二班"]; var series_data1 = [7, 4, 3]; var series_data2 = [-4, -2, -2]; var option = { title: { text: "人", x: "left", y: "top", textStyle: { color: "#5F6E82", fontSize: 12, fontWeight: 500 } }, color: ["#5C99FF", "#F39A2C"], legend: { itemWidth: 6, itemHeight: 6, bottom: 30, data: legend_data }, grid: { top: 30, left: 5, right: 0, bottom: 65, containLabel: true }, xAxis: [ { type: "category", offset: 10, position: "bottom", data: xAxis_data, axisLabel: { color: "#5F6E82" //更改坐标轴文字颜色 }, axisTick: { alignWithLabel: true }, boundaryGap: true, triggerEvent: true, axisLine: { show: true, //是否显示轴线 lineStyle: { color: "#DADADA" //刻度线的颜色 } } } ], yAxis: [ { type: "value", axisTick: { show: false //刻度 }, axisLine: { show: false, //是否显示轴线 lineStyle: { color: "#DADADA" //刻度线的颜色 } }, splitLine: { //网格线 lineStyle: { type: "dotted" //设置网格线类型 dotted:虚线 solid:实线 }, show: true //隐藏或显示 }, axisLabel: { color: "#5F6E82" //更改坐标轴文字颜色 } } ], series: [ { name: legend_data[0], type: "bar", stack: "one", barWidth: 32, // 柱状图最小高度 barMinHeight: 0, barGap: 0, label: { normal: { show: true, align: "center", verticalAlign: "bottom", position: "top", distance: 0 } }, data: series_data1 }, { name: legend_data[1], type: "bar", stack: "one", barWidth: 32, // 柱状图最小高度 barMinHeight: 0, barGap: 0, label: { normal: { show: true, align: "center", verticalAlign: "top", position: "bottom", distance: 0, formatter: function (params) { return Math.abs(params.value); } } }, data: series_data2 } ] }; var myEcharts = echarts.init(document.querySelector(".section_2_lin #classCriticalScoreEcharts")); myEcharts.clear(); myEcharts.setOption(option); } var parameter = $(".section_2_html_root .section_2_lin_html_root").data("page-params"); parameter = JSON.parse(parameter); var subjectInfo = []; var subjectid_ranktype = {}; for(var sid_3 in parameter[3]) { if (sid_3 === "zf") { subjectInfo.unshift({ subjectid: sid_3, subjectname: "全科" }); } else { subjectInfo.push({ subjectid: sid_3, subjectname: parameter[3][sid_3].subjectname }); } if (!subjectid_ranktype[sid_3]) { subjectid_ranktype[sid_3] = {}; } subjectid_ranktype[sid_3][3] = parameter[3][sid_3]; } for(var sid_4 in parameter[4]) { if (!subjectid_ranktype[sid_4]) { subjectid_ranktype[sid_4] = {}; } subjectid_ranktype[sid_4][4] = parameter[4][sid_4]; } console.log("subjectid_ranktype", subjectid_ranktype); var singleRootHtml = ""; $.each(subjectInfo, function(s_index, s_item) { if (s_index === 0) { console.log("s_index", s_index); console.log("s_item", s_item); } }); $(".section_2_lin_root").html(singleRootHtml); initClassCriticalRankEcharts(); initClassCriticalScoreEcharts(); });