<template>
  <div class="w-100">
    <Model title="风险评估阶段地块数量变更情况">
      <a-radio-group v-model:value="value2" button-style="solid">
        <a-radio-button value="1">按年</a-radio-button>
        <a-radio-button value="2">按季度</a-radio-button>
        <a-radio-button value="3">按月</a-radio-button>
        <a-radio-button value="4">按周</a-radio-button>
        <a-radio-button value="5">按天</a-radio-button>
      </a-radio-group>
      <Radar :chartData="chartData" height="360px" :option="option" v-if="chartData.length || chartData.length > 0" />
    </Model>
  </div>
</template>
<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import Model from './model.vue';
  import Radar from '/@/components/chart/Radar.vue';

  const chartData = ref<any>([]);
  const value2 = ref('3');
  const option = ref({
    title: {
      show: false,
    },
    grid: {
      left: '1%',
      right: '1%',
      top: '22%',
      bottom: '35px',
      containLabel: true,
    },

    legend: {
      bottom: 0,
      textStyle: {
        color: '#fff',
      },
      data: ['地块总数', '新增地块', '非污染地块'],
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} %',
    },
    xAxis: {
      type: 'category',
      axisLine: {
        lineStyle: {
          color: '#0096FF',
        },
      },

      axisLabel: {
        // interval: 0,
        rotate: 330,
        textStyle: {
          color: '#fff',
        },
      },
    },
    yAxis: {
      axisLine: {
        lineStyle: {
          color: '#0096FF',
          type: 'dashed',
        },
      },
      axisLabel: {
        textStyle: {
          color: '#fff',
        },
      },
      splitLine: {
        lineStyle: {
          color: '#0096FF',
          type: 'dashed',
        },
      },
    },
    indicator: [
      {
        name: '广州市',
      },
      {
        name: '深圳市',
      },
      {
        name: '韶关市',
      },
      {
        name: '江门市',
        value: 15.28,
      },
    ],
    series: [
      {
        name: '地块总数',
        type: 'radar',
        data: [9.68, , 3.16, 80.42, 15.28],
      },
      {
        name: '新增地块',
        type: 'radar',
        data: [5.68, 3.16, 6.42, 15.28, 3.28],
      },
      {
        name: '非污染地块',
        type: 'radar',
        data: [68, 3.16, 80.42, 15.28, 34.28],
      },
    ],
  });
  function init() {
    chartData.value = [
      {
        name: '广州市',
        value: 0.68,
      },
      {
        name: '深圳市',
        value: 3.16,
      },
      {
        name: '韶关市',
        value: 80.42,
      },
      {
        name: '江门市',
        value: 15.28,
      },
      {
        name: '惠州市',
        value: 15.28,
      },
    ];
  }
  onMounted(() => {
    init();
  });
</script>
<style lang="less" scoped></style>
