<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts" setup>
  import { onMounted, PropType, ref, Ref } from 'vue';
  import { useECharts } from '@/hooks/web/useECharts';

  const props = defineProps({
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '300px',
    },
    pieData:{
      type:Array,
      default:[]
    }
  });
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  const option = {
    tooltip: {
			trigger: 'item'
		},
    series: [
      {
        type: 'pie',
        data: props.pieData,
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 2,
        },
      },
    ]
  };

  onMounted(() => {
    setOptions(option as any);
  });
</script>
