1

src/views/admin/repair/RepairStatistics.vue

@@ -62,20 +62,23 @@
         <div class='headView'>
           <div class='titleView'>工单完成情况</div>
           <div class='conditionView'>
-            <a-select default-value="week" style="width: 120px;margin-right: 10px">
+            <a-select default-value='week' style='width: 120px;margin-right: 10px'>
-              <a-select-option value="week">
+              <a-select-option value='week'>
                 按周
               </a-select-option>
-              <a-select-option value="month">
+              <a-select-option value='month'>
                 按月
               </a-select-option>
-              <a-select-option value="year">
+              <a-select-option value='year'>
                 按年
               </a-select-option>
             </a-select>
-            <a-date-picker placeholder="请选择时间" />
+            <a-date-picker placeholder='请选择时间' />
           </div>
         </div>
+        <div class='contentView'>
+          <div id='echart4' style='width: 550px; height: 550px'></div>
+        </div>
       </div>
       <div class='rightView'>
 
@@ -92,12 +95,13 @@ import * as echarts from 'echarts'
 export default {
   name: 'RepairStatistics',
   mounted() {
-    this.createEchart('echart1')
+    this.createEchartCake('echart1')
-    this.createEchart('echart2')
+    this.createEchartCake('echart2')
-    this.createEchart('echart3')
+    this.createEchartCake('echart3')
+    this.createEchartLine('echart4')
   },
   methods: {
-    createEchart(id) {
+    createEchartCake(id) {
       // 基于准备好的dom，初始化echarts实例
       let myChart = echarts.init(document.getElementById(id))
       // 指定图表的配置项和数据
@@ -147,6 +151,50 @@ export default {
       }
       // 使用刚指定的配置项和数据显示图表。
       myChart.setOption(option)
+    },
+    createEchartLine(id) {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById(id))
+      let option = {
+        title: {
+          text: 'World Population'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01]
+        },
+        yAxis: {
+          type: 'category',
+          data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
+        },
+        series: [
+          {
+            name: '2011',
+            type: 'bar',
+            data: [18203, 23489, 29034, 104970, 131744, 630230]
+          },
+          {
+            name: '2012',
+            type: 'bar',
+            data: [19325, 23438, 31000, 121594, 134141, 681807]
+          }
+        ]
+      }
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option)
     }
   }
 }
@@ -365,7 +413,7 @@ export default {
   margin-top: 10px;
 }
 
-.faultView .floorView{
+.faultView .floorView {
   background: white;
   border-radius: 10px;
   width: 600px;
@@ -388,10 +436,16 @@ export default {
 
 
 .faultView .floorView .headView .conditionView {
- display: flex;
+  display: flex;
   justify-content: center;
   align-items: center;
 }
 
+.faultView .floorView .contentView {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 700px;
+}
 
 </style>