驾驶舱提测ui

src/views/databoard/components/GasChart.vue

@@ -1,22 +1,19 @@
-<!-- 
-    filename: GasChart.vue
-    author: liubin
-    date: 2023-12-12 10:53:49
-    description: 
--->
-
 <template>
-	<div class="gas-chart"></div>
+	<div>
+		<NotMsg v-show="notMsg"/>
+		<div id='gasChart' class="gas-chart" style="width:600px;height:200px;" v-show='!notMsg'></div>
+	</div>
 </template>
 
 <script>
 import * as echarts from 'echarts';
 import resize from './../mixins/resize'
+import NotMsg from './../components/NotMsg'
 
 export default {
 	name: 'GasChart',
 	mixins: [resize],
-	components: {},
+	components:{ NotMsg },
 	props: {
 		chartType: '', // 能源类型
 		chartTime: ''
@@ -33,7 +30,8 @@ export default {
 			'#2aa1ff',
 		];
 		return {
-			chart: null
+			chart: null,
+			notMsg:false
 		};
 	},
 	computed: {
@@ -143,6 +141,12 @@ export default {
 					}
 				xData = this.getXdata()
 			}
+			if (yData.length === 0) {
+         this.notMsg = true
+         return
+      } else {
+        this.notMsg = false
+      }
 			if (yData.length == 0) {
 				seriesData = []
 			}else {
@@ -175,7 +179,7 @@ export default {
       ) {
         this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
       }
-			this.chart = echarts.init(this.$el);
+			this.chart = echarts.init(document.getElementById('gasChart'));
 			var option = {
 				color: colors,
 				grid: { top: 32, right: 12, bottom: 20, left: 60 },
@@ -195,7 +199,7 @@ export default {
 					},
 				},
 				yAxis: {
-					name: '单位m³/h',
+					name: this.chartType === '电耗能'?'单位kwh':'单位Nm³',
 					nameTextStyle: {
 						color: '#fff',
 						fontSize: 10,