<script setup lang="ts">
import { defineProps } from "vue";
import { EChartsOption } from "echarts";
import Echart from "./Echarts.vue";
import { IDataType } from "./types";
import { computed } from "@vue/reactivity";
interface IProps {
  pieData: IDataType[];
}

const props = defineProps<IProps>();

const pieOptions = computed<EChartsOption>(() => ({
  tooltip: {
    trigger: "item"
  },
  legend: {
    orient: "horizontal",
    left: "left"
  },
  series: [
    {
      name: "分类数据",
      type: "pie",
      radius: "50%",
      data: props.pieData,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)"
        }
      }
    }
  ]
}));
</script>

<template>
  <Echart :option="pieOptions" />
</template>
