<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: ["workJson", "chapters"],
  data() {
    return {
      chartObj: null,
      ooption: {
        xdata: [],
        sdata: [],
      },
      option: {
        tooltip: {
          trigger: "item",
        },
        grid: {
          left: "1%",
          bottom: "10%",
          top: "15%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [],
          inverse: true,
          axisLabel: {
            inside: true,
            textStyle: {
              color: "#000",
            },
            formatter: function (val) {
              var strs = val.split(""); //字符串数组
              var str = "";
              for (var i = 0, s; (s = strs[i++]); ) {
                //遍历字符串数组
                str += s;
                if (!(i % 1)) str += "\n";
              }
              return str;
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          z: 10,
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, 1],
          minInterval: 1,
          position: "top",
          axisLine: {
            onZero: false,
          },
        },
        dataZoom: [
          {
            type: "inside",
            yAxisIndex: 0,
            startValue: 0,
            endValue: 5,
            zoomLock: true,
          },
        ],
        series: [
          {
            type: "bar",
            data: [],
            showBackground: true,
            barWidth: "50px",
            label: {
              show: true,
              position: "top",
              color: "#2e2e2e",
            },
          },
        ],
      },
    };
  },
  methods: {
    setChart(option) {
      // 雷达图显示的标签
      let newPromise = new Promise((resolve) => {
        resolve();
      });
      //然后异步执行echarts的初始化函数
      newPromise.then(() => {
        const chartObj = this.$echarts.init(
          //劳动课程
          this.$el.querySelector("#charts_canvas")
        );
        this.option.xAxis.data = option.xdata;
        this.option.series[0].data = option.sdata;
        // 初始化雷达图
        this.chartObj = chartObj;
        this.chartObj.setOption(this.option);
      });
    },
  },
  watch: {
    workJson(val) {
      this.ooption = {
        xdata: [],
        sdata: [],
      };
      this.chapters.forEach((item, index) => {
        this.ooption.xdata.push(item.name);
        this.ooption.sdata.push(0);
      });
      this.workJson.forEach((item, index) => {
        this.ooption.sdata[item.stage]++;
      });
      console.log(this.ooption);
      if (!this.chartObj) {
        this.setChart(this.ooption);
      } else {
        this.option.xAxis.data = this.ooption.xdata;
        this.option.series[0].data = this.ooption.sdata;
        this.chartObj.setOption(this.option);
      }
    },
  },
  mounted() {
    this.chapters.forEach((item, index) => {
      this.ooption.xdata.push(item.name);
      this.ooption.sdata.push(0);
    });
    this.workJson.forEach((item, index) => {
      this.ooption.sdata[item.stage]++;
    });
    console.log(this.ooption);
    this.setChart(this.ooption);
    var _this = this;
    window.addEventListener("resize", () => {
      if (_this.chartObj) {
        _this.chartObj.resize();
      }
    });
  },
};
</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%;
  background: #fff;
}
.data_body .title {
  position: absolute;
  top: 20px;
  left: 20px;
}
</style>
