<template>
  <div class="chart-container">
    <div class="chart-header">
      <h2>性能比分析</h2>
      <p>当前系统性能比为83%，高于同行水平（78%），表明系统运行状态良好。</p>
    </div>
    <div ref="chartRef" class="chart-content"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
// 引入 ECharts 核心模块
import * as echarts from 'echarts';
import 'echarts-liquidfill'
// 接收从父组件传入的数据
const props = defineProps({
  duibiPieData: {
    type: Number,
    default: () => ({
      num:0
    })
  }
});

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

onMounted(() => {
  // 组件挂载后初始化图表
  initChart();
});

const initChart = () => {
  // 获取 DOM 容器
  const chartDom = chartRef.value;
  // 初始化 ECharts 实例
  myChart = echarts.init(chartDom);

  // 使用传入的数据，如果不存在则使用默认数据
  const { num } = props.duibiPieData;

  // 配置图表参数
  const option = {
    title: {
      show: true,
      text: '性能比',
      x: '50%',
      y: '60%',
      z: 10,
      textAlign: 'center',
      textStyle: {
        color: '#ffffff',
        fontSize: 16,
        fontWeight: 500
      },
    },
    series: [
      {
        type: "liquidFill",
        z: 2,
        radius: "85%",
        center: ["50%", "50%"],
        data: [num/100],
        label: {
          fontSize: 30, // 设置数据字体大小
          color: "#165DFF", // 设置数据字体颜色
        },
        backgroundStyle: {
          color: "#fff",
        },
        outline: {
          show: true,
          itemStyle: {
            borderWidth: 3, // 设置外边框的大小
            borderColor: "#165DFF",// 设置外边框的颜色
          },
          borderDistance: 0,
        },
        color: [
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: "rgba(22, 93, 255,0.8)", //下
              },
              {
                offset: 0,
                color: "rgba(22, 93, 255,0.2)",
              },
            ],
            globalCoord: false,
          },
        ],
      },
    ],
  };

  // 将配置项设置到图表实例
  myChart.setOption(option);
};

// 组件卸载时，销毁图表实例（避免内存泄漏）
onUnmounted(() => {
  if (myChart) {
    myChart.dispose();
  }
});
</script>
<style scoped lang="scss">
.chart-container {
  width: 100%;
  height: 100%;
  padding: 0 16px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 8px;
}

.chart-header {
  margin-bottom: 16px;
}

.chart-header h2 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.chart-header p {
  font-size: 12px;
  color: #666;
  margin: 0;
}

.chart-content {
  width: 100%;
  height: calc(100% - 80px);
  min-height: 220px;
}

@media (max-width: 768px) {
  .chart-container {
    padding: 12px;
  }

  .chart-content {
    height: calc(100% - 70px);
    min-height: 280px;
  }
}

@media (max-width: 480px) {
  .chart-container {
    padding: 10px;
  }

  .chart-header h2 {
    font-size: 16px;
  }

  .chart-header p {
    font-size: 11px;
  }

  .chart-content {
    height: calc(100% - 65px);
    min-height: 250px;
  }
}
</style>