<!-- 双圈图 -->
<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: "doubleChart",
    required: true,
  },
  className: {
    type: String,
    default: "chart",
  },
  width: {
    type: String,
    default: "200px",
  },
  height: {
    type: String,
    default: "200px",
  },
  color: {
    type: String,
    default: "#2f539b",
  },
  bgColor: {
    type: String,
    default: "#e6e8f9",
  },
  data: {
    type: Number,
    default: 0,
    required: true,
  },
});

const options = {
  animation: true,
  title: {
    show: true,
    text: props.data,
    x: "center",
    y: "center",
    textStyle: {
      fontSize: 18,
      fontWeight: "normal",
      color: "#09132e",
    },
  },
  series: [
    {
      name: "Double Chart",
      type: "pie",
      radius: ["74%", "94%"],
      avoidLabelOverlap: false,
      colorBy: "series",
      itemStyle: {
        color: props.color,
        borderColor: "#ffffff",
        borderWidth: 10,
      },
      label: { show: false },
      emphasis: { label: { show: false } },
      labelLine: { show: false },
      data: [25, 25, 25, 25],
    },
    {
      name: "Double Chart BG",
      type: "pie",
      radius: ["48%", "68%"],
      startAngle: 45,
      avoidLabelOverlap: false,
      colorBy: "series",
      itemStyle: {
        color: props.bgColor,
        borderColor: "#fff",
        borderWidth: 10,
      },
      label: { show: false },
      emphasis: { label: { show: false } },
      labelLine: { show: false },
      data: [25, 25, 25, 25],
    },
  ],
};

onMounted(() => {
  const chart = echarts.init(
    document.getElementById(<string>props.id) as HTMLDivElement
  );
  chart.setOption(options);

  window.addEventListener("resize", () => {
    chart.resize();
  });
});
</script>
