修改了水用量

src/views/report/queryWater/index.vue

@@ -44,6 +44,11 @@
         <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 +173,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 +193,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 +350,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) {
@@ -395,7 +424,7 @@ export default {
         color:  ['#61A5E8', '#9933FF','#FFB800'],
         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: '价格(元)'}],
+        yAxis: [{ type: 'value', name: '用量(吨)'}],
         series: [
           {
             name: '实际费用',
@@ -445,7 +474,7 @@ export default {
         color: ['#61A5E8'],
         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: '价格(元)'}],
+        yAxis: [{ type: 'value', name: '用量(吨)'}],
         series: [
           {
             name: '实际费用',
@@ -481,10 +510,10 @@ export default {
           left: 40,
           bottom:0
         },
-        color: ['#2dc0e8', '#769cfc', '#FFB800'],
+        color: ['#2dc0e8', '#7ECF51', '#FFB800'],
         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: 'm³'}],
+        yAxis: [{ type: 'value', name: '用量(吨)'}],
         series: (function() {
           var serie = []
           if(chart_data.data1 !== null){
@@ -528,7 +557,7 @@ export default {
         color: ['#2dc0e8', '#769cfc'],
         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:'{value} 万'}}],
+        yAxis: [{ type: 'value',name: '用量(吨)', axisLabel: { formatter:'{value} 万'}}],
         series: [
           {
             name: '实际',
@@ -572,7 +601,7 @@ export default {
         color: ['#2dc0e8', '#769cfc', '#FFB800'],
         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: '水量(m³)'}],
+        yAxis: [{ type: 'value',name: '水量(吨)'}],
         series: [
           {
             name: '去年同期用量',
@@ -624,7 +653,7 @@ export default {
         color: ['#2dc0e8', '#769cfc', '#FFB800'],
         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: '水量(m³)'}],
+        yAxis: [{ type: 'value', name: '水量(吨)'}],
         series: (function() {
           var serie = []
           if(chart_data.data1 !== null){
@@ -649,7 +678,41 @@ export default {
         console.log(param)
       })
     },
-
+    // 水费完成率
+    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>