schoolReportPDF/js/section_1.js

$(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();
});