<template>
  <div id="myMidChart" ref="redarChart" :style="boxStyle"></div>
</template>
<script>
export default {
  props: ["radarName", "radarValue", "radarTitle", "boxStyle"],
  data() {
    return {};
  },
  mounted() {
    this.$nextTick(function () {
      this.drawBar();
    });
  },
  methods: {
    drawBar() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(this.$refs.redarChart);
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "item",
        },
        radar: {
          // shape: 'circle',
          indicator: this.radarName,
          radius: 50,
        },
        series: [
          {
            type: "radar",
            name: this.radarTitle,
            data: [
              {
                value: this.radarValue,
                areaStyle: {
                  // 单项区域填充样式
                  normal: {
                    color: "#37A2FF", // 填充的颜色。[ default: "#000" ]
                  },
                },
              },
            ],
          },
        ],
      });
      window.addEventListener("resize", () => {
        // 第六步，执行echarts自带的resize方法，即可做到让echarts图表自适应
        myChart.resize();
      });
    },
  },
  watch: {
    radarValue(val, old) {
      this.drawBar();
    },
  },
  beforeDestroy() {
    /* 页面组件销毁的时候，别忘了移除绑定的监听resize事件，否则的话，多渲染几次
      容易导致内存泄漏和额外CPU或GPU占用哦*/
    window.removeEventListener("resize", () => {
      myChart.resize();
    });
  },
};
</script>
<style lang="less">
#myMidChart {
  width: 100%;
  height: 240px;
}
</style>
