驾驶舱提测ui

src/views/databoard/components/EnergeMonitoringChart.vue

@@ -1,15 +1,21 @@
 <template>
-  <div class="energe-monitoring-chart"></div>
+  <div>
+    <NotMsg v-show="notMsg"/>
+    <div id="energeMonitoringChart" class="energe-monitoring-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: 'EnergeMonitoringChart',
   mixins: [resize],
+  components:{ NotMsg },
   data() {
     return {
-      chart: null
+      chart: null,
+      notMsg:true
     }
   },
   computed: {
@@ -42,16 +48,22 @@ export default {
       ) {
         this.chart.dispose()
       }
-      this.chart = echarts.init(this.$el);
+      this.chart = echarts.init(document.getElementById('energeMonitoringChart'));
       let xData = []
       let yData = []
       this.energyMonitoring && this.energyMonitoring.length > 0 && this.energyMonitoring.map(item => {
         xData.push(item.lineName)
         yData.push(item.useQuantity)
       })
-      var option = option = {
+      if (yData.length === 0) {
+         this.notMsg = true
+         return
+      } else {
+        this.notMsg = false
+      }
+      var option = {
         // color: ['#FF8A40','#FFD160','#99D66C','#5B9BFF','#8167F6','#2760FF'],
-        grid: { top: 32, right: 12, bottom: 20, left: 60 },
+        grid: { top: 32, right: 12, bottom: 20, left: 90 },
         tooltip: {
           trigger: 'axis',
           axisPointer: {
@@ -91,11 +103,13 @@ export default {
         ],
         yAxis: [
           {
+            name: '单位kwh',
+            nameTextStyle: {
+              color: '#fff',
+              fontSize: 10,
+              align: 'right',
+            },
             type: 'value',
-            name: '单位',
-            // min: 0,
-            // max: 250,
-            // interval: 50,
             axisLabel: {
               color: "#fff",
               fontSize: 12,