<template>
  <div id="barchart" style="height: 100%;width:100%">
  </div>
</template>

<script>
  import {HttpResetClass} from 'vue-client'
  export default {
    title: '收费',
    data() {
      return{

        xData : ['1', '2', '3', '4', '5', '6'],
        yData : [12944, 72188, 55748, 36948, 28498, 27358]
        // yData2 : [25968, 13128, 47838, 23148, 23498, 26538],
      }
    },
    methods: {
      init() {
        var xData = this.xData,
          yData = this.yData,
          // yData2 = this.yData2,
          borderData = [],
          legend = ['总气量'],
          colorArr = [{
            start: 'rgba(242,153,97)',
            mid: 'rgba(242,153,97,0.7)',
            end: 'rgba(0, 0, 0,0.5)'
          },
            {
              end: 'rgba(0, 0, 0,0.5)',
              mid: 'rgba(111,217,208,0.7)',
              start: 'rgba(111,217,208)'
            },
            {
              color: '#00EAFF'
            }
          ]
        let normalColor = 'rgba(8,115,142)'
        let seriesData = []
        var borderHeight = 4
        xData.forEach(element => {
          borderData.push(borderHeight)
        });
        [yData].forEach((item, index) => {
          var obj1 = {}
          obj1 = {
            name: legend[index],
            type: 'bar',
            stack: legend[index],
            data: item,
            barWidth: '12px',
            itemStyle: {
              normal: {
                barBorderRadius: [30, 30, 0, 0],
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: colorArr[index].start
                  },
                    {
                      offset: 1,
                      color: colorArr[index].start
                    },
                    {
                      offset: 1,
                      color: colorArr[index].start
                    }
                  ],
                  globalCoord: false
                }
              }
            }
          }
          seriesData.push(obj1)
        })
        console.log(seriesData)
        // 更改柱状图位置
        let option = {
          title:{
            text:'总售气量分布',
            x:'center',
            y:'20',
            backgroundColor: '#002c45', //标题背景颜色，默认'rgba(0,0,0,0)'透明
            borderColor: '#01fee8', //标题边框颜色,默认'#ccc'
            borderWidth: 1, //标题边框线宽，单位px，默认为0（无边框）
            padding:5,
            textStyle: {
              fontSize: 12,
              fontWeight: 'normal',
              fontFamily: 'pFBold',
              lineHeight: 26,
              color: '#24d4d4',
              align: 'center'
            }},
          backgroundColor: '#ffffff00',
          grid: {
            left: '2%',
            top: '20%',
            right: '10%',
            bottom: '2%',
            containLabel: true
          },
          legend: {
            show: true,
            icon: 'rect',
            itemWidth: 15,
            itemHeight: 10,
            top: '10%',
            right:'10%',
            textStyle: {
              color: '#fff'
            },
            data: legend
          },
          tooltip: {
            position: function (pos, params, dom, rect, size) {
              let yPos = '20%'
              let xPos = 0
              if (pos[0] < size.viewSize[0] / 2) {
                xPos = pos[0] + 10
              } else {
                xPos = pos[0] - dom.offsetWidth - 10
              }
              return [xPos, yPos]
            },
            trigger: 'axis',
            extraCssText: 'width:auto;height:30%;border:1px solid #015999;background:#032f53 ',
            formatter: function (params) {
              var str = ''
              for (var i = 0; i < params.length; i++) {
                if (params[i].seriesName !== '') {
                  str += `<span>${params[i].seriesName}：</span><span style="color:gold">${params[i].value}</span> <br />`
                }
              }
              return str
            }
          },
          xAxis: [{
            name: '近6月',
            type: 'category',
            nameTextStyle: {
              color: '#95bad7',
              fontSize: 12
            },
            data: xData,
            interval: 0,
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              textStyle: {
                color: '#95bad7',
                fontSize: '1vw'
              }
            },
            axisLine: {
              lineStyle: {
                color: normalColor
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            }
          }],
          yAxis: [{
            name: '单位（万方）',
            type: 'value',
            nameTextStyle: {
              color: '#95bad7',
              fontSize: 12
            },
            splitNumber : 3,
            // 'min': 0,
            // 'max': 50,
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#95bad7',
                fontSize: '1vw'
              }
            },
            axisLine: {
              lineStyle: {
                color: normalColor
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
              lineStyle: {
                type: 'dashed',
                color: normalColor
              }
            }
          }],
          series: seriesData
        }
        console.log(option)
        let barchart = this.$echarts.init(document.getElementById('barchart'))
        console.log(option)
        barchart.setOption(option)
        var index = 0
        // var mTime = setInterval(function () {
        //   barchart.dispatchAction({
        //     type: 'showTip',
        //     seriesIndex: 0,
        //     dataIndex: index
        //   })
        //   index++
        //   if (index > xData.length) {
        //     index = 0
        //   }
        // }, 1000)
      }
    },
    ready() {
      let http = new HttpResetClass()
      http.load('post', '/api/af-revenue/sql/getSellSumByMonth', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
        this.yData = res.data.map((item)=> (item.sumgas/10000).toFixed(2))
        this.xData = res.data.map((item)=> item.time)
        // console.log(this.yData1)
        // this.yData1 =[]
        // this.yData2=[]
        // this.xData = []
        // for(let i=0;i<res.data.length;i++){
        //   if(res.data[i].natures==='民用'){
        //     this.xData.push(res.data[i].time)
        //     this.yData1.push((res.data[i].sumgas/10000).toFixed(2))
        //   }
        //   if(res.data[i].natures==='非民用'){
        //     this.yData2.push((res.data[i].sumgas/10000).toFixed(2))
        //   }
        //
        // }
        this.init()

      })
    },
    props: {}
  }
</script>
<style scoped>
  /*div{*/
  /*height: auto;*/
  /*}*/
</style>

