schoolReportPDF/js/scoreAnalysis/section_2_level.js

$(function () {
  //各班等级分析
  function initclassLevelEcharts(list) {
    var xAxis_data = [],
      series_data = [],
      legend_data = [],
      levelRateObj = {},
      levelNumObj = {},
      levelrangeObj = [];
    $.each(list, function (key, item) {
      if ($.inArray(item.classname, xAxis_data) == -1) {
        xAxis_data.push(item.classname)
      }
      if ($.inArray(item.rankname + "类", legend_data) == -1) {
        legend_data.push(item.rankname + "类")
      }
      if ($.inArray(item.rankrange, levelrangeObj) == -1) {
        levelrangeObj.push(item.rankrange)
      }
      if (!levelRateObj[item.rankname + '类']) {
        levelRateObj[item.rankname + '类'] = [];
      }
      levelRateObj[item.rankname + '类'].push(item.sturate);
      if (!levelNumObj[item.rankname + '类']) {
        levelNumObj[item.rankname + '类'] = [];
      }
      levelNumObj[item.rankname + '类'].push(
        item.stunum
      );
    });
    $.each(legend_data, function (key, item) {
      series_data.push({
        name: item,
        type: "bar",
        stack: "总量",
        barWidth: 32,
        // 柱状图最小高度
        barMinHeight: 16,
        showBackground: true, // 柱状图显示背景
        backgroundStyle: {
          color: "#F3F4F5"
        },
        itemStyle: {
          normal: {
            barBorderRadius: [4, 4, 4, 4]
          }
        },
        label: {
          normal: {
            show: true,
            align: "center",
            verticalAlign: "middle",
            position: "inside",
            distance: 0,
            color: "#fff",
            formatter: function (params) {
              return levelNumObj[params.seriesName][params.dataIndex] || 0;
            }
          }
        },
        data: levelNumObj[item]
      });
    });
    showgraphicaldata(xAxis_data, legend_data, levelrangeObj, list);
    var option = {
      color: ["#5C99FF", "#ff5f56", "#5EC5C8", "#f1982b", "#6e5eff"],
      animation: false,
      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: legend_data,
      },
      grid: {
        top: $.UnitUtil.mm2px(10),
        left: 0,
        right: 0,
        bottom: $.UnitUtil.mm2px(8),
        containLabel: true,
      },
      xAxis: [{
        type: "category",
        data: xAxis_data,
        axisLabel: {
          color: "#5F6E82", //更改坐标轴文字颜色
          interval: 0
        },
        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: series_data
    };
    var myEcharts = echarts.init(document.querySelector(".section_2_level #classLevelEcharts"));
    myEcharts.clear();
    myEcharts.setOption(option);
  }
  //图表数据
  function showgraphicaldata(xAxis_data, legend_data, levelrangeObj, list) {
    //图表数据
    var arr = JSON.parse(JSON.stringify(list));
    var goodTableHeadTr1Html = '<th rowspan="2">班级</th>';
    var goodTableHeadTr2Html = '';
    var goodTableTbodyHtml = "";
    $.each(legend_data, function (idx, item) {
      goodTableHeadTr1Html += '<th colspan="2">' + item + levelrangeObj[idx] + '</th>';
      goodTableHeadTr2Html += '<th>人数</th><th>比例</th>';
    });
    $.each(xAxis_data, function (idx, item) {
      var trHtml = '<td><div class="my_cell">' + item + '</div></td>'
      var classs = $.grep(arr, function (val) {
        return val.classname == item;
      });
      $.each(legend_data, function (idx, item) {
        var rank = $.grep(classs, function (val) {
          return val.rankname + '类' == item;
        })[0];
        trHtml += '<td><div class="my_cell">' + rank.stunum +
          '</div></td><td><div class="my_cell">' + rank.sturate +
          '</div></td>'
      });
      goodTableTbodyHtml += '<tr>' + trHtml + '</tr>';
    });
    $(".section_2_level .goodTableHeadTr1").html(goodTableHeadTr1Html);
    $(".section_2_level .goodTableHeadTr2").html(goodTableHeadTr2Html);
    $(".section_2_level .goodTableTbody").html(goodTableTbodyHtml);
  }
  var parameter = $(".section_2_html_root .section_2_level_html_root").data("page-params");
  parameter = JSON.parse(parameter);
  var list = $.grep(parameter.djfx, function (item) {
    return item.ranktype == 1 && item.subjectid == 'zf';
  })[0].ranks;
  initclassLevelEcharts(list);
});