<template>
  <!-- ECharts容器：设置方形尺寸 -->
  <div class="double-circle-container" ref="chartRef"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";

// 可传入的进度参数
const props = defineProps({
  percent: {
    type: Number,
    default: 33.8, // 默认进度33.8%
  },
});

const chartRef = ref(null);
let myChart = null;

// 初始化图表
const initChart = () => {
  myChart = echarts.init(chartRef.value);

  const option = {
    // // 背景色：匹配截图的深蓝色网格背景
    // backgroundColor: "transparent",
    // 中心百分比文字
    title: {
      text: `${props.percent}%`,
      left: "center",
      top: "center",
      textStyle: {
        fontSize: 18,
        fontWeight: "bold",
        color: "#3b82f6", // 蓝色文字（匹配截图）
        lineHeight: 1.2,
      },
    },
    series: [
      // 1. 外层圆环边框（浅色蓝环）
      {
        type: "pie",
        radius: ["85%", "70%"], // 外层边框的粗细
        startAngle: 0,
        itemStyle: {
          // color: "#87ceeb", // 浅蓝色实线边框
          borderColor: "#8692fc",
          borderWidth: 1,
        },
        label: { show: false },
        labelLine: { show: false },
        data: [
          {
            value: 33.8,
            name: "绿色扇区",
            itemStyle: { color: "#00FF00", fontSize: 12 },
          }, // 绿色扇区
          {
            value: 66.2,
            name: "背景扇区",
            itemStyle: { color: "transparent" },
          },
        ],
      },
    ],
  };

  myChart.setOption(option);
};

// 监听窗口resize实现自适应
const handleResize = () => {
  myChart?.resize();
};

onMounted(() => {
  initChart();
  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
  myChart?.dispose();
});
</script>

<style scoped lang="less">
.double-circle-container {
  .vw(width, 120);
  .vh(height,120);
}
</style>
