schoolReportPDF/js/section_1.js

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);
}
$(function () {
  // outerHeight(true) 高度为 height+margin+padding+border
  var parameter = $(".section_1_html_root").data("page-params");
  console.log("section_1:parameter", parameter);
  initAverageScoreEcharts();
  initExcellenceRateEcharts();
  initExamnumEcharts();
  initbzcEcharts();
});