新增图表

src/views/fmegl/fmekpigl/tu/index.vue

 <template>
-  <div class="min_full">
+  <div class="min_full"  >
     <div class="search">
       <!-- <SearchButton :app='app'></SearchButton> -->
       <el-row :gutter="20" class="search-row-1">
@@ -75,8 +75,22 @@
         </div>
       </div>
 
+  <div class="bbItem">
+    <div class="full">
+      <div class="bbItemtTitle">
+        {{`${queryParams.year}年度QSR-一回路-SG二次测`}}
 
 
+      </div>
+      <div class="bbItemtBody">
+        <div    ref="qs" class="full">
+
+        </div>
+      </div>
+
+    </div>
+  </div>
+
     </div>
 
 
@@ -104,6 +118,7 @@
         this.ejzwttj = this.$echarts.init(this.$refs.jzwttj)
         this.ezykpi = this.$echarts.init(this.$refs.zykpi)
         this.efmetj = this.$echarts.init(this.$refs.fmetj)
+        this.eqs = this.$echarts.init(this.$refs.qs)
         /* 生成图表*/
         this.initAll()
         this.timer = setInterval(() => {
@@ -120,9 +135,89 @@
           this.initEzykpi(records)
           this.initEjzwttj(records)
           this.initEfmetj(records)
+          this.initEqs(records)
         })
 
       },
+      initEqs(records) {
+        let xData = ['1号机组', '2号机组', '3号机组', '4号机组', '5号机组', '6号机组', '电厂']
+        let xMap = {'1号机组':'1','2号机组':'2','3号机组':'3','4号机组':'4','5号机组':'5','6号机组':'6','电厂':'DC'}
+
+        /* 根据XDate 找数据*/
+        let qsrList = xData.map(key => {
+          let value = 0
+          records.forEach(item => {
+            if (item.jzmc ==xMap[key] ) {
+              value = item.qsr
+            }
+          })
+          return value
+        })
+
+        let ywlList = xData.map(key => {
+          let value = 0
+          records.forEach(item => {
+            if (item.jzmc == xMap[key]) {
+              value = item.ywl
+            }
+          })
+          return value
+        })
+        let sgeccList = xData.map(key => {
+          let value = 0
+          records.forEach(item => {
+            if (item.jzmc == xMap[key]) {
+              value = item.sgecc
+            }
+          })
+          return value
+        })
+
+
+        let option = {
+          tooltip: {
+            trigger: 'axis', // 触发类型为坐标轴触发
+            axisPointer: {
+              type: 'line' // 指示器类型为线
+            }
+          },
+          legend: {
+            data: ['年度KPI', '及格KPI', '优秀KPI']
+          },
+          color: ['#409EFF', '#FF7474', '#86ff65'],
+          grid: {
+            top: '10%',
+            left: '3%',
+            right: '6%',
+            bottom: '10%',
+            containLabel: true,
+          },
+          xAxis: {
+            type: 'category',
+            data: xData
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [{
+              name: 'QSR',
+              type: 'bar',
+              data: qsrList,
+            },
+            {
+              name: '一回路',
+              type: 'bar',
+              data: ywlList,
+            },
+            {
+              name: 'SG二次测',
+              type: 'bar',
+              data: sgeccList,
+            },
+          ]
+        };
+        this.eqs.setOption(option);
+      },
       /* 年度机组kpi*/
       initEdckpi(records) {
         let xData = ['1号机组', '2号机组', '3号机组', '4号机组', '5号机组', '6号机组', '电厂']
@@ -537,7 +632,7 @@
     height: calc(100% - 50px);
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: repeat(2, 1fr);
+    grid-template-rows: repeat(3, 1fr);
     // background-color: #eee;
 
     .bbItem {