|
@@ -0,0 +1,1064 @@
|
|
|
+(function(window, undefined) {
|
|
|
+ var chartOption = {
|
|
|
+ barPointTopic: getBarPointTopicOptions,
|
|
|
+ barPointGrade: getBarPointGradeOptions,
|
|
|
+ barTeachers: getBarTeachersOptions,
|
|
|
+ barTeacherGrade: getBarTeacherGradeOptions,
|
|
|
+ line: getLineOptions,
|
|
|
+ lineReverse: getLineReverseOptions,
|
|
|
+ lineSmooth: getLineSmoothOptions
|
|
|
+ };
|
|
|
+
|
|
|
+ var colors = [
|
|
|
+ "rgba(67, 80, 136, 0.8)",
|
|
|
+ "rgba(151, 94, 229, 0.8)",
|
|
|
+ "rgba(61, 160, 255, 0.8)",
|
|
|
+ "rgba(48, 203, 203, 0.8)",
|
|
|
+ "rgba(75, 203, 116, 0.8)",
|
|
|
+ "rgba(250, 212, 68, 0.8)",
|
|
|
+ "rgba(217, 217, 217, 0.8)"
|
|
|
+ ];
|
|
|
+ var textStyle = {
|
|
|
+ color: "#555",
|
|
|
+ fontFamily:
|
|
|
+ '"PingFang SC", "Microsoft YaHei", Tahoma,Helvetica, Arial, sans-serif'
|
|
|
+ };
|
|
|
+ var animationIsOpen = false;
|
|
|
+
|
|
|
+ var symbolCircle =
|
|
|
+ "path://M16,9.2c-3.8,0-6.8,3.1-6.8,6.8s3.1,6.8,6.8,6.8s6.8-3.1,6.8-6.8S19.8,9.2,16,9.2z M29.7,16 c0,7.6-6.1,13.7-13.7,13.7S2.3,23.6,2.3,16S8.4,2.3,16,2.3S29.7,8.4,29.7,16z";
|
|
|
+
|
|
|
+ function Charts(dome, dataList, chartType, renderType) {
|
|
|
+ this.dome = dome;
|
|
|
+ this.dataList = dataList;
|
|
|
+ this.chartType = chartType;
|
|
|
+ this.renderType = renderType || "canvas";
|
|
|
+ }
|
|
|
+
|
|
|
+ Charts.prototype.initChart = function() {
|
|
|
+ return window.echarts.init(this.dome, "", {
|
|
|
+ renderer: this.renderType
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ Charts.prototype.renderChart = function() {
|
|
|
+ var options = chartOption[this.chartType](this.dataList);
|
|
|
+ if (options) this.initChart().setOption(options, true);
|
|
|
+ };
|
|
|
+
|
|
|
+ function getBarPointTopicOptions(datas) {
|
|
|
+ var yAxisLabels = datas.map(function(item) {
|
|
|
+ return item.name;
|
|
|
+ });
|
|
|
+ var avgDatas = datas.map(function(item) {
|
|
|
+ return item.avgScore;
|
|
|
+ });
|
|
|
+ var stdDatas = datas.map(function(item) {
|
|
|
+ return item.stdevScore;
|
|
|
+ });
|
|
|
+ var scoreRateDatas = datas.map(function(item) {
|
|
|
+ return item.scoreRate;
|
|
|
+ });
|
|
|
+
|
|
|
+ var legendData = ["单题平均分", "单题标准差", "得分率"];
|
|
|
+ var series = [
|
|
|
+ {
|
|
|
+ type: "bar",
|
|
|
+ data: avgDatas,
|
|
|
+ barWidth: 6,
|
|
|
+ barGap: "50%",
|
|
|
+ name: "单题平均分",
|
|
|
+ xAxisIndex: 0,
|
|
|
+ yAxisIndex: 0,
|
|
|
+ itemStyle: {
|
|
|
+ color: "rgba(61, 160, 255, 0.8)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "bar",
|
|
|
+ data: stdDatas,
|
|
|
+ barWidth: 6,
|
|
|
+ barGap: "50%",
|
|
|
+ name: "单题标准差",
|
|
|
+ xAxisIndex: 0,
|
|
|
+ yAxisIndex: 0,
|
|
|
+ itemStyle: {
|
|
|
+ color: "#4bcb74"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "scatter",
|
|
|
+ data: scoreRateDatas,
|
|
|
+ symbol: symbolCircle,
|
|
|
+ symbolSize: 10,
|
|
|
+ name: "得分率",
|
|
|
+ xAxisIndex: 1,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ itemStyle: {
|
|
|
+ color: "rgba(67, 80, 136, 0.8)"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ];
|
|
|
+
|
|
|
+ if (datas[0].hasOwnProperty("fullRate") && datas[0].fullRate) {
|
|
|
+ var fullRateDatas = datas.map(function(item) {
|
|
|
+ return item.fullRate;
|
|
|
+ });
|
|
|
+ legendData.push("满分率");
|
|
|
+ series.push({
|
|
|
+ type: "scatter",
|
|
|
+ data: fullRateDatas,
|
|
|
+ symbol: symbolCircle,
|
|
|
+ symbolSize: 10,
|
|
|
+ name: "满分率",
|
|
|
+ xAxisIndex: 1,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ itemStyle: {
|
|
|
+ color: "rgba(250, 212, 68, 0.8)"
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ animation: animationIsOpen,
|
|
|
+ textStyle: textStyle,
|
|
|
+ legend: {
|
|
|
+ data: legendData,
|
|
|
+ itemGap: 30,
|
|
|
+ itemWidth: 14,
|
|
|
+ bottom: 40,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 19
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: [
|
|
|
+ {
|
|
|
+ left: "20%",
|
|
|
+ top: 120,
|
|
|
+ width: "36%",
|
|
|
+ bottom: 100,
|
|
|
+ show: true,
|
|
|
+ borderColor: "rgba(230,230,230,1)"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ left: "56%",
|
|
|
+ top: 120,
|
|
|
+ width: "30%",
|
|
|
+ bottom: 100,
|
|
|
+ show: true,
|
|
|
+ borderColor: "rgba(230,230,230,1)"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ gridIndex: 0,
|
|
|
+ position: "top",
|
|
|
+ inverse: true,
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(233,233,233,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(233,233,233,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 18,
|
|
|
+ formatter: function(value, index) {
|
|
|
+ if (!index) return "0";
|
|
|
+ return value.toFixed(2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ gridIndex: 1,
|
|
|
+ min: 0,
|
|
|
+ max: 1,
|
|
|
+ interval: 0.2,
|
|
|
+ position: "top",
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(233,233,233,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(233,233,233,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 18,
|
|
|
+ formatter: function(value, index) {
|
|
|
+ if (!index) return "";
|
|
|
+ return parseInt(value * 100) + "%";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ gridIndex: 0,
|
|
|
+ data: yAxisLabels,
|
|
|
+ inverse: true,
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitArea: {
|
|
|
+ show: true,
|
|
|
+ areaStyle: {
|
|
|
+ color: ["rgba(250,250,250,1)", "rgba(255,255,255,1)"]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(233,233,233,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 19,
|
|
|
+ margin: 50
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ show: true,
|
|
|
+ type: "category",
|
|
|
+ inverse: true,
|
|
|
+ gridIndex: 1,
|
|
|
+ data: yAxisLabels,
|
|
|
+ axisLabel: {
|
|
|
+ show: false,
|
|
|
+ fontSize: 19
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(170,170,170,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitArea: {
|
|
|
+ show: true,
|
|
|
+ areaStyle: {
|
|
|
+ color: ["rgba(250,250,250,1)", "rgba(255,255,255,1)"]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(233,233,233,1)"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: series
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ function getBarPointGradeOptions(datas) {
|
|
|
+ var yAxisLabels = datas.map(function(item) {
|
|
|
+ return item.name;
|
|
|
+ });
|
|
|
+ var avgDatas = datas.map(function(item) {
|
|
|
+ return item.avgScore;
|
|
|
+ });
|
|
|
+ var maxDatas = datas.map(function(item) {
|
|
|
+ return item.maxScore;
|
|
|
+ });
|
|
|
+ var minDatas = datas.map(function(item) {
|
|
|
+ return item.minScore;
|
|
|
+ });
|
|
|
+
|
|
|
+ var passRateDatas = datas.map(function(item) {
|
|
|
+ return Math.round(item.passRate * 100);
|
|
|
+ });
|
|
|
+ var excellentRateDatas = datas.map(function(item) {
|
|
|
+ return Math.round(item.excellentRate * 100);
|
|
|
+ });
|
|
|
+
|
|
|
+ return {
|
|
|
+ animation: animationIsOpen,
|
|
|
+ textStyle: textStyle,
|
|
|
+ legend: {
|
|
|
+ data: ["平均分", "最高分", "最低分", "及格率", "优秀率"],
|
|
|
+ itemGap: 30,
|
|
|
+ itemWidth: 14,
|
|
|
+ bottom: 40,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 19
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: [
|
|
|
+ {
|
|
|
+ left: "20%",
|
|
|
+ top: 120,
|
|
|
+ width: "36%",
|
|
|
+ bottom: 100,
|
|
|
+ show: true,
|
|
|
+ borderColor: "rgba(230,230,230,1)"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ left: "56%",
|
|
|
+ top: 120,
|
|
|
+ width: "30%",
|
|
|
+ bottom: 100,
|
|
|
+ show: true,
|
|
|
+ borderColor: "rgba(230,230,230,1)"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ gridIndex: 0,
|
|
|
+ position: "top",
|
|
|
+ inverse: true,
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(233,233,233,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(233,233,233,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 18,
|
|
|
+ color: "#555",
|
|
|
+ formatter: function(value, index) {
|
|
|
+ if (!index) return "0";
|
|
|
+ return value;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ gridIndex: 1,
|
|
|
+ min: 0,
|
|
|
+ max: 100,
|
|
|
+ interval: 20,
|
|
|
+ position: "top",
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(233,233,233,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(233,233,233,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 18,
|
|
|
+ color: "#555",
|
|
|
+ formatter: function(value, index) {
|
|
|
+ if (!index) return "";
|
|
|
+ return (value / 100).toFixed(1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ gridIndex: 0,
|
|
|
+ data: yAxisLabels,
|
|
|
+ inverse: true,
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitArea: {
|
|
|
+ show: true,
|
|
|
+ areaStyle: {
|
|
|
+ color: ["rgba(250,250,250,1)", "rgba(255,255,255,1)"]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(233,233,233,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 19,
|
|
|
+ margin: 30,
|
|
|
+ formatter: function(value) {
|
|
|
+ if (value.length > 8) {
|
|
|
+ return [value.substring(0, 8), value.substring(8)].join("\n");
|
|
|
+ }
|
|
|
+ return value;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ show: true,
|
|
|
+ type: "category",
|
|
|
+ inverse: true,
|
|
|
+ gridIndex: 1,
|
|
|
+ data: yAxisLabels,
|
|
|
+ axisLabel: {
|
|
|
+ show: false,
|
|
|
+ fontSize: 19,
|
|
|
+ formatter: function(value) {
|
|
|
+ if (value.length > 8) {
|
|
|
+ return [value.substring(0, 8), value.substring(8)].join("\n");
|
|
|
+ }
|
|
|
+ return value;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(170,170,170,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitArea: {
|
|
|
+ show: true,
|
|
|
+ areaStyle: {
|
|
|
+ color: ["rgba(250,250,250,1)", "rgba(255,255,255,1)"]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(233,233,233,1)"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "bar",
|
|
|
+ data: avgDatas,
|
|
|
+ barWidth: 6,
|
|
|
+ barGap: "50%",
|
|
|
+ name: "平均分",
|
|
|
+ xAxisIndex: 0,
|
|
|
+ yAxisIndex: 0,
|
|
|
+ itemStyle: {
|
|
|
+ color: "rgba(61, 160, 255, 0.8)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "bar",
|
|
|
+ data: maxDatas,
|
|
|
+ barWidth: 6,
|
|
|
+ barGap: "50%",
|
|
|
+ name: "最高分",
|
|
|
+ xAxisIndex: 0,
|
|
|
+ yAxisIndex: 0,
|
|
|
+ itemStyle: {
|
|
|
+ color: "rgba(151, 94, 229, 0.8)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "bar",
|
|
|
+ data: minDatas,
|
|
|
+ barWidth: 6,
|
|
|
+ barGap: "50%",
|
|
|
+ name: "最低分",
|
|
|
+ xAxisIndex: 0,
|
|
|
+ yAxisIndex: 0,
|
|
|
+ itemStyle: {
|
|
|
+ color: "rgba(217, 217, 217, 0.8)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "scatter",
|
|
|
+ data: passRateDatas,
|
|
|
+ symbol: symbolCircle,
|
|
|
+ symbolSize: 10,
|
|
|
+ name: "及格率",
|
|
|
+ xAxisIndex: 1,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ itemStyle: {
|
|
|
+ color: "rgba(67, 80, 136, 0.8)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "scatter",
|
|
|
+ data: excellentRateDatas,
|
|
|
+ symbol: symbolCircle,
|
|
|
+ symbolSize: 10,
|
|
|
+ name: "优秀率",
|
|
|
+ xAxisIndex: 1,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ itemStyle: {
|
|
|
+ color: "rgba(250, 212, 68, 0.8)"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ function getBarTeachersOptions(datas) {
|
|
|
+ var xAxisData = [
|
|
|
+ "实考人数",
|
|
|
+ "最高分",
|
|
|
+ "最低分",
|
|
|
+ "及格人数",
|
|
|
+ "及格率",
|
|
|
+ "优秀人数",
|
|
|
+ "优秀率",
|
|
|
+ "平均分",
|
|
|
+ "相对平均分"
|
|
|
+ ];
|
|
|
+
|
|
|
+ var legendData = datas.map(function(item) {
|
|
|
+ return item.name;
|
|
|
+ });
|
|
|
+
|
|
|
+ var series = datas.map(function(item, index) {
|
|
|
+ return {
|
|
|
+ type: "bar",
|
|
|
+ data: [
|
|
|
+ item.total.totalCount,
|
|
|
+ item.total.maxScore,
|
|
|
+ item.total.minScore,
|
|
|
+ item.total.passCount,
|
|
|
+ Math.round(item.total.passRate * 100),
|
|
|
+ item.total.excellentCount,
|
|
|
+ Math.round(item.total.excellentRate * 100),
|
|
|
+ item.total.avgScore,
|
|
|
+ item.total.relativeAvgScore
|
|
|
+ ],
|
|
|
+ name: item.name
|
|
|
+ };
|
|
|
+ });
|
|
|
+
|
|
|
+ return {
|
|
|
+ animation: animationIsOpen,
|
|
|
+ textStyle: textStyle,
|
|
|
+ color: colors,
|
|
|
+ legend: {
|
|
|
+ data: legendData,
|
|
|
+ left: "center",
|
|
|
+ bottom: 10,
|
|
|
+ itemGap: 20,
|
|
|
+ itemWidth: 14,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 19
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ show: true,
|
|
|
+ left: 80,
|
|
|
+ right: 50,
|
|
|
+ top: 100,
|
|
|
+ bottom: 100,
|
|
|
+ borderColor: "rgba(230,230,230,1)"
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: xAxisData,
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitArea: {
|
|
|
+ show: true,
|
|
|
+ areaStyle: {
|
|
|
+ color: ["rgba(255,255,255,1)", "rgba(250,250,250,1)"]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(233,233,233,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 18,
|
|
|
+ margin: 12,
|
|
|
+ interval: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ z: 1,
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(233,233,233,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(233,233,233,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 16,
|
|
|
+ color: "#555"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: series
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ function getBarTeacherGradeOptions(datas) {
|
|
|
+ var title = datas.name + "_任课班级成绩分析";
|
|
|
+ var symbolCircle =
|
|
|
+ "path://M16,9.2c-3.8,0-6.8,3.1-6.8,6.8s3.1,6.8,6.8,6.8s6.8-3.1,6.8-6.8S19.8,9.2,16,9.2z M29.7,16 c0,7.6-6.1,13.7-13.7,13.7S2.3,23.6,2.3,16S8.4,2.3,16,2.3S29.7,8.4,29.7,16z";
|
|
|
+ var classes = datas.classes;
|
|
|
+ var xAxisData = classes.map(function(item) {
|
|
|
+ return item.name;
|
|
|
+ });
|
|
|
+ var avgDatas = classes.map(function(item) {
|
|
|
+ return item.avgScore;
|
|
|
+ });
|
|
|
+ var relateAvgDatas = classes.map(function(item) {
|
|
|
+ return item.relativeAvgScore;
|
|
|
+ });
|
|
|
+ var maxDatas = classes.map(function(item) {
|
|
|
+ return item.maxScore;
|
|
|
+ });
|
|
|
+ var minDatas = classes.map(function(item) {
|
|
|
+ return item.minScore;
|
|
|
+ });
|
|
|
+ var passRateDatas = classes.map(function(item) {
|
|
|
+ return item.passRate;
|
|
|
+ });
|
|
|
+ var excellentRateDatas = classes.map(function(item) {
|
|
|
+ return item.excellentRate;
|
|
|
+ });
|
|
|
+
|
|
|
+ return {
|
|
|
+ animation: animationIsOpen,
|
|
|
+ textStyle: textStyle,
|
|
|
+ color: [
|
|
|
+ "rgba(61, 160, 255, 0.8)",
|
|
|
+ "#4bcb74",
|
|
|
+ "rgba(151, 94, 229, 0.8)",
|
|
|
+ "#999999",
|
|
|
+ "rgba(67, 80, 136, 0.8)",
|
|
|
+ "rgba(250, 212, 68, 0.8)"
|
|
|
+ ],
|
|
|
+ title: {
|
|
|
+ text: "▲ " + title,
|
|
|
+ left: "center",
|
|
|
+ bottom: 0,
|
|
|
+ textStyle: {
|
|
|
+ color: "rgba(67, 80, 136, 0.8)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: 50,
|
|
|
+ bottom: 90,
|
|
|
+ show: true,
|
|
|
+ borderColor: "rgba(230,230,230,1)"
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: xAxisData,
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitArea: {
|
|
|
+ show: true,
|
|
|
+ areaStyle: {
|
|
|
+ color: ["rgba(255,255,255,1)", "rgba(250,250,250,1)"]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(233,233,233,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 16,
|
|
|
+ margin: 12,
|
|
|
+ interval: 0,
|
|
|
+ formatter: function(value) {
|
|
|
+ if (value.length > 6) {
|
|
|
+ return [value.substring(0, 6), value.substring(6)].join("\n");
|
|
|
+ }
|
|
|
+ return value;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(233,233,233,1)"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ z: 1,
|
|
|
+ position: "left",
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(233,233,233,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(233,233,233,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 16,
|
|
|
+ color: "#555"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ min: 0,
|
|
|
+ max: 1,
|
|
|
+ position: "right",
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(233,233,233,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 16,
|
|
|
+ color: "#555",
|
|
|
+ formatter: function(value) {
|
|
|
+ if (!value) return "0";
|
|
|
+ return value.toFixed(1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "bar",
|
|
|
+ data: avgDatas,
|
|
|
+ name: "平均分",
|
|
|
+ barWidth: 12
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "bar",
|
|
|
+ data: relateAvgDatas,
|
|
|
+ name: "相对平均分",
|
|
|
+ barWidth: 12
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "bar",
|
|
|
+ data: maxDatas,
|
|
|
+ name: "最高分",
|
|
|
+ barWidth: 12
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "bar",
|
|
|
+ data: minDatas,
|
|
|
+ name: "最低分",
|
|
|
+ barWidth: 12
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "scatter",
|
|
|
+ data: passRateDatas,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ symbol: symbolCircle,
|
|
|
+ symbolSize: 10,
|
|
|
+ name: "及格率"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "scatter",
|
|
|
+ data: excellentRateDatas,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ symbol: symbolCircle,
|
|
|
+ symbolSize: 10,
|
|
|
+ name: "优秀率"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ function getLineOptions(datas) {
|
|
|
+ var xAxisData = datas.map(function(item) {
|
|
|
+ return item.name;
|
|
|
+ });
|
|
|
+ var levelDatas = datas.map(function(item) {
|
|
|
+ return item.difficulty;
|
|
|
+ });
|
|
|
+ var linearColor = new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "rgba(61,160,255,1)"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(61,160,255,0)"
|
|
|
+ }
|
|
|
+ ]);
|
|
|
+ return {
|
|
|
+ animation: animationIsOpen,
|
|
|
+ textStyle: textStyle,
|
|
|
+ grid: {
|
|
|
+ top: 120
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: xAxisData,
|
|
|
+ boundaryGap: false,
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(233,233,233,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 19,
|
|
|
+ margin: 20,
|
|
|
+ interval: 0
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(233,233,233,1)"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ min: 0,
|
|
|
+ max: 1,
|
|
|
+ interval: 0.1,
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(233,233,233,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(233,233,233,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 19,
|
|
|
+ margin: 30,
|
|
|
+ color: "#555",
|
|
|
+ formatter: function(value, index) {
|
|
|
+ return value.toFixed(1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "line",
|
|
|
+ data: levelDatas,
|
|
|
+ symbol: "none",
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(61, 160, 255, 0.8)"
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: linearColor
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ function getLineReverseOptions(datas) {
|
|
|
+ var yAxisDatas = datas.map(function(item) {
|
|
|
+ return item.name;
|
|
|
+ });
|
|
|
+ var levelDatas = datas.map(function(item) {
|
|
|
+ return item.difficulty;
|
|
|
+ });
|
|
|
+
|
|
|
+ var linearColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "rgba(61,160,255,1)"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(61,160,255,0)"
|
|
|
+ }
|
|
|
+ ]);
|
|
|
+ return {
|
|
|
+ animation: animationIsOpen,
|
|
|
+ textStyle: textStyle,
|
|
|
+ grid: {
|
|
|
+ top: 150,
|
|
|
+ left: 130,
|
|
|
+ bottom: 50
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ data: yAxisDatas,
|
|
|
+ inverse: true,
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(233,233,233,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 17,
|
|
|
+ margin: 20,
|
|
|
+ interval: 0
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(233,233,233,1)"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "value",
|
|
|
+ min: 0,
|
|
|
+ max: 1,
|
|
|
+ interval: 0.1,
|
|
|
+ position: "top",
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(233,233,233,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(233,233,233,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 16,
|
|
|
+ margin: 20,
|
|
|
+ color: "#555",
|
|
|
+ formatter: function(value, index) {
|
|
|
+ return value.toFixed(1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "line",
|
|
|
+ data: levelDatas,
|
|
|
+ symbol: "none",
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(61, 160, 255, 0.8)"
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: linearColor
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ function getLineSmoothOptions(datainfo) {
|
|
|
+ var datas = datainfo.dataList;
|
|
|
+ var lineColor = colors[datainfo.index % colors.length];
|
|
|
+ var xAxisData = datas.map(function(item) {
|
|
|
+ return item.score;
|
|
|
+ });
|
|
|
+ var levelDatas = datas.map(function(item) {
|
|
|
+ return item.rangeRate;
|
|
|
+ });
|
|
|
+
|
|
|
+ return {
|
|
|
+ animation: animationIsOpen,
|
|
|
+ textStyle: textStyle,
|
|
|
+ grid: {
|
|
|
+ top: 110,
|
|
|
+ bottom: 80
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: xAxisData,
|
|
|
+ boundaryGap: false,
|
|
|
+ inverse: true,
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 19,
|
|
|
+ margin: 20,
|
|
|
+ interval: 0,
|
|
|
+ formatter: function(value) {
|
|
|
+ return value + "-";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(233,233,233,1)"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(233,233,233,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(233,233,233,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 19,
|
|
|
+ margin: 20,
|
|
|
+ formatter: function(value, index) {
|
|
|
+ return value.toFixed(2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "line",
|
|
|
+ data: levelDatas,
|
|
|
+ symbol: "none",
|
|
|
+ smooth: true,
|
|
|
+ smoothMonotone: "none",
|
|
|
+ lineStyle: {
|
|
|
+ color: lineColor,
|
|
|
+ width: 3
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ window.Charts = Charts;
|
|
|
+})(window);
|