<!-- @format -->

<script>
  import { defineComponent } from 'vue';
  import BaseRadar from './BaseRadar.vue';

  export default defineComponent({
    name: 'BasicRadar',
    extends: BaseRadar,
    props: {
      series: {
        type: Array,
        required: true,
      },
      indicator: {
        type: Array,
        required: true,
      },
      radius: {
        type: String,
        default: '75%',
      },
    },
    data() {
      return {};
    },
    computed: {},
    created() {},
    mounted() {
      let optionData = this.optionHandle();

      this.setOption(optionData);
      this.renderChart();
    },
    methods: {
      optionHandle() {
        let _this = this;
        let index = 0;
        let color = [
          '#0075FF',
          '#7a7b82',
          '#B2BCF3',
          '#655ADC',
          '#D04CFF',
          '#F14A4A',
          '#EB9260',
          '#E8EB60',
          '#3FE280',
          '#3FC5E2',
        ];
        let richObj = {
          top: {
            color: '#10C8D8',
            fontFamily: 'Microsoft YaHei',
            fontSize: 20,
            fontWeight: 500,
            align: 'left',
            padding: [0, 0, 5, 10],
          },
          // 属性下部分样式
          end: {
            color: 'rgba(255, 255, 250, 0.65)',
            fontFamily: 'Microsoft YaHei',
            fonSize: 12,
            fontWeight: 400,
            align: 'center',
          },
        };
        for (let i = 0; i < color.length; i++) {
          var obj = { height: 6, width: 6, align: 'center', backgroundColor: color[i] };
          richObj['rect' + (i + 1)] = obj;
        }
        let option = {
          animationDuration: 300,
          animationEasing: 'linear',
          textStyle: {
            color: '#fff',
            fontFamily: 'Microsoft YaHei',
          },
          radar: {
            radius: '70%',
            splitNumber: 2, // 雷达图圈数设置
            axisName: {
              formatter: (params) => {
                // 使用formatter可以将结果进行重定义，同时可以使用语法`{|}`来引入富文本样式
                // debugger;
                // console.log(params);
                let a = params.split(',')[0];
                let b = params.split(',')[1];
                // `${0}px`
                index++;
                var rect = 'rect' + index;
                return `{top|${a}}\n{${rect}|} {end|${b}}`;
                // return '{top|'+a+'}' + '\n' + '{rect|}{end|'+b+'}'
              },
              // 富文本样式定义
              rich: richObj,
            },
            // 设置雷达图坐标轴线
            axisLine: {
              lineStyle: {
                color: 'rgba(255, 255, 205, 0.05)',
              },
            },
            splitArea: {
              show: false,
              areaStyle: {
                color: 'rgba(255,0,0,0)', // 图表背景的颜色
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 2,
                color: ['rgba(255, 255, 255, 0.1)', 'rgba(6, 235, 238, 0.1)'],
                // color: 'rgba(255, 255, 255, 0.1)', // 设置网格的颜色
              },
            },
            indicator: _this.indicator,
          },
          series: [
            {
              name: 'Budget vs spending',
              type: 'radar',
              symbol: 'none',
              lineStyle: {
                color: '#06EBEE',
                width: 2,
              },
              areaStyle: {
                color: 'rgba(6, 235, 238, 0.1)',
              },
              data: _this.series,
            },
          ],
        };
        return option;
      },
    },
  });
</script>
