<script setup lang="ts">
import * as echarts from 'echarts'

const chartRef = ref()
onMounted(() => {
  echarts.init(chartRef.value).setOption({
    title: {
      text: '学生素养',
      textStyle: {
        color: '#fff',
      },
    },
    tooltip: {
      trigger: 'item',
      confine: true,
    },
    legend: {
      date: ['全市平均', '前一年农村平均', '目前农村平均'],
      top: '7%',
      right: '5%',
      textStyle: {
        color: '#ccc',
      },
    },
    // grid: {
    //   top: '30%',
    //   bottom: '0%',
    // },
    color: ['#11a597', '#ff8366', '#eff410'],
    radar: {
      // shape: 'circle',
      indicator: [
        { name: '图像识读', max: 100 },
        { name: '文化理解', max: 100 },
        { name: '美术表现', max: 100 },
        { name: '综合素养', max: 100 },
        { name: '创意实践', max: 100 },
        { name: '审美判断', max: 100 },
      ],

      center: ['50%', '57%'],
      radius: '70%',
    },
    series: [{
      type: 'radar',
      data: [
        {
          value: [82, 76, 89, 73, 95, 94],
          name: '全市平均',
          areaStyle: {
            color: '#11a59760',
          },
        },
        {
          value: [38, 40, 56, 36, 50, 46],
          name: '前一年农村平均',
          areaStyle: {
            color: '#ff8366',
          },
        },
        {
          value: [69, 52, 62, 67, 76, 52],
          name: '目前农村平均',
          areaStyle: {
            color: '#eff41060',
          },
        },
      ],
    }],

  })
})
</script>

<template>
  <div ref="chartRef" class="w-full h-full " />
</template>
