<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()
onMounted(() => {
  echarts.init(chartRef.value).setOption({
    tooltip: {
      trigger: 'item',
      formatter: '{a}</br>{b}: {c} ({d}%)',
    },
    // legend: {
    //   top: '5%',
    //   left: 'center',
    // },
    color: ['#F45E23', '#44D7B6', '#6054FF'],
    series: [
      {
        name: '教学场景分布',
        type: 'pie',
        radius: ['40px', '86px'],
        avoidLabelOverlap: false,
        label: { color: '#fff' },
        labelLine: {
          show: true,
          length: 10,
        },
        data: [
          { value: 74, name: '自主教学节次' },
          { value: 91, name: '名师飞课节次' },
          { value: 240, name: '全景课堂节次' },
        ],
      },
    ],
  })
})
</script>

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