$(function () { function initAverageScoreEcharts() { var itemStyle = { normal: { label: { show: true, //开启显示数值 position: "top" //数值在上方显示 } } }; var xAxis_data = ["一般", "二班"] var curlegend = ["满分", "最高分", "最低分", "平均分"]; var curseries = [{ name: "满分", type: "bar", barWidth: $.UnitUtil.mm2px(5), // 柱状图最小高度 barMinHeight: $.UnitUtil.mm2px(2), barGap: 0, data: [60, 70], itemStyle: itemStyle }, { name: "最高分", type: "bar", barWidth: $.UnitUtil.mm2px(5), // 柱状图最小高度 barMinHeight: $.UnitUtil.mm2px(2), barGap: 0, data: [50, 60], itemStyle: itemStyle }, { name: "最低分", type: "bar", barWidth: $.UnitUtil.mm2px(5), // 柱状图最小高度 barMinHeight: $.UnitUtil.mm2px(2), barGap: 0, data: [30, 40], itemStyle: itemStyle }, { name: "平均分", type: "bar", barWidth: $.UnitUtil.mm2px(5), // 柱状图最小高度 barMinHeight: $.UnitUtil.mm2px(2), barGap: 0, data: [40, 50], itemStyle: itemStyle } ]; var option = { animation: false, color: ["#5C99FF", "#FF5F56", "#5EC5C8", "#f1982b"], title: { text: "分", x: "left", y: "top", textStyle: { color: "#5F6E82", fontSize: $.UnitUtil.mm2px(3), fontWeight: 500 } }, legend: { itemWidth: $.UnitUtil.mm2px(2), itemHeight: $.UnitUtil.mm2px(2), top: "bottom", data: curlegend }, grid: { top: $.UnitUtil.mm2px(10), left: 0, right: 0, bottom: $.UnitUtil.mm2px(8), containLabel: true, }, xAxis: [{ type: "category", 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: curseries }; var myEcharts = echarts.init(document.querySelector(".section1 #averagescoreEcharts")); myEcharts.clear(); myEcharts.setOption(option); } function initExcellenceRateEcharts() { var itemStyle = { normal: { label: { show: true, //开启显示数值 position: "top" //数值在上方显示 } } }; var xAxis_data = ["一般", "二班"] var curlegend = ["优秀率", "良好率", "及格率", "低分率"]; var curseries = [{ name: "优秀率", type: "bar", barWidth: $.UnitUtil.mm2px(5), // 柱状图最小高度 barMinHeight: $.UnitUtil.mm2px(2), barGap: 0, data: [60, 70], itemStyle: itemStyle }, { name: "良好率", type: "bar", barWidth: $.UnitUtil.mm2px(5), // 柱状图最小高度 barMinHeight: $.UnitUtil.mm2px(2), barGap: 0, data: [50, 60], itemStyle: itemStyle }, { name: "及格率", type: "bar", barWidth: $.UnitUtil.mm2px(5), // 柱状图最小高度 barMinHeight: $.UnitUtil.mm2px(2), barGap: 0, data: [30, 40], itemStyle: itemStyle }, { name: "低分率", type: "bar", barWidth: $.UnitUtil.mm2px(5), // 柱状图最小高度 barMinHeight: $.UnitUtil.mm2px(2), barGap: 0, data: [40, 50], itemStyle: itemStyle } ]; var option = { animation: false, color: ["#5C99FF", "#FF5F56", "#5EC5C8", "#f1982b"], title: { text: "分", x: "left", y: "top", textStyle: { color: "#5F6E82", fontSize: $.UnitUtil.mm2px(3), fontWeight: 500 } }, legend: { itemWidth: $.UnitUtil.mm2px(2), itemHeight: $.UnitUtil.mm2px(2), top: "bottom", data: curlegend }, grid: { top: $.UnitUtil.mm2px(10), left: 0, right: 0, bottom: $.UnitUtil.mm2px(8), containLabel: true, }, xAxis: [{ type: "category", 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: curseries }; var myEcharts = echarts.init(document.querySelector(".section1 #excellencerateEcharts")); myEcharts.clear(); myEcharts.setOption(option); } function initExamnumEcharts() { var itemStyle = { normal: { label: { show: true, //开启显示数值 position: "top" //数值在上方显示 } } }; var xAxis_data = ["一般", "二班"] var curlegend = ["实考人数", "缺考人数"]; var curseries = [{ name: "实考人数", type: "bar", barWidth: $.UnitUtil.mm2px(5), // 柱状图最小高度 barMinHeight: $.UnitUtil.mm2px(2), barGap: 0, data: [60, 70], itemStyle: itemStyle }, { name: "缺考人数", type: "bar", barWidth: $.UnitUtil.mm2px(5), // 柱状图最小高度 barMinHeight: $.UnitUtil.mm2px(2), barGap: 0, data: [50, 60], itemStyle: itemStyle } ]; var option = { animation: false, color: ["#5C99FF", "#FF5F56", "#5EC5C8", "#f1982b"], title: { text: "分", x: "left", y: "top", textStyle: { color: "#5F6E82", fontSize: $.UnitUtil.mm2px(3), fontWeight: 500 } }, legend: { itemWidth: $.UnitUtil.mm2px(2), itemHeight: $.UnitUtil.mm2px(2), top: "bottom", data: curlegend }, grid: { top: $.UnitUtil.mm2px(10), left: 0, right: 0, bottom: $.UnitUtil.mm2px(8), containLabel: true, }, xAxis: [{ type: "category", 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: curseries }; var myEcharts = echarts.init(document.querySelector(".section1 #examnumEcharts")); myEcharts.clear(); myEcharts.setOption(option); } function initbzcEcharts() { var itemStyle = { normal: { label: { show: true, //开启显示数值 position: "top" //数值在上方显示 } } }; var xAxis_data = ["一般", "二班"] var curlegend = ["标准差"]; var curseries = [{ name: "标准差", type: "bar", barWidth: $.UnitUtil.mm2px(5), // 柱状图最小高度 barMinHeight: $.UnitUtil.mm2px(2), barGap: 0, data: [60, 70], itemStyle: itemStyle }]; var option = { animation: false, color: ["#5C99FF", "#FF5F56", "#5EC5C8", "#f1982b"], title: { text: "分", x: "left", y: "top", textStyle: { color: "#5F6E82", fontSize: $.UnitUtil.mm2px(3), fontWeight: 500 } }, legend: { itemWidth: $.UnitUtil.mm2px(2), itemHeight: $.UnitUtil.mm2px(2), top: "bottom", data: curlegend }, grid: { top: $.UnitUtil.mm2px(10), left: 0, right: 0, bottom: $.UnitUtil.mm2px(8), containLabel: true, }, xAxis: [{ type: "category", 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: curseries }; var myEcharts = echarts.init(document.querySelector(".section1 #bzcEcharts")); myEcharts.clear(); myEcharts.setOption(option); } var parameter = $(".section_1_html_root").data("page-params"); console.log("section_1:parameter", parameter); initAverageScoreEcharts(); initExcellenceRateEcharts(); initExamnumEcharts(); initbzcEcharts(); });