🐛 修复神秘图表初始化时机不对导致的不显示的问题

A-Minos · May 9, 2024 · f4aa7cb · f4aa7cb
1 parent 6da0e91
commit f4aa7cb
Show file tree

Hide file tree

Showing 2 changed files with 262 additions and 244 deletions.
diff --git a/src/components/info-radar-chart.vue b/src/components/info-radar-chart.vue
@@ -4,6 +4,7 @@ import { RadarChart } from 'echarts/charts'
 import type { ComposeOption } from 'echarts/core'
 import { use } from 'echarts/core'
 import { SVGRenderer } from 'echarts/renderers'
+import { computed, onMounted, ref } from 'vue'
 import VChart from 'vue-echarts'
 
 use([RadarChart, SVGRenderer])
@@ -17,87 +18,97 @@ const props = defineProps<{
 	readonly ge: number
 }>()
 
-const option: ComposeOption<RadarSeriesOption> = {
-	animation: false,
-	radar: [
-		{
-			indicator: [
-				{ name: 'PPS' },
-				{ name: 'APP', nameRotate: 60 },
-				{ name: 'DSPS', nameRotate: -60 },
-				{ name: 'DSPP' },
-				{ name: 'CI', nameRotate: 60 },
-				{ name: 'GE', nameRotate: -60 }
-			],
-			center: ['50%', '50%'],
-			radius: '65%',
-			startAngle: 90,
-			splitNumber: 4,
-			shape: 'circle',
-			silent: true,
-			axisName: {
-				color: '#fafafa',
-				fontFamily: 'CabinetGrotesk-Variable',
-				fontSize: 15,
-				fontWeight: '800'
-			},
-			splitArea: {
-				show: false
-			},
-			axisLine: {
-				lineStyle: {
-					color: '#fafafa4d'
+type ChartOption = ComposeOption<RadarSeriesOption>
+
+const option = computed<ChartOption>(() => {
+	return {
+		animation: false,
+		radar: [
+			{
+				indicator: [
+					{ name: 'PPS' },
+					{ name: 'APP', nameRotate: 60 },
+					{ name: 'DSPS', nameRotate: -60 },
+					{ name: 'DSPP' },
+					{ name: 'CI', nameRotate: 60 },
+					{ name: 'GE', nameRotate: -60 }
+				],
+				center: ['50%', '50%'],
+				radius: '65%',
+				startAngle: 90,
+				splitNumber: 4,
+				shape: 'circle',
+				silent: true,
+				axisName: {
+					color: '#fafafa',
+					fontFamily: 'CabinetGrotesk-Variable',
+					fontSize: 15,
+					fontWeight: '800'
+				},
+				splitArea: {
+					show: false
+				},
+				axisLine: {
+					lineStyle: {
+						color: '#fafafa4d'
+					}
+				},
+				axisLabel: {
+					show: true,
+					rotate: 0,
+					margin: -1,
+					fontFamily: 'CabinetGrotesk-Variable',
+					fontSize: 7,
+					fontWeight: '800',
+					color: 'white'
+				},
+				splitLine: {
+					lineStyle: {
+						color: '#fafafa4d'
+					}
 				}
-			},
-			axisLabel: {
-				show: true,
-				rotate: 0,
-				margin: -1,
-				fontFamily: 'CabinetGrotesk-Variable',
-				fontSize: 7,
-				fontWeight: '800',
-				color: 'white'
-			},
-			splitLine: {
+			}
+		],
+		series: [
+			{
+				type: 'radar',
+				symbol: 'none',
+				label: {
+					show: true
+				},
+				emphasis: {
+					disabled: true
+				},
 				lineStyle: {
-					color: '#fafafa4d'
-				}
+					color: '#fafafa',
+					width: 2.5,
+					shadowBlur: 20,
+					shadowColor: '#fafafa'
+				},
+				areaStyle: {
+					color: '#fafafa73'
+				},
+				data: [
+					{
+						value: [props.pps, props.app, props.dsps, props.dspp, props.ci, props.ge].map(value => {
+							return Number(
+								Number(value).toFixed(2)
+							)
+						})
+					}
+				]
 			}
-		}
-	],
-	series: [
-		{
-			type: 'radar',
-			symbol: 'none',
-			label: {
-				show: true
-			},
-			emphasis: {
-				disabled: true
-			},
-			lineStyle: {
-				color: '#fafafa',
-				width: 2.5,
-				shadowBlur: 20,
-				shadowColor: '#fafafa'
-			},
-			areaStyle: {
-				color: '#fafafa73'
-			},
-			data: [
-				{
-					value: [props.pps, props.app, props.dsps, props.dspp, props.ci, props.ge].map(value => {
-						return Number(
-							Number(value).toFixed(2)
-						)
-					})
-				}
-			]
-		}
-	]
-}
+		]
+	}
+})
+
+const show = ref(false)
+
+onMounted(() => {
+	show.value = true
+})
 </script>
 
 <template>
-	<v-chart :option="option"/>
+	<v-chart v-if="show" :option="option"/>
 </template>