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

<script>
  import {HttpResetClass} from "vue-client";

  export default {
    title: '收费',
    data () {
      return {
        type: [],
        values: [],
        value1: '',
        value2: ''
      }
    },
    methods: {
      init () {
        var color = ['#2F8DF4', '#ef9861']
        var title = this.type
        var option = {
          // color: color,
          backgroundColor: '#ffffff00',
          legend: {
            // show: false,
            orient: 'horizontal',
            x: 'center',
            y: 'bottom',
            icon: 'circle',
            data: title,
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              color: '#fff'
            }
          },
          series: [{
            type: 'pie',
            radius: ['35%', '50%'],
            data: this.values,
            //   [{
            //   value: this.value1,
            //   name: '民用售气量'
            // }, {
            //   value: this.value2,
            //   name: '非民用售气量'
            // }],
            labelLine: {
              normal: {
                length: 10
              }
            },
            label: {
              show: true,
              formatter: '{b|{b}}{per|{d}%}',
              rich: {
                a: {
                  color: '#999',
                  lineHeight: 16,
                  align: 'center'
                },
                hr: {
                  borderColor: '#aaa',
                  width: '100%',
                  borderWidth: 1,
                  height: 0
                },
                b: {
                  fontSize: 10,
                  padding: [5, 0],
                  color: '#fff'
                },
                c: {
                  fontSize: 10,
                  color: '#eee'
                },
                per: {
                  color: '#FDF44E',
                  fontSize: 10,
                  borderRadius: 2
                }
              },
              position: 'outside'
            }
          }]
        }
        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)=> {
        let d = res.data
        console.log('用户售气~~~~~~~~~~~', res.data)
        this.type = d.map(x => x.name)
        this.values = d
        // let my = d.filter(item => item.name === '民用').map(f => f.value)
        // let fmy = d.filter(item => item.name === '非民用').map(f => f.value)
        // console.log('*-*--*-*-*-**-*-*-*-*-', my , fmy)
        // this.value1 = my.length > 0 ? my.reduce((x, y) => x + y) : 0
        // this.value2 = fmy.length > 0 ? fmy.reduce((x, y) => x + y) : 0
        // console.log('~~~~~~~~~~~', this.value1, this.value2)
        this.init()
      })
    },
    props: {}
  }
</script>
<style scoped>


</style>

