mnc-echarts

pages/dncmnc/mnc/compose/echart3.vue

  <template>
   <div>
-    <div id="myChart03" style="width:865px;height:316px;top: 0px;"></div>
+    <div id="myChart03" style="width:895px;height:316px;top: 0px;"></div>
   </div>
 </template>
     <script>

pages/dncmnc/mnc/compose/echart4.vue

  <template>
   <div>
-    <div id="gauge01" style="width:200px;height:150px;top: 0px;"></div>
+    <div id="myChart04" style="width:100%;height:340px;margin:20px auto;top: 0px;"></div>
   </div>
 </template>
     <script>
@@ -17,141 +17,61 @@ export default {
     },
     loadEchart() {
       // 基于准备好的dom，初始化echarts实例
-      var gauge01 = this.$echarts.init(document.getElementById('gauge01'))
-      var score = 78;
-      var name = '名称';
+      var myChart04 = this.$echarts.init(document.getElementById('myChart04'))
+
       var option = {
-        
-          series: [
+        title: {
+            text: ''
+        },
+        legend: {
+            data: ['开机', '关机', '故障', '运行'],
+            right: 55,
+        },
+        tooltip: {
+            trigger: 'axis'
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        xAxis: {
+            data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', 
+            '14日', '15日', '16日', '17日', '18日']
+        },
+        yAxis: {
+            type: 'value'
+        },
+        series: [
             {
-              type: 'gauge',
-              min: 0,
-              max: 100,
-              radius: '80%',
-              startAngle: 180,
-              endAngle: 0,
-              axisLine: {
-                  show: false,
-                  lineStyle: {
-                      opacity: 0,
-                      width: 12
-                  }
-              },
-              splitLine: {
-                  show: false
-              },
-              pointer: {
-                  show: false
-              },
-              axisTick: {
-                splitNumber: 10,
-                length: 12,
-                lineStyle: {
-                    color: '#004fb0'
-                }
-              },
-              title: {
-                  show: true,
-                  fontSize: 16,
-                  color: '#5faeff',
-                  offsetCenter: [0, '-115%']
-              },
-              detail: {
-                  formatter: function (value) {
-                      return '{a|' + value + '} {b|分}'
-                  },
-                  offsetCenter: [0,-20],
-                  rich: {
-                      a: {
-                          fontSize: 32,
-                          color: '#15e198'
-                      },
-                      b: {
-                          fontSize: 14,
-                          color: '#15e198',
-                          padding: [0, 0, 5, 0]
-                      }
-                  }
-              },
-              data: [{value: [score], name: name}]
+                name: '开机',
+                type: 'bar',
+            barWidth: 8,
+                data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134]
             },
             {
-              name: 'score',
-              type: 'pie',
-              startAngle: 180,
-              hoverAnimation: false,
-              radius: [105, 115],
-              label: {
-                normal: {
-                  show: false
-                }
-              },
-              data: [
-                {
-                  value: 0.4,
-                  name: 0.4,
-                  itemStyle: {
-                    normal: {
-                      color: '#fff'
-                    }
-                  }
-                },
-                {
-                  value: 0.4,
-                  itemStyle: {
-                    normal: {
-                      color: 'transparent'
-                    }
-                  }
-                }
-              ]
+                name: '关机',
+                type: 'bar',
+            barWidth: 8,
+                data: [220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310]
             },
             {
-              name: 'score',
-              type: 'pie',
-              startAngle: 180,
-              hoverAnimation: false,
-              radius: [105, 115],
-              label: {
-                normal: {
-                  show: false
-                }
-              },
-              data: [
-                {
-                  value: [(score * 0.5 /100).toFixed(2)],
-                  name: [(score * 0.5 /100).toFixed(2)],
-                  itemStyle: {
-                    normal: {
-                      color: {
-                        type: 'linear',
-                        x: 0,
-                        y: 0,
-                        x2: 0,
-                        y2: 1,
-                        colorStops: [{
-                            offset: 0, color: '#15e198'
-                        }, {
-                            offset: 1, color: '#409eff'
-                        }]
-                      }
-                    }
-                  }
-                },
-                {
-                  value: [1- (score * 0.5 /100).toFixed(2)],
-                  itemStyle: {
-                    normal: {
-                      color: 'transparent'
-                    }
-                  }
-                }
-              ]
+                name: '故障', 
+                type: 'bar',
+            barWidth: 8,
+                data: [150, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190, 330, 410]
+            },
+            {
+                name: '运行',
+                type: 'bar',
+            barWidth: 8,
+                data: [320, 332, 301, 334, 390, 330, 320,320, 332, 301, 334, 390, 330, 320,320, 332, 301, 334, 390, 330, 320]
             }
-          ]
+        ]
       }
       // 绘制图表
-      gauge01.setOption(option)
+      myChart04.setOption(option)
     }
   },
   mounted() {

pages/dncmnc/mnc/mnc.less

@@ -42,24 +42,30 @@
                     border-radius: 3px;
                 }
             }
+            .set_masage02{
+                line-height: 35px;
+            }
         }
     }
 }
 #echarts{
     .set_echarts{
+        .echart3{
+            height: 800px;
+        }
         .tips{
             // padding: 20px;
             .tips_item{
                 background: #eff1f7;
                 margin: 20px;
-                line-height: 36px;
+                line-height: 38px;
                 padding: 0 20px;
                 .item_top{
                     border-bottom: 1px solid #b1b1b1;
                 }
                 .item_center{
                     text-align: center;
-                    line-height: 32px;
+                    // line-height: 32px;
                 }
                 .item_right{
                     float: right;

pages/dncmnc/mnc/monitoring.vue

@@ -80,7 +80,7 @@
                                     </div>
                                 </Col>
                                 <Col span="15">
-                                    <div class="set_masage">
+                                    <div class="set_masage set_masage02">
                                         <p>当前状态开始时间：</p>
                                         <p class="time_bg">11:45:05</p>
                                         <p>当前状态持续时间：</p>
@@ -102,13 +102,13 @@
                         <p class="set_top">加工状态实时信息</p>
                         <div class="set_echarts">
                             <Row>
-                                <Col span="16">
+                                <Col span="17">
                                     <div class="echart3">
                                         <Echart3 ></Echart3>
-                                        <Echart4 ></Echart4>
+                                        <Echart5 ></Echart5>
                                     </div>
                                 </Col>
-                                <Col span="8">
+                                <Col span="7">
                                     <div class="tips">
                                         <div class="tips_item">
                                             <Row class="item_top">
@@ -164,12 +164,12 @@
 <script>
 import Echart2 from './compose/echart2'
 import Echart3 from './compose/echart3'
-import Echart4 from './compose/echart4'
+import Echart5 from './compose/echart5'
 export default {
     components: {
         Echart2,
         Echart3,
-        Echart4,
+        Echart5,
     },
     data(){
         return{