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

<script>

import {HttpResetClass } from 'vue-client'

export default {
  name: 'sellBarEcharts',
  data() {
    return {
      xc: '',
      legend: [],
      sdata: [],
      yeartotal: 0,
      resdata: []
    }
  },
  ready(){
    this.setBar()
  },
  methods:{
    async setBar(){
      let http = new HttpResetClass()
      await  http.load('post','api/af-revenue/sql/getDapingSalesVolume',{data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
        console.log('res=======================')
        console.log(res.data)
        this.resdata= res.data

        // this.year =  (res.data[0].gas_year/10000).toFixed(2)
        // this.day =  (res.data[0].gas_day/10000).toFixed(2)
      })
      console.log(' this.resdata', this.resdata)
      for (let i = 0; i < this.resdata.length; i++) {
        let data = {
          name: this.resdata[i].sjmc,
          value: this.resdata[i].sbsjfl
        }
        if(this.resdata[i].sjmc !== '年销气量'){
          this.sdata.push(data)
          this.legend.push(this.resdata[i].sjmc)
        }
       else{
          this.yeartotal = Number(this.resdata[i].sbsjfl)
        }
      }
      // this.yeartotal = (this.yeartotal / 10000).toFixed(2)
      console.log('数据出来了')
      console.log(this.legend)
      console.log(this.sdata)
      this.xc = this.$echarts.init(document.getElementById('sellGAS'))
      let option = {
        title: [{
          text: "年总销气量",
          top: 6,
          left: 110,
          textStyle: {
            fontSize: 12,
            color: '#fff'
          },

        }, {
          text: this.yeartotal + "万方",
          left: 210,
          textStyle: {
            fontSize: 22,
            color: '#FEE449'
          }
        }],
        tooltip: {
          trigger: 'item',
          extraCssText: 'width:auto;height:auto;'
        },
        grid: {
          left: '30%',
          right: '10%',
          top: '0',
          bottom: '0'
        },
        legend: {
          left: "20%",
          width: "70%",
          textStyle: {
            "color": "#fff",
            "fontSize": 10
          },
          icon: "circle",
          right: "0",
          bottom: "0",
          itemHeight: 14,
          padding: [220, 0, 20, 20],
          itemGap: 13,
          data: this.legend
        },
        series: [{
          type: "pie",
          width: '45%',
          center: ["100%", "40%"],
          radius: ["40%", "53%"],
          color:['#D9C701','#00BAFF','#F38051','#E7536B','#8ADAF4','#01B3B3','#F39800','#16B05C','#9A7EFA'],
          startAngle: 135,
          labelLine: {
            show:true,
            length: 5,
            length2: 10
          },

          label: {
            color:"rgba(255,255,255,.45)",
            fontSize: 12,
            show:true,
            position:'outside',
            normal: {
              formatter: function (params){
                return  params.name +'\n '+ (params.value/10000).toFixed(2)+'万方'

              },
            },


          },
          // labelLine: {
          //   normal: {
          //     length: 10
          //   }
          // },
          // label: {
          //   normal: {
          //     formatter: "{b|{b}:}{c}NM3",
          //     backgroundColor: "rgba(255, 147, 38, 0)",
          //     borderColor: "transparent",
          //     borderRadius: 4,
          //     rich: {
          //       a: {
          //         "color": "#999",
          //         "lineHeight": 14,
          //         "align": "center"
          //       },
          //       hr: {
          //         "borderColor": "#aaa",
          //         "width": "100%",
          //         "borderWidth": 1,
          //         "height": 0
          //       },
          //       b: {
          //         "color": "#b3e5ff",
          //         "fontSize": 14,
          //         "lineHeight": 33
          //       },
          //       c: {
          //         "fontSize": 14,
          //         "color": "#eee"
          //       },
          //       per: {
          //         "color": "#FDF44E",
          //         "fontSize": 14,
          //         "padding": [5, 8],
          //         "borderRadius": 2
          //       }
          //     },
          //     textStyle: {
          //       "color": "#fff",
          //       "fontSize": 14
          //     }
          //   }
          // },
          // emphasis: {
          //   label: {
          //     "show": false,
          //     "formatter": "{b}:{c} NM3",
          //     "backgroundColor": "rgba(255, 147, 38, 0)",
          //     "borderColor": "transparent",
          //     "borderRadius": 4,
          //     "rich": {
          //       "a": {
          //         "color": "#668fcd",
          //         "lineHeight": 16,
          //         "align": "center"
          //       },
          //       "hr": {
          //         "borderColor": "#668fcd",
          //         "width": "100%",
          //         "borderWidth": 1,
          //         "height": 0
          //       },
          //       "b": {
          //         "color": "#FDF44E",
          //         "fontSize": 16,
          //         "lineHeight": 33
          //       },
          //       "c": {
          //         "fontSize": 16,
          //         "color": "#FDF44E"
          //       },
          //       "per": {
          //         "color": "#FDF44E",
          //         "fontSize": 14,
          //         "padding": [5, 6],
          //         "borderRadius": 2
          //       }
          //     }
          //   }
          // },
          data: this.sdata
        },
        ]
      }
      this.xc.setOption(option)
      console.log('aaaaaaaaa')
      console.log('执行了~~~~~~~~~~~~~~~')
    }
  },

}
</script>

<style scoped>

</style>
