<template>
  <div id="ammeterStat">
    <cmpTitle title="近30天用电量情况" position="absolute"></cmpTitle>
        <Echart
          :options="options"
          id="cmp2"
          width="100%"
          height="100%"
        ></Echart>
  </div>
</template>

<script>
  import cmpTitle from "../common/cmpTitle.vue"
  import Echart from '../common/echart'
  import {getElectricMeterStatic} from "@/api/grid/index"
  export default{
    components:{
      Echart,
      cmpTitle
    },
    data(){
      return{
        options:{},
        data:{
          date:[],
          values:[]
        }
      }
    },
    mounted() {
      var _this = this;
      this.agencies = JSON.parse(localStorage.getItem('agencies1'))
      if(this.agencies){
        let id = this.agencies.id;
        getElectricMeterStatic(id).then((res)=>{
          let data = res.data.data;
          _this.data.date = data.dates
          _this.data.values = data.values
          _this.initOptions()
        })
      }
    },
    methods:{
      initOptions(){
        this.options = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                trigger: 'axis',
                formatter:function(params)
                {
                   var relVal = params[0].name;
                   for (var i = 0, l = params.length; i < l; i++) {
                     let unit = '度'
                     if(i==1){
                       unit = '吨'
                     }
                        relVal += '<br/>' + params[i].seriesName + ' : ' + params[i].value+ unit;
                    }
                   return relVal;
                }
            },
            grid: {
              top:'25%',
              bottom:'30%'
            },
            legend: {
                data: ['电表用量'],
                textStyle:{//图例文字的样式
                    color:'#fff'
                },
                top:0,
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {show: false},
                    data: this.data.date,
                    axisLabel: {
                        textStyle: {
                            color: '#ffffff',
                            fontSize:9
                        },
                        rotate:70
                    },
                    splitLine:{
                      show:false,
                       lineStyle:{
                        color:'#3ca8c7',
                        width: 1
                       }
                    }
                }
            ],
            yAxis: [
                {
                    name:'千瓦时',
                    splitNumber:3,
                    minInterval:1,
                    type: 'value',
                    axisLabel: {
                        textStyle: {
                            color: '#ffffff'
                        }
                    },
                    splitLine:{
                      show:true,
                       lineStyle:{
                        color:'#3ca8c7',
                        width: 1
                       }
                    }
                }
            ],
            series: [
                {
                    name: '电表用量',
                    type: 'bar',
                    barGap: 0,
                    data: this.data.values,
                    barWidth:8,
                    itemStyle: {
                        normal: {
                        	barBorderRadius: [6,6,0,0],
                            color: {
                              type: 'linear',
                              x: 0,
                              y: 0,
                              x2: 0,
                              y2: 1,
                              colorStops: [{
                                  offset: 0, color: '#54cbca' // 0% 处的颜色
                              }, {
                                  offset: 1, color: '#36e6e4' // 100% 处的颜色
                              }],
                              globalCoord: true // 缺省为 false
                          },
                        }
                    }
                },
                // {
                //     name: '水表用量',
                //     type: 'bar',
                //     data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                //      barWidth :5,
                //     itemStyle: {
                //         normal: {
                //         	barBorderRadius: 6,
                //             color: {
                //               type: 'linear',
                //               x: 0,
                //               y: 0,
                //               x2: 0,
                //               y2: 1,
                //               colorStops: [{
                //                   offset: 0, color: '#0474d0' // 0% 处的颜色
                //               }, {
                //                   offset: 1, color: '#2b97ef' // 100% 处的颜色
                //               }],
                //               globalCoord: true // 缺省为 false
                //           },
                //         }
                //     }
                // },
            ]
        }

      },
    }
  }
</script>

<style lang="less" scoped>
  #ammeterStat{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;

  }
</style>
