pbl-teacher-table/src/components/pages/components/data/scoreData.vue

<template>
  <div class="data_body">
    <div class="title">
      <span>量规评分</span>
    </div>
    <div style="width:100%">
      <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
      <div id="charts_canvas" class="echart" style="width: 100%; height: 100%;margin:0 0 0 1rem"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["scoreJson"],
  data() {
    return {
      chartObj: null,
      ooption: [
        { value: 0, name: "意识能力" },
        { value: 0, name: "科学探究能力" },
        { value: 0, name: "实践创新能力" },
        { value: 0, name: "学习房媳能力" },
        { value: 0, name: "工程思维能力" },
      ],
      option: {
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "量规评分",
            type: "pie",
            radius: "70%",
            center: ["50%", "50%"],
            data: [
              { value: 0, name: "意识能力" },
              { value: 0, name: "科学探究能力" },
              { value: 0, name: "实践创新能力" },
              { value: 0, name: "学习房媳能力" },
              { value: 0, name: "工程思维能力" },
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
              normal: {
                label: {
                  show: true,
                  formatter: "{d}%",
                  inside: true,
                  position: "inner",
                },
                labelLine: { show: false },
              },
            },
          },
        ],
      },
    };
  },
  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 = option;
        console.log(this.option.series[0].data);
        // 初始化雷达图
        this.chartObj = chartObj;
        this.chartObj.setOption(this.option);
      });
    },
  },
  watch: {
    scoreJson(val) {
      this.ooption = [
        { value: 0, name: "意识能力" },
        { value: 0, name: "科学探究能力" },
        { value: 0, name: "实践创新能力" },
        { value: 0, name: "学习房媳能力" },
        { value: 0, name: "工程思维能力" },
      ];
      this.scoreJson.forEach((item) => {
        if (item.rate) {
          this.ooption[0].value += item.rate.ca;
          this.ooption[1].value += item.rate.sia;
          this.ooption[2].value += item.rate.eta;
          this.ooption[3].value += item.rate.pia;
          this.ooption[4].value += item.rate.lra;
        }
      });
      if (!this.chartObj) {
        this.setChart(this.ooption);
      } else {
        this.option.series[0].data = this.ooption;
        this.chartObj.setOption(this.option);
      }
    },
  },
  mounted() {
    //ca 意识能力 sia 科学探究能力 eta 实践创新能力 pia 学习反思能力 lra 工程思维能力
    this.scoreJson.forEach((item) => {
      if (item.rate) {
        this.ooption[0].value += item.rate.ca;
        this.ooption[1].value += item.rate.sia;
        this.ooption[2].value += item.rate.eta;
        this.ooption[3].value += item.rate.pia;
        this.ooption[4].value += item.rate.lra;
      }
    });
    this.setChart(this.ooption);
  },
};
</script>

<style scoped>
.data_body {
  height: 500px;
  display: flex;
  position: relative;
  border-radius: 5px;
  border: 1px solid #eee;
  margin: 10px auto;
  box-sizing: border-box;
  padding: 10px;
  width: 95%;
}
.data_body .title {
  position: absolute;
  top: 10px;
  left: 10px;
}
</style>