stmms-ft/stmms-web/src/main/webapp/static/report-pdf/js/chart-render.js

(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 getStrLen(str) {
  //   var len = 0;
  //   for (var i = 0; i < str.length; i++) {
  //     if (str.charCodeAt(i) > 127 || str.charCodeAt(i) == 94) {
  //       len += 2;
  //     } else {
  //       len++;
  //     }
  //   }
  //   return len;
  // }

  function getBarPointTopicOptions(datas) {
    var yAxisLabels = datas.map(function(item) {
      return [item.name, item.number].join("#");
    });
    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 fullRateDatas = datas.map(function(item) {
      return item.fullRate;
    });

    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)"
        }
      },
      {
        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: 17,
            margin: 20,
            formatter: function(value) {
              var str = value.split("#");
              if (str[0].length > 10) str[0] = str[0].substr(0, 10) + "...";
              return [str[0], str[1]].join(" ");
            }
          }
        },
        {
          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 barWidth = 22 - datas.length * 2;
    var series = datas.map(function(item, index) {
      return {
        type: "bar",
        data: [
          item.totalCount,
          item.maxScore,
          item.minScore,
          item.passCount,
          item.passRate100,
          item.excellentCount,
          item.excellentRate100,
          item.avgScore,
          item.relativeAvgScore
        ],
        barWidth: barWidth,
        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,
        bottom: 100,
        show: true,
        borderColor: "rgba(230,230,230,1)"
      },
      xAxis: {
        type: "category",
        data: xAxisData,
        boundaryGap: false,
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(233,233,233,1)"
          }
        },
        axisLabel: {
          fontSize: 19,
          margin: 20,
          interval: 0,
          formatter: function name(value) {
            var str = sectionArr(value, 9);
            return str.join("\n");
          }
        },
        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,
          showSymbol: levelDatas.length <= 1,
          symbol: "circle",
          symbolSize: 8,
          itemStyle: {
            color: "rgba(61, 160, 255, 0.8)"
          },
          lineStyle: {
            color: "rgba(61, 160, 255, 0.8)"
          },
          areaStyle: {
            color: linearColor
          }
        }
      ]
    };
  }

  function getLineReverseOptions(datas) {
    var yAxisDatas = datas.map(function(item) {
      return [item.name, item.number].join("#");
    });
    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: 200,
        bottom: 50,
        show: true,
        borderColor: "rgba(230,230,230,1)"
      },
      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,
          formatter: function(value) {
            var str = value.split("#");
            if (str[1]) {
              if (str[0].length > 10) str[0] = str[0].substr(0, 10) + "...";
              return [str[0], str[1]].join(" ");
            } else {
              if (str[0].length > 13) str[0] = str[0].substr(0, 13) + "...";
              return str[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,
          showSymbol: levelDatas.length <= 1,
          symbol: "circle",
          symbolSize: 8,
          itemStyle: {
            color: "rgba(61, 160, 255, 0.8)"
          },
          lineStyle: {
            color: "rgba(61, 160, 255, 0.8)"
          },
          areaStyle: {
            color: linearColor
          }
        }
      ]
    };
  }

  function getLineSmoothOptions(datainfo) {
    var lineColors = colors.slice(0, -1);
    var datas = datainfo.dataList;
    var lineColor = lineColors[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,
        show: true,
        borderColor: "rgba(230,230,230,1)"
      },
      xAxis: {
        type: "category",
        data: xAxisData,
        boundaryGap: false,
        inverse: true,
        splitLine: {
          show: false
        },
        axisLabel: {
          fontSize: 19,
          margin: 20,
          interval: xAxisData.length <= 16 ? 0 : "auto",
          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
          }
        }
      ]
    };
  }

  function sectionArr(arrayList, sectionLength) {
    var splitArr = [];
    for (var i = 0, len = arrayList.length; i < len; i += sectionLength) {
      splitArr.push(arrayList.slice(i, i + sectionLength));
    }
    return splitArr;
  }

  window.Charts = Charts;
})(window);