<!-- 年度告警分析 -->
<script lang="ts" setup>
import type { Ref } from 'vue'
import { onMounted, ref } from 'vue'
import radarChart from '@/components/Echart/radarChart.vue'
const alarmYearData: any = ref([]) // Y轴
const alarmYearXData: Ref<string[]> = ref([]) // X轴
const alarmYearLoading = ref(false)
const indicator = [
  { name: '23所', max: 6500 },
  { name: '25所', max: 16000 },
  { name: '208厂', max: 30000 },
  { name: '283所', max: 38000 },
  { name: '699厂', max: 52000 },
  { name: '801厂', max: 25000 },
]
function getalarmYear() {
  alarmYearLoading.value = true
  const value = [4200, 3000, 20000, 35000, 50000, 18000]
  alarmYearData.value = [{ name: '告警数量', value }]
  alarmYearLoading.value = false
}

onMounted(() => {
  getalarmYear()
})
</script>

<template>
  <div style="width: 100%;height: 100%;">
    <radar-chart
      unit=""
      :data="alarmYearData"
      :legend="{
        textStyle: {
          color: '#acdddf',
          fontSize: 12,
        },
        show: false,
        orient: 'horizontal',
        icon: 'circle',
        itemWidth: 12,
        itemHeight: 12,
        y: 'top',
        x: 'center',
        type: 'scroll', // 显示分页
      }"
      :grid="{
        top: 50,
        left: 10,
        right: 10,
        bottom: 0,
        containLabel: true, // 是否包含坐标轴的刻度标签
      }"
      axisLineColor="#acdddf"
      fontColor="#acdddf"
      :radar="indicator"
    />
  </div>
</template>