<!-- 圆饼图 -->
<template>
  <div :id="id" :class="className" :style="{ height, width }" />
</template>

<script setup lang="ts">
import * as echarts from "echarts";

const props = defineProps({
  id: {
    type: String,
    default: "pieChart",
    required: true,
  },
  className: {
    type: String,
    default: "chart",
  },
  width: {
    type: String,
    default: "400px",
  },
  height: {
    type: String,
    default: "300px",
  },
  title: {
    type: String,
    default: "",
  },
  // data:[78,88,65,82,65]
  data: {
    type: Array,
    default: [] as Array<number>,
  },
});
/**
 * 配置项
 */
const options = {
  title: {
    text: props.title,
    left: "39%",
    top: "52%",
    textStyle: {
      fontSize: 16,
      fontWeight: "normal",
      color: "#09132e",
    },
  },
  legend: {
    right: "6%",
    top: "6%",
    padding: 0,
    itemGap: 5,
    icon: "roundRect",
    data: ["0-20", "21-40", "41-60", "61-80", "81-100"],
  },
  series: [
    {
      name: props.title,
      type: "pie",
      radius: ["40%", "60%"],
      avoidLabelOverlap: false,
      label: {
        show: true,
        formatter: "{c}%",
      },
      center: ["50%", "55%"],
      data: [
        { value: props.data?.[0], name: "0-20" },
        { value: props.data?.[1], name: "21-40" },
        { value: props.data?.[2], name: "41-60" },
        { value: props.data?.[3], name: "61-80" },
        { value: props.data?.[4], name: "81-100" },
      ],
    },
  ],
};

onMounted(() => {
  // 图表初始化
  const chart = echarts.init(
    document.getElementById(<string>props.id) as HTMLDivElement
  );
  chart.setOption(options);
  // 大小自适应
  window.addEventListener("resize", () => {
    chart.resize();
  });
});
</script>
