examcloud-admin-web/src/modules/oe/component/examSummaryLine.vue

<template>
  <div><v-chart :options="options" /></div>
</template>
<script>
import ECharts from "vue-echarts/components/ECharts";
import "echarts/lib/chart/pie";
import "echarts/lib/component/polar";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
import "echarts/lib/chart/bar";
import "echarts/lib/chart/line";
export default {
  props: ["examId"],
  components: {
    "v-chart": ECharts
  },
  data() {
    return { options: {} };
  },
  methods: {
    getData() {
      if (!this.examId) {
        return;
      }
      this.$http
        .get(
          "/api/ecs_oe_admin/exam/student/courseProgress/list?examId=" +
            this.examId +
            "&isForChart=true"
        )
        .then(response => {
          debugger;
          var resp = response.data;
          resp.sort(function(a, b) {
            if (b["completedProportion"] != a["completedProportion"]) {
              return b["completedProportion"] - a["completedProportion"];
            } else if (b["allNum"] != a["allNum"]) {
              return b["allNum"] - a["allNum"];
            } else {
              return b["completedNum"] - a["completedNum"];
            }
          });

          var campusCount = 5;
          var courseProgressDataList = [];
          //找出5个完成比例最高的
          if (resp.length >= campusCount) {
            courseProgressDataList = resp.slice(0, campusCount);
          } else {
            courseProgressDataList = resp;
          }
          var xAxisData = [];
          var seriesBar = {
            name: "计划数",
            type: "bar",
            data: []
          };
          var seriesLine1 = {
            name: "完成数",
            type: "line",
            data: []
          };
          var seriesLine2 = {
            name: "完成比(%)",
            type: "line",
            data: []
          };
          var yAxis = { maxScale1: 0, maxScale2: 0 };
          for (var i = 0; i < courseProgressDataList.length; i++) {
            xAxisData.push(courseProgressDataList[i].courseName);
            seriesBar.data.push(courseProgressDataList[i].allNum);
            seriesLine1.data.push(courseProgressDataList[i].completedNum);
            seriesLine2.data.push(
              courseProgressDataList[i].completedProportion
            );
            yAxis.maxScale1 = courseProgressDataList[0].allNum;
            yAxis.maxScale2 = courseProgressDataList[0].completedProportion;
          }
          var optionData = {
            legendData: ["计划数", "完成数", "完成比(%)"],
            xAxis: { data: xAxisData },
            series: [seriesBar, seriesLine1, seriesLine2],
            yAxis
          };
          this.buildOptions(optionData);
        });
    },
    buildOptions(optionData) {
      var colors = ["#FE8463", "#66CCFF", "#675bba"];
      this.options = {
        color: colors,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: optionData.legendData
        },
        xAxis: [
          {
            type: "category",
            data: optionData.xAxis.data,
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "人次",
            min: 0,
            max: optionData.yAxis.maxScale1,
            interval: 50,
            axisLabel: {
              formatter: "{value} "
            }
          },
          {
            type: "value",
            name: "完成比例",
            min: 0,
            max: optionData.yAxis.maxScale2,
            interval: 20,
            axisLabel: {
              formatter: "{value} %"
            }
          }
        ],
        series: optionData.series
      };
    }
  },
  watch: {
    examId: function(newData) {
      if (newData) {
        this.getData();
      }
    }
  },
  created() {}
};
</script>
<style></style>