init

pc/src/views/site-detail.vue

@@ -443,6 +443,9 @@
 			function tabActive(item) {
 				if (state.tab != item.value) {
 					state.tab = item.value;
+					if(item.value=='base'){
+						initGauge();
+					}
 					if(item.value=='history'){
 						getList();
 					}
@@ -452,96 +455,100 @@
 				}
 			}
 			function initGauge(){
-				state.myChart = echarts.init(chart.value);
-				let option = {
-					series: [
-						{
-							type: 'gauge',
-							progress: {
-								show: true,
-								width: 18,
+				nextTick(()=>{
+					state.myChart = echarts.init(chart.value);
+					let option = {
+						series: [
+							{
+								type: 'gauge',
+								progress: {
+									show: true,
+									width: 18,
+									itemStyle:{
+										color:'#3396fb',
+									}
+								},
+								pointer: {
+									icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
+									width: 4,
+									length: '60%',
+									offsetCenter: [0, '8%']
+								},
 								itemStyle:{
-									color:'#3396fb',
-								}
-							},
-							pointer: {
-								icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
-								width: 4,
-								length: '60%',
-								offsetCenter: [0, '8%']
-							},
-							itemStyle:{
-								color:'#3396fb'
-							},
-							axisLine: {
-								lineStyle: {
-									width: 18
-								}
-							},
-							axisTick: {
-								show: true,
-								distance: 0,
-							},
-							splitLine: {
-								distance: 5,
-								length: 8,
-								lineStyle: {
-									width: 1,
-									color: '#999'
-								}
-							},
-							axisLabel: {
-								distance: 22,
-								color: '#999',
-								fontSize: 12
-							},
-							anchor: {
-								show: true,
-								showAbove: true,
-								size: 20,
-								itemStyle: {
-									borderWidth: 4,
-									borderColor: '#3396fb',
-									color:'#fff',
-								}
-							},
-							title: {
-								show: false
-							},
-							detail: {
-								valueAnimation: true,
-								fontSize: 24,
-								offsetCenter: [0, '70%'],
-								formatter(p){
-									return `{a|${p}m}\n{b|液位}`
+									color:'#3396fb'
 								},
-
-								rich: {
-									a: {
-										color: '#333',
-										lineHeight: 20,
-										fontSize:18
+								axisLine: {
+									lineStyle: {
+										width: 18
+									}
+								},
+								axisTick: {
+									show: true,
+									distance: 0,
+								},
+								splitLine: {
+									distance: 5,
+									length: 8,
+									lineStyle: {
+										width: 1,
+										color: '#999'
+									}
+								},
+								axisLabel: {
+									distance: 22,
+									color: '#999',
+									fontSize: 12
+								},
+								anchor: {
+									show: true,
+									showAbove: true,
+									size: 20,
+									itemStyle: {
+										borderWidth: 4,
+										borderColor: '#3396fb',
+										color:'#fff',
+									}
+								},
+								title: {
+									show: false
+								},
+								detail: {
+									valueAnimation: true,
+									fontSize: 24,
+									offsetCenter: [0, '70%'],
+									formatter(p){
+										return `{a|${p}m}\n{b|液位}`
 									},
-									b: {
-										color: '#666',
-										lineHeight: 20,
-										fontSize:14
+
+									rich: {
+										a: {
+											color: '#333',
+											lineHeight: 20,
+											fontSize:18
+										},
+										b: {
+											color: '#666',
+											lineHeight: 20,
+											fontSize:14
+										}
 									}
-								}
-							},
-							data: [
-								{
-									value: state.detail.yewei
-								}
-							],
-							radius:"95%",
-							startAngle:210,
-							endAngle:-30,
-							max:1
-						}
-					]
-				};
-				state.myChart.setOption(option);
+								},
+								data: [
+									{
+										value: state.detail.yewei
+									}
+								],
+								radius:"95%",
+								startAngle:210,
+								endAngle:-30,
+								max:1
+							}
+						]
+					};
+					state.myChart.clear();
+					state.myChart.setOption(option);
+					state.myChart.resize();
+				})
 			}
 			function getList(){
 
@@ -585,11 +592,9 @@
 						return {text:'...',color:'#f78131'};
 				}
 			}
-			onMounted(async () => {
+			onMounted(() => {
 				getDetail();
-				await nextTick(()=>{
-					initGauge();
-				})
+				initGauge();
 			});
 			return {
 				...toRefs(state),