<template lang="html">
  <div>
    <div class="label">2018年用气分布图</div>
    <div id="gasdistri" >
    </div>
  </div>
</template>

<script>
  import * as Util from '../../../Util'
  import co from 'co'
  import echarts from 'echarts'
  import { HttpResetClass } from 'vue-client'

  let getData = function * (self) {
    let load = new HttpResetClass()
    load.load('POST','rs/sql/chargeGas',
      {data: {startDate: self.startdate, endDate: self.enddate}},
      {resolveMsg: null, rejectMsg: null})
      .then((res) => {
        self.texttile = '售气收费'
       let arrparams = []
        for (var i = 0; i < res.data.length; i++) {
          arrparams[i] = res.data[i].name
        }
        console.log(arrparams,res.data)
        self.set(arrparams,res.data)
      })
  }
  export default {
   name:'gasdistri',
    data () {
      return {
        xc: '',
      }
    },
    methods: {
      set () {
        this.xc = echarts.init(document.getElementById('gasdistri'))

        let echartsdata=[
          {value:335, name:'商业用气'},
          {value:310, name:'民用用气'},
          {value:234, name:'公福用气'},
          {value:135, name:'工业用气'},
          {value:1048, name:'采暖用气'},
          {value:251, name:'福利事业'}
        ]
        var userdata=[
          {value:335, name:'商业', selected:false},
          {value:679, name:'民用'},
          {value:1548, name:'工业'}
        ]
        var scale=0.8
        this.xc.setOption(
          {
            title: {
              text: '',
              subtext: '',
              x: 'center'
            },
            tooltip: {
              trigger: 'item',
              extraCssText: 'width: 60%;height: 20%;',
            },
            legend: {
              orient: 'horizontal',
              icon: 'circle',
              x:'center',
              y: 'bottom',
              itemWidth: 20 * scale,
              itemHeight: 10 * scale,
              textStyle: {
                fontSize: 12 * scale,
                padding: [0, 0, 0, 4],
                color: '#ffffff'
              },
              data:['商业用气','民用用气','公福用气','工业用气','采暖用气','福利事业']
            },
            series: [
              {
                name:'售气量',
                type:'pie',
                selectedMode: 'single',
                color: ['#f7cb32', '#ef7c3d', '#3d7ce5'],
                radius: [0, '26%'],
                center: ['50%', '35%'],
                label: {
                  normal: {
                    position: 'inner'
                  }
                },
                labelLine: {
                  normal: {
                    show: false
                  }
                },
                data:userdata
              }, {
                name: 'Line 1',
                type: 'pie',
                animation: false,
                clockWise: false,
                radius: ['34%', '35%'],
                center: ['50%', '35%'],
                tooltip:{
                  show:false
                },
                itemStyle: {
                  normal: {
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    },
                  }
                },
                hoverAnimation: false,
                data: [{
                  value: 100,
                  name: '02',
                  itemStyle: {
                    normal: {
                      color: '#29b7ff',//未完成的圆环的颜色
                      label: {
                        show: false
                      },
                      labelLine: {
                        show: false
                      }
                    }
                  }
                }]
              },
              {
                name:'售气量',
                type:'pie',
                color: ['#e5e280', '#6e93e0', '#3bdda9','#6fd9d0','#c7e06e','#e68d8d'],
                label:{
                  show:false
                },
                radius: ['40%', '55%'],
                center: ['50%', '35%'],
                data:echartsdata
              }, {
                name: 'Line 2',
                type: 'pie',
                tooltip:{
                  show:false
                },
                animation: false,
                clockWise: false,
                radius: ['60%', '61%'],
                center: ['50%', '35%'],
                itemStyle: {
                  normal: {label: {show: false}, labelLine: {show: false},}
                },
                hoverAnimation: false,
                data: [{
                  value: 100,
                  name: '02',
                  itemStyle: {
                    normal: {color: '#29b7ff',label: {show: false},labelLine: {show: false}}
                  }
                }]
              }
            ]
          })
      },
      searchdata () {
        let getGen =getData(this)
        co(getGen)
      }
    },
    ready () {
      // this.searchdata()
      this.set()
    },
  }
</script>
<style scoped>
  .label {
    margin-left: 6%;
    font-size: 0.85em;
    color: #fff;
    width: 100%;
    height: 9%;
  }
  #gasdistri{
  height: 90%;
    width: 100%;
  }
</style>
