<template>
  <div class="chart" :id="id"></div>
</template>

<script>
export default {
  name: "radarChart",
  props: {
    id: String,
    params: Object,
  },
  watch: {
    params: {
      handler: function (val) {
        if (!!val.indicator) {
          this.initData();
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  created() {},
  mounted() {
    this.initData();
  },
  methods: {
    setOption() {
      const option = {
        color: this.colors || ["#4472c4", "#ed7d32", "#a5a5a5"],
        backgroundColor: "#fff",
        tooltip: {
          trigger: "item",
          confine: true,
        },
        legend: {
          show:true,
          bottom:0,
          itemHeight:2
        },
        radar: {
          indicator: [...this.params.indicator],
          splitNumber: 5,
          center:['50%', '48%'],
          radius:"70%",
          shape: "polygon",
          nameGap:10,
          axisLine:{
            show:false
          },
          splitLine:{
            lineStyle: {
              width: 0.5,
              color:'#e2e2e2'
            },
          },
          splitArea:{
            areaStyle:{
              color:['rgba(250,250,250,0)','rgba(200,200,200,0)']
            }
          }
        },
        series: [
          {
            type: "radar",
            lineStyle: {
              width: 1,
            },
            symbolSize: 4,
            areaStyle: {
              color: "transparent",
            },
            data: this.params.num,
          },
        ],
      };
      return option;
    },
    initData() {
      if (!this.chart) {
        const div = document.getElementById(this.id);
        this.chart = this.$echarts.init(div);
      }
      const options = this.setOption();
      this.chart?.clear();
      this.chart.setOption(options, true);
      this.chart.off("click");
      this.chart.on("click", "series", (params) => {
        // this.$emit("clickPieChart", params);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.chart {
  height: 100%;
}
</style>
