<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: [83, 82, 90, 86, 80, 99, 99],
          name: '全市平均',
          areaStyle: {
            color: '#11a59760',
          },
        },
        {
          value: [44, 40, 46, 52, 51, 59, 45],
          name: '前一年农村平均',
          areaStyle: {
            color: '#ff8366',
          },
        },
        {
          value: [63, 65, 76, 74, 79, 63, 75],
          name: '目前农村平均',
          areaStyle: {
            color: '#eff41060',
          },
        },
      ],
    }],

  })
})
</script>

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