<template>
  <BaseEChart :options="chartOptions" v-bind="$attrs" />
</template>

<script setup>
import { computed } from 'vue'
import BaseEChart from './BaseEChart.vue'

defineOptions({
  name: 'PieChart'
})

const props = defineProps({
  // 数据项 [{name: '名称', value: 100}]
  data: {
    type: Array,
    required: true
  },
  // 是否显示为环形图
  ring: {
    type: Boolean,
    default: false
  },
  // 图表标题
  title: {
    type: String,
    default: ''
  },
  // 半径设置
  radius: {
    type: [String, Array],
    default: '70%'
  },
  // 是否显示图例
  showLegend: {
    type: Boolean,
    default: true
  },
  // 图例位置
  legendPosition: {
    type: String,
    default: 'right' // 'right', 'bottom'
  }
})

const chartOptions = computed(() => {
  return {
    title: props.title ? {
      text: props.title,
      left: 'center',
      top: 10
    } : null,
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: props.showLegend ? {
      orient: props.legendPosition === 'right' ? 'vertical' : 'horizontal',
      [props.legendPosition]: '5%',
      top: props.legendPosition === 'right' ? 'middle' : 'bottom',
      itemWidth: 10,
      itemHeight: 10,
      icon: 'circle'
    } : undefined,
    series: [
      {
        name: props.title || '数据占比',
        type: 'pie',
        radius: props.ring ? ['50%', '70%'] : props.radius,
        avoidLabelOverlap: true,
        itemStyle: {
          borderRadius: 4,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          formatter: '{b}: {d}%'
        },
        labelLine: {
          show: true
        },
        data: props.data
      }
    ]
  }
})
</script> 