pbl-teacher-table/src/components/pages/dataBoardNew/student/studentInfo4/index.vue

<template>
  <div class="data_body">
    <div style="width: 100%; height: 100%">
      <div id="charts_canvas" class="echart" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    EworksNumArray: {
      type: Array,
    },
  },
  data() {
    return {
      chartObj: null,
      ooption: {
        data: [],
      },
      option: {
        tooltip: {
          trigger: "item",
        },
        grid: {
          top: "5%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },
        series: [
          {
            type: "pie",
            radius: '50%',
            avoidLabelOverlap: true,
            emphasis: {
              label: {
                show: true,
                fontSize: 16,
                fontWeight: "bold",
              },
            },
            data: [
              // { value: 123, name: "一年级" },
              // { value: 200, name: "二年级" },
              // { value: 250, name: "三年级" },
              // { value: 450, name: "四年级" },
              // { value: 300, name: "五年级" },
              // { value: 100, name: "六年级" },
            ],
          },
        ],
      },
    };
  },
  methods: {
    setChart(option) {
      // 雷达图显示的标签
      let newPromise = new Promise((resolve) => {
        resolve();
      });
      //然后异步执行echarts的初始化函数
      newPromise.then(() => {
        const chartObj = this.$echarts.init(
          //劳动课程
          this.$el.querySelector("#charts_canvas")
        );
        this.option.series[0].data = this.ooption.data.filter(item => item.value !== 0);
        // 初始化雷达图
        this.chartObj = chartObj;
        this.chartObj.setOption(this.option);
      });
    },
    setArray(array) {
      this.ooption = {
        data: [],
      };
      for (var i = 0; i < array.length; i++) {
        this.ooption.data.push({ value: array[i].works, name: array[i].name });
      }
      if (!this.chartObj) {
        this.setChart(this.ooption);
      } else {
        this.option.series[0].data = this.ooption.data;
        this.chartObj.setOption(this.option);
      }
      this.$forceUpdate();
    },
  },
  watch: {
    EworksNumArray: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        this.setArray(newValue);
        this.$forceUpdate();
      },
    },
  },
  mounted() {
    this.setArray(this.EworksNumArray);
    var _this = this;
    window.addEventListener("resize", () => {
      if (_this.chartObj) {
        _this.chartObj.resize();
      }
    });
  },
};
</script>

<style scoped>
.data_body {
  height: 100%;
  /* display: flex; */
  position: relative;
  border-radius: 5px;
  /* border: 1px solid #eee; */
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0;
  width: 95%;
  background: #fff;
}
</style>