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

<script>
  export default {
    title: '收费',
    data () {
    },
    methods: {
      init () {
        var color = ['#2F8DF4', '#ef9861']
        var title = ['民用售气量', '非民用售气']
        var option = {
          color: color,
          backgroundColor: '#ffffff00',
          legend: {
            orient: 'horizontal',
            left: 'center',
            top: 'bottom',
            icon: 'circle',
            data: title,
            textStyle: {
              color: '#fff'
            }
          },
          series: [{
            type: 'pie',
            roseType: 'radius',
            radius: ['45%', '60%'],
            data: [{
              value: 220,
              name: '民用售气量',
              itemStyle: {
                color: '#2F8DF4',
                borderColor: '#2F8DF4',
                borderWidth: 3,
                shadowColor: '#2F8DF4'
              }
            }, {
              value: 120,
              name: '非民用售气',
              itemStyle: {
                color: '#ef9861',
                borderColor: '#ef9861',
                borderWidth: 3,
                shadowColor: '#ef9861'
              }
            }],
            labelLine: {
              normal: {
                length: '5%'
              }
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                // color: '#fff',
                // fontSize: 18,
                formatter: '{font|{b}}\n{font|{d}%}',
                rich: {
                  font: {
                    fontSize: 10,
                    padding: [5, 0],
                    color: '#fff'
                  },
                  hr: {
                    height: 0,
                    borderWidth: 1,
                    width: '100%',
                    borderColor: '#fff'
                  }
                }
              }
            }
          }]
        }
        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() {
      this.init()
    },
    props: {}
  }
</script>
<style scoped>


</style>

