修改了电量分析

src/views/report/queryElec/index.vue

@@ -44,6 +44,12 @@
         <div id="chart3" style="width: 100%;height:400px;" />
       </el-col>
     </el-row>
+
+    <el-row style="position: relative;">
+      <el-col :span="24">
+        <div id="chart8" style="width: 100%;height:400px;" />
+      </el-col>
+    </el-row>
     <el-row style="position: relative;">
       <el-col :span="12">
         <div style="height: 50px;">
@@ -168,6 +174,15 @@ export default {
           pastureName: Cookies.get('pasturename')
         }
       },
+      isChart8: [],
+      chart_data8: {},
+      getChart8Parm: {
+        name: 'getpSumNowWater',
+        parammaps: {
+          receiveTime: new Date().getFullYear(),
+          pastureName: Cookies.get('pasturename')
+        }
+      },
     }
   },
   created() {
@@ -179,6 +194,7 @@ export default {
     this.getChart5()
     this.getChart6()
     this.getChart7()
+    this.getChart8()
     const that = this
     GetDataByName({ 'name': 'getUserPCButtons', 'parammaps': { 'jwt_username': Cookies.get('name') }}).then(response => {
       that.buttons = response.data.list
@@ -335,6 +351,20 @@ export default {
         this.roadChart7(this.chart_data7)
       })
     },
+    // 水费完成率
+    getChart8() {
+      GetReportform(this.getChart8Parm).then(response => {
+        console.log('图8', response)
+        // this.chart_data7 = response.data.chart_data
+        this.chart_data8 = {
+          data1:[10,20,30,40,50],
+          data2:[20,30,40,50,60],
+          data3:[20,30,40,50,60],
+          xdata:["马鞍山牧场", "汶上牧场", "商河牧场", "合肥牧场", "蚌埠牧场"]
+        }
+        this.roadChart8(this.chart_data8)
+      })
+    },
     // 各牧场年度用水量对比
     roadChart1(chart_data) {
       if (this.chart1 != null) {
@@ -645,6 +675,41 @@ export default {
       })
     },
 
+    // 水费完成率
+    roadChart8(chart_data) {
+      if (this.chart8 != null) {
+        this.chart8.dispose()
+      }
+      this.chart8 = echarts.init(document.getElementById('chart8'))
+      var option = {
+        title: { text: '电费完成率',left:'center', textStyle: { color: '#769cfc' }},
+        tooltip: { trigger: 'axis' },
+        legend: {
+          data: ['实际费用', '预算','完成率'],
+          right: 40
+        },
+        color: ['#61A5E8', '#7ECF51','#FFFF00'],
+        grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
+        xAxis: [{ type: 'category',  name: '牧场',data: chart_data.xdata, axisLabel: { interval: 0, rotate: 30 }}],
+        yAxis: [
+          { type: 'value', name: '价格(元)', axisLabel: { formatter: '' }},
+          { type: 'value', name: '', axisLabel: { formatter: '{value}%' }}
+        ],
+        series: [
+          { name: '实际费用', type: 'bar', data: chart_data.data1, barMaxWidth:20, emphasis: { label: { show: true, position: 'inside' }} },
+          { name: '预算', type: 'bar', barMaxWidth:20, data: chart_data.data2, emphasis: { label: { show: true, position: 'inside' }} },
+          { name: '完成率', type: 'line',yAxisIndex: 1, data: chart_data.data3, emphasis: { label: { show: true, position: 'inside' }} }
+        ]
+      }
+      this.chart8.setOption(option)
+      window.onresize = function() {
+        this.chart8.resize()
+      }
+      var that = this
+      this.chart8.on('click', function(param, i) {
+        console.log(param)
+      })
+    },
   }
 }
 </script>