<template>
  <div>
    <div
      style="width: 95%; height: 250px; margin: 0 auto"
      v-if="courseTypeArray && courseTypeArray.length"
    >
      <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
      <div
        id="charts_canvas"
        class="echart"
        style="width: 100%; height: 100%"
      ></div>
    </div>
    <div v-else style="text-align: center; height: 100%; line-height: 215px">
      暂无课程类型分析
    </div>
  </div>
</template>

<script>
export default {
  props: ["courseTypeArray"],
  data() {
    return {
      chartObj: null,
      option: {
        xAxis: {
          type: "category",
          data: [],
          axisLabel: {
            interval: 0, //使x轴文字显示全
            formatter: function (params) {
              let newParamsName = "";
              const paramsNameNumber = params.length; // 文字总长度
              const provideNumber = 4; //一行显示几个字
              const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              if (paramsNameNumber > provideNumber) {
                for (let p = 0; p < rowNumber; p++) {
                  const start = p * provideNumber;
                  const end = start + provideNumber;
                  const tempStr =
                    p === rowNumber - 1
                      ? params.substring(start, paramsNameNumber)
                      : params.substring(start, end) + "\n";
                  newParamsName += tempStr;
                }
              } else {
                newParamsName = params;
              }
              return newParamsName;
            },
          },
          axisLabel: {
            show: true,
            interval: 0, //使x轴上的文字显示完全,
            //设置一行显示几个字,自己设置
            formatter: function (params) {
              var newParamsName = "";
              var paramsNameNumber = params.length;
              var provideNumber = 4;
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = "";
                  var start = p * provideNumber;
                  var end = start + provideNumber;
                  if (p == rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    tempStr = params.substring(start, end) + "\n";
                  }
                  newParamsName += tempStr;
                }
              } else {
                newParamsName = params;
              }
              return newParamsName;
            },
          },
        },
        yAxis: {
          type: "value",
          minInterval: 1, // 设置最小间隔为 1
        },
        series: [
          {
            data: [],
            type: "bar",
          },
        ],
      },
    };
  },
  methods: {
    getInfo() {
      if (this.courseTypeArray && this.courseTypeArray[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")
        );
        // 初始化雷达图
        var sortedArray = [...this.courseTypeArray];
        var isSortArray = [];
        if (sortedArray.length > 6) {
          isSortArray = sortedArray.slice(0, 6);
        } else {
          isSortArray = sortedArray;
        }
        var a = [];
        var b = [];
        for (var i = 0; i < isSortArray.length; i++) {
          a.push(isSortArray[i].name);
          b.push(isSortArray[i].value);
        }
        this.option.series[0].data = b;
        this.option.xAxis.data = a;
        this.chartObj = chartObj;
        this.chartObj.setOption(this.option);
      });
      let _this = this;
      window.addEventListener("resize", () => {
        if (_this.chartObj) {
          _this.chartObj.resize();
        }
      });
    },
  },
  watch: {
    courseTypeArray: {
      handler: function (newVal, oldVal) {
        this.getInfo();
      },
      deep: true,
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getInfo();
    });
  },
};
</script>

<style>
</style>