<template>
  <div>
    <div style="width: 95%; height: 100%; 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 {
  data() {
    return {
      randarJson: [
        { target: "发散性思维", count: 1, value: 4 },
        { target: "逻辑性思维", count: 1, value: 4 },
        { target: "聚焦主题", count: 1, value: 5 },
        { target: "借助多媒体工具", count: 1, value: 4 },
        { target: "同伴互学", count: 1, value: 4 },
        { target: "语言准确", count: 1, value: 4.5 },
      ],
      chartObj: null,
      option: {
        splitNumber: 5,
        tooltip: {
          triggerOn: "mousemove",
          //雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好
          confine: true,
          enterable: true, //鼠标是否可以移动到tooltip区域内
          backgroundColor: "rgba(255,255,255,0.7)",
          textStyle: {
            // 文字样式
            align: "left",
          },
          left: "right",
          top: "bottom",
        },
        radar: {
          radius: ["0%", "70%"],
          shape: "circle",
          center: ["50%", "50%"],
          axisName: {
            textStyle: {
              // 文字样式
              color: "#58a5e6",
            },
            formatter: function (value, indicator) {
              // value = value.replace(/\S{2}/g, function (match) {
              //   return match + "\n";
              // });
              return value;
            },
          },
          indicator: [
            // 雷达图的指示器，用来指定雷达图中的多个变量（维度）
          ],
        },
        // 雷达图背景的颜色，在这儿随便设置了一个颜色，完全不透明度为0，就实现了透明背景
        splitArea: {
          show: true,
          areaStyle: {
            color: "rgba(255,0,0,0)", // 图表背景的颜色
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: "rgba(131,141,158,.1)", // 设置网格的颜色
          },
        },
        series: [
          {
            name: "目标得分", // tooltip中的标题
            type: "radar", // 表示是雷达图
            symbol: "circle", // 拐点的样式，还可以取值'rect','angle'等
            symbolSize: 8, // 拐点的大小
            areaStyle: {
              normal: {
                width: 1,
                opacity: 0.2,
              },
            },
            data: [
              {
                // 设置各个指标原始值
                value: [],
                // 设置区域边框和区域的颜色
                itemStyle: {
                  normal: {
                    color: "#58a5e6",
                    lineStyle: {
                      color: "#58a5e6",
                    },
                  },
                },
              },
            ],
          },
        ],
      },
    };
  },
  methods: {
    getInfo() {
      this.setChart();
    },
    setChart() {
      // 雷达图显示的标签
      let newPromise = new Promise((resolve) => {
        resolve();
      });
      //然后异步执行echarts的初始化函数
      newPromise.then(() => {
        if (this.randarJson.length) {
          const chartObj = this.$echarts.init(
            //劳动课程
            this.$el.querySelector("#charts_canvas")
          );
          let radarOption = JSON.parse(JSON.stringify(this.option));
          for (var i = 0; i < this.randarJson.length; i++) {
            radarOption.radar.indicator.push({
              name: this.randarJson[i].target,
              max: 5,
            });
            radarOption.series[0].data[0].value.push(
              (this.randarJson[i].value / this.randarJson[i].count).toFixed(1)
            );
          }

          this.chartObj = chartObj;
          this.chartObj.setOption(radarOption);
        }
      });
      let _this = this;
      window.addEventListener("resize", () => {
        if (_this.chartObj) {
          _this.chartObj.resize();
        }
      });
    },
  },
  watch: {
    userid(newValue, oldValue) {
      this.getInfo();
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getInfo();
    });
  },
};
</script>

<style scoped>
</style>