<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: '28px',
      right: '0',
      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 },
        { name: '构图饱满', max: 100 },
      ],

      center: ['50%', '62%'],
      radius: '70%',
    },
    series: [{
      type: 'radar',
      data: [
        {
          value: [81, 81, 83, 97, 94, 88, 87],
          name: '全市平均',
          areaStyle: {
            color: '#11a59760',
          },
        },
        {
          value: [47, 43, 59, 44, 56, 45, 52],
          name: '前一年农村平均',
          areaStyle: {
            color: '#ff8366',
          },
        },
        {
          value: [74, 74, 62, 77, 61, 77, 66],
          name: '目前农村平均',
          areaStyle: {
            color: '#eff41060',
          },
        },
      ],
    }],

  })
})
</script>

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