<template>
  <div ref="echartsRef" class="echarts"> </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts/core'
import { TooltipComponent, LegendComponent } from 'echarts/components'
import { PieChart } from 'echarts/charts'
import { LabelLayout } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import { ref, onMounted } from 'vue'

defineOptions({
  name: 'ECharts',
})

type Props = {
  data: {
    value: string
    name: string
    itemStyle: {
      color: string
    }
  }[]
}

const props = withDefaults(defineProps<Props>(), {
  data: () => [],
})

const echartsRef = ref()
echarts.use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer, LabelLayout])

const option = ref({
  tooltip: {
    trigger: 'item',
  },
  legend: {
    orient: 'vertical',
    right: 0,
    top: 'center',
  },
  series: [
    {
      type: 'pie',
      center: ['30%', '50%'],
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
      },
      emphasis: {
        label: {
          show: false,
        },
      },
      labelLine: {
        show: false,
      },
      data: props.data,
    },
  ],
})

const initEcharts = () => {
  const myChart = echarts.init(echartsRef.value)
  myChart.setOption(option.value)
}

onMounted(() => {
  initEcharts()
})
</script>

<style scoped lang="less">
.echarts {
  width: 200px;
  height: 150px;
}
</style>
