用料统计增加统计图

src/views/zdsz/enginee/material/material_statistics/index.vue

@@ -151,7 +151,6 @@
             <el-table
                 class="materialStatisticsTable"
                 :data="tableData"
-                show-summary
                 style="width: 100%">
               <el-table-column
                 prop="areaName"
@@ -192,7 +191,7 @@
             </el-table>
 
         </div>
-
+      <div id="zhuzhuangtu" style="width: 100%;height: 75vh"></div>
     </div>
 </template>
 
@@ -209,6 +208,7 @@ import {
 } from '@/api/zdsz/overhead'
 import {getUnits} from "@/api/zdsz/unit";
 import {getDicts} from "@/api/system/dict/data";
+import * as echarts from "echarts";
 export default {
 
     name:'MaterialStatistics',
@@ -352,7 +352,65 @@ export default {
       {
 
         materialStatistics(this.queryParams).then(res=>{
-          this.tableData=res.data
+          this.tableData=res.data;
+          let xData = [];
+          let seriesData = [];
+          let seriesMarkPointData = [];
+          for (let item in res.data) {
+            xData.push(res.data[item].realityQuality+'-'+res.data[item].realitySpecifications);
+            seriesData.push(res.data[item].realitySize);
+            seriesMarkPointData.push({ value: res.data[item].realitySize, xAxis: parseInt(item), yAxis: res.data[item].realitySize })
+          }
+          console.log(xData);
+          console.log(seriesData);
+          console.log(seriesMarkPointData);
+          let option = {
+            tooltip: {
+              trigger: 'axis',
+              axisPointer: {
+                type: 'shadow'
+              }
+            },
+            grid: {
+              left: '3%',
+              right: '4%',
+              bottom: '6%',
+              containLabel: true
+            },
+            xAxis: [
+              {
+                type: 'category',
+                data: xData,
+                axisLabel: {
+                  rotate: 45 // 文字倾斜 45 度
+                }
+              }
+            ],
+            yAxis: [
+              {
+                type: 'value'
+              }
+            ],
+            dataZoom: [
+              {
+                type: 'slider'
+              }
+            ],
+            series: [
+              {
+                type: 'bar',
+                markPoint:{
+                  data: seriesMarkPointData
+                },
+                data:seriesData
+              }
+            ]
+          };
+
+          var myChart = echarts.init(document.getElementById('zhuzhuangtu'));
+          if(option){
+            myChart.setOption(option);
+          }
         })
       },
       getAreaCompletionInformationList()