<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: ['#2ABB78', '#34D160', '#22FBFE', '#168A8E', '#44D794', '#0C9154', '#2151db'],
  series: [
    {
      name: '客座名师占比',
      type: 'pie',
      radius: '60px',
      center: ['12.5%', '75px'],
      avoidLabelOverlap: false,
      label: { color: '#fff' },
      labelLine: {
        show: true,
        length: 0,
      },
      data: [
        { value: 20, name: '艺术名家' },
        { value: 60, name: '名优教师' },
        { value: 25, name: '社会师资' },
      ],
    },
    {
      name: '名优教师比例',
      type: 'pie',
      roseType: 'radius',
      radius: ['30px', '60px'],
      center: ['37.5%', '75px'],
      avoidLabelOverlap: false,
      label: { color: '#fff' },
      labelLine: {
        show: true,
        length: 0,
      },
      data: [
        { value: 11, name: '桐乡市教坛新秀' },
        { value: 21, name: '嘉兴市学科带头人' },
        { value: 17, name: '嘉兴市教坛新秀' },
        { value: 31, name: '浙江省教坛新秀' },
        { value: 14, name: '嘉兴市名师' },
        { value: 41, name: '桐乡市学科带头人' },
        { value: 21, name: '桐乡骨干教师' },
      ],
    },
    {
      name: '年龄分布',
      type: 'pie',
      roseType: 'radius',
      radius: ['30px', '60px'],
      center: ['62.5%', '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: ['87.5%', '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>
