驾驶舱提测ui

src/views/databoard/components/NumRateChart.vue

@@ -1,15 +1,21 @@
 <template>
-  <div class="num-rate-chart"></div>
+  <div>
+    <NotMsg v-show="notMsg"/>
+    <div id="numRateChart" class="num-rate-chart" style="width:900px;height:370px;" 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: 'NumRateChart',
   mixins: [resize],
+  components:{ NotMsg },
   data() {
     return {
-      chart: null
+      chart: null,
+      notMsg:true
     }
   },
   computed: {
@@ -31,18 +37,16 @@ export default {
 		this.$el.addEventListener('resize', () => {
 			console.log('resziing.....');
 		});
-		this.updateChart()
+    this.updateChart()
 	},
   methods: {
     updateChart() {
-      if (
-        this.chart !== null &&
-        this.chart !== '' &&
-        this.chart !== undefined
-      ) {
-        this.chart.dispose()
+      if (this.productline && this.productline.length > 0) {
+        this.notMsg = false
+      } else {
+        this.notMsg = true
+        return
       }
-      this.chart = echarts.init(this.$el);
       let xData = []
       let outputNum = []
       let passRate = []
@@ -51,6 +55,14 @@ export default {
         outputNum.push(item.outputNum)
         passRate.push(item.passRate*100)
       })
+      if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose()
+      }
+      this.chart = echarts.init(document.getElementById('numRateChart'));
       var option = {
         grid: { top: 32, right: 60, bottom: 20, left: 60 },
         tooltip: {
@@ -61,7 +73,7 @@ export default {
           className: "num-rate-chart-tooltip"
         },
         legend: {
-          data: ['产线产量', '合格率'],
+          data: ['产线产量', '良品率'],
           textStyle: {
             color: "#DFF1FE",
             fontSize: 12,
@@ -91,6 +103,11 @@ export default {
           {
             type: 'value',
             name: '产量/片',
+            nameTextStyle: {
+              color: '#fff',
+              fontSize: 10,
+              align: 'right',
+            },
             axisLabel: {
               color: "#fff",
               fontSize: 12,
@@ -111,6 +128,11 @@ export default {
           {
             type: 'value',
             name: '良品率',
+            nameTextStyle: {
+              color: '#fff',
+              fontSize: 10,
+              align: 'LEFT',
+            },
             axisLabel: {
               color: "#fff",
               fontSize: 12,
@@ -148,7 +170,7 @@ export default {
             data: outputNum
           },
           {
-            name: '合格率',
+            name: '良品率',
             type: 'line',
             yAxisIndex: 1,
             tooltip: {