<template>
  <div>
    <div style="width: 95%; height: 220px; margin: 0 auto">
      <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
      <div
        id="charts_canvas"
        class="echart"
        style="width: 100%; height: 100%"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  props:["toolTypeArray"],
  data() {
    return {
      chartObj: null,
      option: {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
          show: false,
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            data: [
              { value: 0, name: "互动类" },
              { value: 0, name: "思维类" },
              { value: 0, name: "评价类" },
              { value: 0, name: "编程类" },
              { value: 0, name: "学科类" },
              { value: 0, name: "其他" },
            ],
            label: {
              formatter: "{b}\n{c}",
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
    };
  },
  methods: {
    getInfo() {
      if (this.toolTypeArray && this.toolTypeArray[0]) {
        this.setChart();
      }
    },
    setChart() {
      // 雷达图显示的标签
      let newPromise = new Promise((resolve) => {
        resolve();
      });
      //然后异步执行echarts的初始化函数
      newPromise.then(() => {
        const chartObj = this.$echarts.init(
          //劳动课程
          this.$el.querySelector("#charts_canvas")
          //   document.getElementById("#charts_canvas")
        );
        // 初始化雷达图
        for(var i=0;i<this.toolTypeArray[0].length;i++){
          this.option.series[0].data[i].value = this.toolTypeArray[0][i];
        }
        var a = this.option.series[0].data.filter(item => item.value !== 0);
        this.option.series[0].data = a;
        this.chartObj = chartObj;
        this.chartObj.setOption(this.option);
      });
      let _this = this;
      window.addEventListener("resize", () => {
        if (_this.chartObj) {
          _this.chartObj.resize();
        }
      });
    },
  },
  watch: {
    toolTypeArray: {
      handler: function (newVal, oldVal) {
        this.getInfo();
      },
      deep: true,
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getInfo();
    });
  },
};
</script>

<style>
</style>