<template lang="html">
  <div id="charts">
    <div id="pp" :style="{width:'100%',height:'100%'}"></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/sellinggasvalue',
  {data: {startDate: self.startdate, endDate: self.enddate,key:'f_gasproperties'}},
  {resolveMsg: null, rejectMsg: null})
  .then((res) => {
    let arrparams = []
    let gasdata = []
    for (var i = 0; i < res.data.length; i++) {
        let item = {}
        arrparams[i] = res.data[i].name
        item.name = res.data[i].name
        item.value = res.data[i].gas_value
        gasdata.push(item)
    }
    self.set(arrparams,gasdata)
  })
}
export default {
  props: {
    startdate: {
    type: String,
    default: Util.toStandardDateString()
  },
  enddate: {
    type: String,
    default: Util.toStandardDateString()
  }
},
 data () {
   return {
     xc: ''
   }
 },
 methods: {
   set (arrparams,gasdata) {
     this.xc = echarts.init(document.getElementById('pp'))
     this.xc.setOption({
       title: {
         text: '用气性质and单价气量分布比例图',
         subtext: '数据汇总',
         x: 'left'
       },
       tooltip: {
         trigger: 'item',
         formatter: '{a} <br/>{b}: {c}m³ ({d}%)'
       },
       legend: {
         x: 'left',
         y: 'bottom',
         data: arrparams
       },
    series : [
      {
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:gasdata,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
 })
},
   searchdata () {
     let getGen =getData(this)
     co(getGen)
   }
 },
 ready () {
   this.searchdata()
 },
 watch: {
   'startdate' (val) {
     this.searchdata()
   },
   'enddate' (val) {
     this.searchdata()
   }
 }

}
</script>
