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

<script>
  import {HttpResetClass} from 'vue-client'
  export default {
    title: '收费',
    data () {
      return{
        data:0,
        data1:0
      }
    },
    methods: {
      init () {
        var color = ['#2F8DF4', '#ef9861']
        var title = ['民用', '非民用']
        var option = {
                  title:{
        text:'年售气量类型占比',
        x:'10px',
        y:'10px',
       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'
            }},
          color: color,
          backgroundColor: '#ffffff00',
          legend: {

            orient: 'horizontal',
            left: 'center',
            bottom: '10',
            icon: 'circle',
            itemWidth: 10,
            itemHeight: 10,
            data: title,
            textStyle: {
              color: '#fff'
            }
          },
    //           title: {
    //     left: 'center',
    //     top: '50%',
    //     textStyle: {
    //         fontSize: 22,
    //         color: '#fff',
    //         fontWeight: 'normal'
    //     }
    // },
    // tooltip: {
    //     trigger: 'item',
    //     extraCssText: 'width:auto;height:30%;border:1px solid #015999;background:#032f53 '
    // },
    series: [{
        type: 'pie',
        roseType: 'radius',
        radius: ['25%', '40%'],

        data: [{
                value: this.data,
                name: '民用'
            }, {
                value: this.data1,
                name: '非民用'
            }
        ],
        label: {
             show:false,
            normal: {
                formatter: '{font|{b}}\n{hr|}\n{font|{d}%}',
                rich: {
                    font: {
                        fontSize: 10,
                        padding: [5, 0],
                        color: '#fff'
                    },
                    hr: {
                        height: 0,
                        borderWidth: 1,
                        width: '100%',
                        borderColor: '#fff'
                    }
                }
            },
        },
        labelLine: {
            lineStyle: {
                color: '#fff'
            }
        },
        emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0,0,0,0.5)'
            }
        }
    }]
        }
        let barchart = this.$echarts.init(document.getElementById('pie' +
          ''))
        console.log(option)
        barchart.setOption(option)
        let index = -1 // 高亮所在下标
        let dataLength = title.length   // 当前饼图有多少个扇形
        // 用定时器控制饼图高亮
        // this.mTime = setInterval(() => {
        //   // 清除之前的高亮
        //   barchart.dispatchAction({
        //     type: 'downplay',
        //     seriesIndex: 0,
        //     dataIndex: index
        //   })
        //   index = (index + 1) % dataLength
        //   // 当前下标高亮
        //   barchart.dispatchAction({
        //     type: 'highlight',
        //     seriesIndex: 0,
        //     dataIndex: index
        //   })
        //   if (index > dataLength) {
        //     index = 0
        //   }
        // }, 1000)
        // 鼠标划入
        // barchart.on('mouseover', () => {
        //   // 停止定时器，清除之前的高亮
        //   // clearInterval(this.mTime)
        //   this.echartsPie.dispatchAction({
        //     type: 'downplay',
        //     seriesIndex: 0,
        //     dataIndex: index
        //   })
        // })
      }
    },
    ready() {

        let http = new HttpResetClass()
      http.load('post', '/api/af-revenue/sql/getSellSumByType', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
        for(let i=0;i<res.data.length;i++){
          if(res.data[i].name==='民用'){
            this.data = res.data[i].value
          }
          if(res.data[i].name==='非民用'){
            this.data1 = res.data[i].value
          }
        }
              this.init()
      })

    },
    props: {}
  }
</script>
<style scoped>


</style>

