驾驶舱提测ui

src/views/databoard/components/ISRAChart.vue

@@ -1,56 +1,28 @@
 <template>
-	<div class="isra-chart"></div>
+	<div>
+		<NotMsg v-show="notMsg"/>
+		<div id="israChart" class="isra-chart" style="width:600px;height:390px;" 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: 'ISRAChart',
 	mixins: [resize],
-	components: {},
+	components:{ NotMsg },
 	props: {},
 	data() {
 		return {
 			chart: null,
+			notMsg:true,
 			colors:['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
-			chartData: [],
-			option: {
-				tooltip: {
-					trigger: 'item',
-				},
-				legend: {
-					bottom: '3%',
-					left: 'center',
-					icon: 'circle',
-					textStyle: {
-						color: '#fff'
-					}
-				},
-				title: {
-					text: 0,
-					subtext: '总数',
-					top: '43%',
-					left: '49%',
-					textAlign: 'center',
-					textStyle: {
-						fontSize: 32,
-						lineHeight: 16,
-						color: '#fff',
-					},
-					subtextStyle: {
-						fontSize: 16,
-						color: '#fff00',
-					},
-				},
-				series: []
-			},
+			chartData: []
 		};
 	},
-	mounted() {
-		this.initChart();
-	},
 	activated() {
 	},
 	computed: {
@@ -61,23 +33,33 @@ export default {
 	watch: {
 		israChartMsg: {
 			handler(newVal, oldVal) {
-				this.chartData = newVal
+				this.chartData = newVal || []
 				this.updateChart()
 			}
 		}
 	},
 	methods: {
-		initChart() {
-			this.chart = echarts.init(this.$el);
-			this.chart.setOption(this.option);
-		},
 		updateChart() {
 			console.log('update')
 			let num = 0
 			this.chartData && this.chartData.length > 0 && this.chartData.map(i => {
 				num+=i.num
 			})
-			this.chart.setOption({
+			if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose()
+      }
+			if (this.chartData && this.chartData.length > 0) {
+         this.notMsg = false
+      } else {
+        this.notMsg = true
+				return
+      }
+			this.chart = echarts.init(document.getElementById('israChart'));
+			var option = {
 				title:{
 					text: num,
 					subtext: '总数',
@@ -94,6 +76,14 @@ export default {
 						color: '#fff00',
 					},
 				},
+				legend: {
+					bottom: '3%',
+					left: 'center',
+					icon: 'circle',
+					textStyle: {
+						color: '#fff'
+					}
+				},
 				series:[{
 						name: 'ISRA缺陷检测',
 						type: 'pie',
@@ -126,8 +116,13 @@ export default {
 								]
 							}
 						}
-					}))}]
-			})
+					}))}],
+					tooltip: {
+						trigger: 'item',
+						className: "isra-chart-tooltip"
+					},
+			}
+			this.chart.setOption(option);
 		}
 	},
 };
@@ -139,3 +134,13 @@ export default {
 	height: 100%;
 }
 </style>
+<style>
+  .isra-chart-tooltip {
+    background: #0a2b4f77 !important;
+    border: none !important;
+    backdrop-filter: blur(12px);
+  }
+  .isra-chart-tooltip * {
+    color: #fff !important;
+  }
+</style>