examcloud-admin-web/src/modules/oe/component/examSummaryPie.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/component/legend";
import "echarts/lib/component/legendScroll";
export default {
  props: ["examId"],
  components: {
    "v-chart": ECharts
  },
  data() {
    return { options: {} };
  },
  methods: {
    getData() {
      if (!this.examId) {
        return;
      }
      this.$http
        .post(
          "/api/ecs_oe_admin/exam/student/statistic/by/finished?examId=" +
            this.examId
        )
        .then(response => {
          var resp = response.data;
          debugger;
          var optionData = {
            title: "考试人次:" + (resp.finished + resp.unFinished),
            legendData: [
              "未完成:" + resp.unFinished,
              "已完成:" + resp.finished
            ],
            seriesData: [
              { name: "未完成:" + resp.unFinished, value: resp.unFinished },
              { name: "已完成:" + resp.finished, value: resp.finished }
            ]
          };
          this.buildOptions(optionData);
        });
    },
    buildOptions(data) {
      var colors = ["#7CB5EC", "#FE8463"];
      this.options = {
        color: colors,
        title: {
          text: data.title,
          subtext: "",
          x: "left"
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}人次<br/>占比:{d}%"
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: 150,
          bottom: 100,
          data: data.legendData
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "50%",
            center: ["32%", "50%"],
            data: data.seriesData,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
    }
  },
  watch: {
    examId: function(newData) {
      if (newData) {
        this.getData();
      }
    }
  },
  created() {}
};
</script>
<style></style>