<script setup lang="ts">
import * as echarts from 'echarts'
import 'echarts-liquidfill'
const props = defineProps<{
  ecahrtsData: object
}>()
// 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: props.ecahrtsData.series_name,
        type: 'pie',
        radius: ['40px', '86px'],
        avoidLabelOverlap: false,
        label: { color: '#fff' },
        labelLine: {
          show: true,
          length: 10,
        },
        data:props.ecahrtsData.series_data,
      },
    ],
  })
})
</script>

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