<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 {
  data: IDataType[];
}

const props = defineProps<IProps>();

const option = computed<EChartsOption>(() => ({
  legend: {
    top: "left"
  },
  series: [
    {
      name: "Nightingale Chart",
      type: "pie",
      radius: [20, 120],
      center: ["50%", "50%"],
      roseType: "area",
      itemStyle: {
        borderRadius: 8
      },
      data: props.data
    }
  ]
}));
</script>

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