upload project source code

前端源码/uni-app/components/RadarChart.vue

@@ -0,0 +1,105 @@
+<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>
+