<script setup lang="ts">
import * as echarts from 'echarts'
import 'echarts-liquidfill'
// const props = defineProps<{
//   val: number
// }>()
// console.log('val :>> ', props, props.val)
const chartRef = ref()
const option = {
  // tooltip: {
  //   trigger: 'item',
  // },
  // legend: {
  //   top: '5%',
  //   left: 'center',
  // },
  color: ['#7817B5', '#703297', '#AB56C0', '#8A00E1', '#4C1A6C', '#6054FF', '#AB68D6'],
  series: [
    {
      name: '学科类别分布',
      type: 'pie',
      radius: '60px',
      center: ['16%', '75px'],
      avoidLabelOverlap: false,
      label: { color: '#fff' },
      labelLine: {
        show: true,
        length: 0,
      },
      data: [
        { value: 40, name: '语文' },
        { value: 50, name: '数学' },
        { value: 60, name: '英语' },
        { value: 70, name: '科学' },
        { value: 60, name: '体育' },
      ],
    },
    {
      name: '教师年龄分布',
      type: 'pie',
      roseType: 'radius',
      radius: ['30px', '60px'],
      center: ['50%', '75px'],
      avoidLabelOverlap: false,
      label: { color: '#fff' },
      labelLine: {
        show: true,
        length: 0,
      },
      data: [
        { value: 11, name: '45-50' },
        { value: 21, name: '40-45' },
        { value: 15, name: '50-60' },
        { value: 31, name: '35-40' },
        { value: 41, name: '25-35' },
        { value: 18, name: '25岁以下' },
      ],
    },
    {
      name: '教师职称分布',
      type: 'pie',
      roseType: 'radius',
      radius: ['30px', '60px'],
      center: ['84%', '75px'],
      avoidLabelOverlap: false,
      label: { color: '#fff' },
      labelLine: {
        show: true,
        length: 0,
      },
      data: [
        { value: 27, name: '一级' },
        { value: 29, name: '高级' },
        { value: 42, name: '正高级' },
        { value: 34, name: '其他' },
        { value: 14, name: '见习期' },
        { value: 20, name: '二级' },
      ],
    },
  ],
}
onMounted(() => {
  echarts.init(chartRef.value).setOption(option)
})
</script>

<template>
  <div class="flex flex-col w-full h-full">
    <div ref="chartRef" class="w-full h-full flex-grow" />
    <div class="w-full flex">
      <div v-for="name in option.series.map(({ name }) => name)" :key="name" class="flex_center flex-auto text-sm">
        {{ name }}
      </div>
    </div>
  </div>
</template>
