classReportPDF/js/section_3.js

$(function () {
  function hexToRgba(hex, opacity) {
    var rgbaColor = "";
    var reg = /^#[\da-f]{6}$/i;
    if (reg.test(hex)) {
      rgbaColor = 'rgba(' + parseInt("0x" + hex.slice(1, 3)) + ',' + parseInt("0x" + hex.slice(3, 5))
        + ',' + parseInt("0x" + hex.slice(5, 7)) + ',' + opacity + ')'
      }
    return rgbaColor;
 }
  function initlargeAnalysisEcharts(s_index,list) {
     var schoolscore = [],
      classscore = [],
      legendlist = [currentclass, "全年级"];
    $.each(list, function (idx, item) {
      if (item.subjectname != "全科") {
        classscore.push(item.classavgscore);
        schoolscore.push(item.gradeavgscore);
      }
    });
    // 求出数组最大值
    let arr = [...schoolscore, ...classscore];
    let arr1 = Math.max.apply(null, arr);
    let maxnum = parseInt((arr1 + 10) / 10) * 10;
    let arrList = [];
    $.each(list, function (idx, item) {
      if (item.subjectname != "全科") {
        let j = {
          name: item.qtypename,
          max: maxnum
        };
        arrList.push(j);
      }
    });
    var option = {
      animation: false,
      color: ["#5C99FF", "#5EC5C8"],
      legend: {
        icon: "rectRound",
        itemWidth: $.UnitUtil.mm2px(2),
        itemHeight: $.UnitUtil.mm2px(2),
        data: legendlist,
        x: "center",
        y: "bottom"
      },
      grid: {
        top: $.UnitUtil.mm2px(10),
        left: 0,
        right: 0,
        bottom: $.UnitUtil.mm2px(8),
        containLabel: true
      },
      radar: {
        radius: "60%",
        center: ["50%", "55%"],
        indicator: arrList
      },
      series: {
        type: "radar",
        tooltip: {
          trigger: "item"
        },
        // areaStyle: {},  //内部阴影
        data: [
         {
            value: classscore,
            label: {
              show: true,
              formatter: function (params) {
                return params.value;
              }
            },
            name: currentclass
          },
         {
            value: schoolscore,
            label: {
              show: true,
              formatter: function (params) {
                return params.value;
              }
            },
            name: "全年级"
          }
        ]
      }
    };
    var myEcharts = echarts.init(
      document.querySelector(".section_3_"+s_index +" #largeAnalysisEcharts")
    );
    myEcharts.clear();
    myEcharts.setOption(option);
    showlargeAnalysistable(list,legendlist,s_index);
  }

  function showlargeAnalysistable (list,legendlist,s_index) {
    var table = "",goodTableHeadTr1Html = '<th rowspan="2">题型</th><th rowspan="2">对应题号</th><th rowspan="2">分值</th><th rowspan="2">占比</th><th colspan="2">年级</th><th colspan="2">'+currentclass+'</th>',
      goodTableHeadTr2Html = "", trHtml = "";
    $.each(list, function (idx, item) {
      trHtml += "<tr>";
      trHtml+= '<td><div class="my_cell">' +
      item.qtypename +
      '</div></td><td><div class="my_cell">' +
      item.qns +
      '</div></td><td><div class="my_cell">' +
      item.score +
      '</div></td><td><div class="my_cell">' +
      item.srate +
      '%</div></td><td><div class="my_cell">' +
      item.gradeavgscore +
      '</div></td><td><div class="my_cell">' +
      item.gradesrate +
      '%</div></td><td><div class="my_cell">' +
      item.classavgscore +
      '</div></td><td><div class="my_cell">' +
      item.classsrate +
      "%" +
      '</div></td>';
    })
    $.each(legendlist, function (idx, item) {
      goodTableHeadTr2Html+="<th>平均分</th><th>得分率</th>";
    })
      table ='  <table border="1" class="my_table"><thead><tr class="goodTableHeadTr1">' +
        goodTableHeadTr1Html  +
        '</tr><tr class="goodTableHeadTr2">' +
        goodTableHeadTr2Html  +
        '</tr></thead><tbody class="goodTableTbody">' +
        trHtml  +
      "</tbody></table>"
    $(".section_3_"+s_index +" .largeAnalysistable").html(table)
  }

  function initSmallAnalysisEcharts (s_index,list) {
     let legendlist = [currentclass, "全年级"],
        xAxis_data = [],
        schoolscore = [],
        classscore = [],
      curseries = [];
    $.each(list, function (idx, item) {
      xAxis_data.push("第" + item.qn + "题");
        classscore.push(item.classavgscore);
        schoolscore.push(item.gradeavgscore);
    })
      let color = ["#5699FF", "#5EC5C8"];
      curseries = [
        {
          name: currentclass,
          type: "line",
          symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
          smooth: false, //折线是否弯曲
          // symbol: "emptyCircle",
          symbolSize: 6,
          itemStyle: {
            normal: {
              color: "#4190FF" // 拐点外圈颜色
            }
          },
          label: {
            normal: {
              show: true,
              align: "center",
              verticalAlign: "bottom",
              position: "top",
              distance: 0,
              formatter: `{c}`
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: hexToRgba(color[0], 0.3)
                  },
                  {
                    offset: 1,
                    color: hexToRgba(color[0], 0)
                  }
                ],
                false
              ),
              shadowColor: hexToRgba(color[0], 0),
              shadowBlur: 10
            }
          },
          data: classscore
        },
        {
          name: "全年级",
          type: "line",
          // smooth: true, //是否平滑曲线显示
          symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
          smooth: false, //折线是否弯曲
          // symbol: "emptyCircle",
          symbolSize: 6,
          // zlevel: 3,
          itemStyle: {
            normal: {
              color: "#5FCE9E" // 拐点外圈颜色
            }
          },
          label: {
            normal: {
              show: true,
              align: "center",
              verticalAlign: "bottom",
              position: "top",
              distance: 0,
              formatter: `{c}`
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: hexToRgba(color[1], 0.3)
                  },
                  {
                    offset: 1,
                    color: hexToRgba(color[1], 0)
                  }
                ],
                false
              ),
              shadowColor: hexToRgba(color[1], 0),
              shadowBlur: 10
            }
          },
          data: schoolscore
        }
      ];
    let option = {
        animation: false,
        color: ["#5699FF", "#5EC5C8"],
        title: {
          text: "分",
          x: "left",
          y: "top",
          textStyle: {
            color: "#5F6E82",
            fontSize: 12,
            fontWeight: 500
          }
        },
        legend: {
        icon: "rectRound",
        itemWidth: $.UnitUtil.mm2px(2),
        itemHeight: $.UnitUtil.mm2px(2),
        data: legendlist,
        x: "center",
        y: "bottom"
      },
      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(".section_3_"+s_index +" #SmallAnalysisEcharts")
    );
    myEcharts.clear();
    myEcharts.setOption(option);
    showSmallSmallAnalysistable(list,legendlist,s_index);
  }

  function showSmallSmallAnalysistable (list,legendlist,s_index) {
    var table = "",goodTableHeadTr1Html = '<th rowspan="2">题号</th><th rowspan="2">题型</th><th rowspan="2">分值</th><th rowspan="2">难度</th><th colspan="2">年级</th><th colspan="2">'+currentclass+'</th>',
      goodTableHeadTr2Html = "", trHtml = "";
    var complexityarr = ["一", "二", "三", "四", "五"];
    $.each(list, function (idx, item) {
      var complexity = item.complexity ? complexityarr[item.complexity - 1] + "星" : " ";
      trHtml += "<tr>";
      trHtml+= '<td><div class="my_cell">' +
      item.qn +
      '</div></td><td><div class="my_cell">' +
      item.qtypename +
      '</div></td><td><div class="my_cell">' +
      item.score +
      '</div></td><td><div class="my_cell">' +
      complexity +
      '</div></td><td><div class="my_cell">' +
      item.gradeavgscore +
      '</div></td><td><div class="my_cell">' +
      item.gradesrate +
      '%</div></td><td><div class="my_cell">' +
      item.classavgscore +
      '</div></td><td><div class="my_cell">' +
      item.classsrate +
      "%" +
      '</div></td>';
    })
    $.each(legendlist, function (idx, item) {
      goodTableHeadTr2Html+="<th>平均分</th><th>得分率</th>";
    })
      table ='  <table border="1" class="my_table"><thead><tr class="goodTableHeadTr1">' +
        goodTableHeadTr1Html  +
        '</tr><tr class="goodTableHeadTr2">' +
        goodTableHeadTr2Html  +
        '</tr></thead><tbody class="goodTableTbody">' +
        trHtml  +
      "</tbody></table>"
    $(".section_3_" + s_index + " .SmallAnalysistable").html(table);
  }

  function initpointsAnalysisEcharts (s_index, list) {
    if (list.length == 0) return;
    console.log(list);
    var schoolscore = [],
      classscore = [],
      legendlist = [currentclass+"得分率", "年级得分率"];
    $.each(list, function (idx, item) {
      if (item.subjectname != "全科") {
        classscore.push(item.classsrate);
        schoolscore.push(item.gradesrate);
      }
    });
    // 求出数组最大值
    let arr = [...schoolscore, ...classscore];
    let arr1 = Math.max.apply(null, arr);
    let maxnum = parseInt((arr1 + 10) / 10) * 10;
    let arrList = [];
    $.each(list, function (idx, item) {
      if (item.subjectname != "全科") {
        let j = {
          name: item.pointname,
          max: maxnum
        };
        arrList.push(j);
      }
    });
    var option = {
      animation: false,
      color: ["#5C99FF", "#FF5F56"],
      legend: {
        icon: "rectRound",
        itemWidth: $.UnitUtil.mm2px(2),
        itemHeight: $.UnitUtil.mm2px(2),
        data: legendlist,
        x: "center",
        y: "bottom"
      },
      grid: {
        top: $.UnitUtil.mm2px(10),
        left: 0,
        right: 0,
        bottom: $.UnitUtil.mm2px(8),
        containLabel: true
      },
      radar: {
        radius: "60%",
        center: ["50%", "55%"],
        indicator: arrList
      },
      series: {
        type: "radar",
        tooltip: {
          trigger: "item"
        },
        // areaStyle: {},  //内部阴影
        data: [
         {
            value: classscore,
            label: {
              show: true,
              formatter: function (params) {
                return params.value;
              }
            },
            name: currentclass+"得分率"
          },
         {
            value: schoolscore,
            label: {
              show: true,
              formatter: function (params) {
                return params.value;
              }
            },
            name: "年级得分率"
          }
        ]
      }
    };
    var myEcharts = echarts.init(
      document.querySelector(".section_3_"+s_index +" #pointsAnalysisEcharts")
    );
    myEcharts.clear();
    myEcharts.setOption(option);
    showpointsAnalysistable(list,legendlist,s_index);
  }

  function showpointsAnalysistable (list, legendlist, s_index) {
     var table = "",goodTableHeadTr1Html = '<th rowspan="2">知识点</th><th rowspan="2">对应题号</th><th rowspan="2">分值</th><th rowspan="2">占比</th><th colspan="2">年级</th><th colspan="2">'+currentclass+'</th>',
      goodTableHeadTr2Html = "", trHtml = "";
    $.each(list, function (idx, item) {
      trHtml += "<tr>";
      trHtml+= '<td><div class="my_cell">' +
      item.pointname +
      '</div></td><td><div class="my_cell">' +
      item.qns +
      '</div></td><td><div class="my_cell">' +
      item.score +
      '</div></td><td><div class="my_cell">' +
      item.srate +
      '%</div></td><td><div class="my_cell">' +
      item.gradeavgscore +
      '</div></td><td><div class="my_cell">' +
      item.gradesrate +
      '%</div></td><td><div class="my_cell">' +
      item.classavgscore +
      '</div></td><td><div class="my_cell">' +
      item.classsrate +
      "%" +
      '</div></td>';
    })
    $.each(legendlist, function (idx, item) {
      goodTableHeadTr2Html+="<th>平均分</th><th>得分率</th>";
    })
      table ='  <table border="1" class="my_table"><thead><tr class="goodTableHeadTr1">' +
        goodTableHeadTr1Html  +
        '</tr><tr class="goodTableHeadTr2">' +
        goodTableHeadTr2Html  +
        '</tr></thead><tbody class="goodTableTbody">' +
        trHtml  +
      "</tbody></table>"
    $(".section_3_" + s_index + " .pointsAnalysistable").html(table);
    console.log($(".section_3_" + s_index + " .pointsAnalysistable").height());
    var 
  }
  var parameter = $(".section_3_html_root").data("page-params");
  parameter = JSON.parse(parameter);
  var html = "";
  $.each(parameter, function (s_index, item) {
    html+='<div class="page_root section_3_'+s_index +'">'+
     (s_index == 0?'<h1 class="section_title_1">第三章 试卷分析</h1><div class="abstract_box"><div class="abstract_left"><img src="/img/img2.png" /></div><div class="abstract_right"><div class="abstract_content">从学科试卷分析，帮我们从宏观的角度了解班级的水平和差异。系统从多个维度的数据进行学科对比分析，<strong>包括大题年级和班级的（平均分、得分率）、小题年级和班级的（平均分、得分率）。</strong></div></div></div>':"")+ 
      '<h1 class="subjectinfo">'+item.subjectname+'试卷分析</h1><h2 class="section_title_2">1. 大题分析</h2><h3 class="section_title_3">1.1 大题分析</h3><div id="largeAnalysisEcharts" style="margin: 0 4mm 4mm; height: 71mm"></div><h2 class="section_title_3">1.2 大题整体分析</h2><div class="largeAnalysistable"></div></div><div class="page_root section_3_'+
    s_index + '"><h2 class="section_title_2">2. 小题分析</h2><h3 class="section_title_3">2.1 小题分析</h3><div id="SmallAnalysisEcharts" style="margin: 0 4mm 4mm; height: 71mm"></div><h2 class="section_title_3_'+
      s_index +'">2.2 小题整体分析</h2><div class="SmallAnalysistable"></div></div>'+(item.points.length>0?'<div class="page_root section_3_'+
    s_index +'"><h2 class="section_title_2">3. 知识点掌握整体概况</h2><h3 class="section_title_3">3.1 知识点得分率分析</h3><div id="pointsAnalysisEcharts" style="margin: 0 4mm 4mm; height: 90mm"></div><h2 class="section_title_3">3.2 知识点整体分析</h2><div class="pointsAnalysistable"></div></div></div>':"")
  })
  $(".ChapterThree").html(html);
  console.log(parameter);
  $.each(parameter, function (s_index, item) { 
    initlargeAnalysisEcharts(s_index, item.types);
    initSmallAnalysisEcharts(s_index, item.questions);
    initpointsAnalysisEcharts(s_index, item.points);
  })
  
   document.documentElement.scrollTop = 4000;
});