<template>
  <view class="radar-chart">
    <!-- 使用普通容器 + SVG 渲染，避免 getContext 报错 -->
    <view ref="chartRef" class="radar-chart-inner"></view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
// 通过 index.html 全局引入 echarts，运行时从 window 上获取
// eslint-disable-next-line @typescript-eslint/no-explicit-any
declare const window: any;

const chartRef = ref<HTMLElement | null>(null);
let chart: any = null;

onMounted(() => {
  const el = chartRef.value;
  if (!el || !window || !window.echarts) return;

  const echarts = window.echarts;
  // 使用 SVG 渲染器，避免对 canvas.getContext 的依赖
  chart = echarts.init(el, undefined, { renderer: 'svg' });

  const option: any = {
    radar: {
      indicator: [
        { name: '事业', max: 100 },
        { name: '财运', max: 100 },
        { name: '健康', max: 100 },
        { name: '家庭', max: 100 },
        { name: '社交', max: 100 },
        { name: '智慧', max: 100 }
      ],
      splitNumber: 4,
      shape: 'polygon',
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,0.12)'
        }
      },
      splitArea: {
        areaStyle: {
          color: ['rgba(255,255,255,0.02)', 'rgba(255,255,255,0.01)']
        }
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,0.12)'
        }
      },
      axisName: {
        color: '#cfd2dc',
        fontSize: 10
      }
    },
    series: [
      {
        type: 'radar',
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(255,193,7,0.9)' },
            { offset: 1, color: 'rgba(255,87,34,0.7)' }
          ])
        },
        lineStyle: {
          color: 'rgba(255,193,7,0.9)'
        },
        symbol: 'circle',
        symbolSize: 3,
        itemStyle: {
          color: '#ffc107'
        },
        data: [
          {
            value: [88, 92, 86, 80, 75, 90]
          }
        ]
      }
    ]
  };

  chart.setOption(option);
});

onUnmounted(() => {
  if (chart) {
    chart.dispose();
    chart = null;
  }
});
</script>

<style scoped>
.radar-chart {
  width: 100%;
  height: 260rpx;
}

.radar-chart-inner {
  width: 100%;
  height: 100%;
}
</style>

