106 lines
2.3 KiB
Vue
106 lines
2.3 KiB
Vue
<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>
|
||
|