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

<script>
  export default {
    title: '收费',
    data () {
    },
    methods: {
      init () {
        var colorarr = ['#00FFFF', '#f27c79', '#00FFA8', '#897bd3', '#FFE400', '#F76F01']
        var option = {
          backgroundColor: '#ffffff00',
          animation: true,
          title: {
            x: 'center',
            y: 'center',
            textStyle: {
              color: '#fff',
              fontSize: 60,
              fontWeight: 'normal',
              align: 'center',
              width: '200px'
            },
            subtextStyle: {
              color: '#fff',
              fontSize: 20,
              fontWeight: 'normal',
              align: 'center'
            }
          },
          legend: {
            width: '50%',
            textStyle: {
              color: '#fff',
              fontSize: 12
            },
            orient: 'horizontal',
            icon: 'circle',
            bottom: '10%',
            right: '10%',
            padding: [8, 8],
            itemGap: 10,
            data: ['营业厅', '中国银行', '', '邮局', '西安银行', '', '利安', '其他']
          },
          series: [{
            type: 'pie',
            center: ['30%', '50%'],
            radius: ['30%', '55%'],
            color: colorarr,
            startAngle: 135,
            labelLine: {
              normal: {
                length: 20
              }
            },
            label: {
              show: false,
              position: 'outside'
            },
            emphasis: {
              label: {
                show: true,
                formatter: '{b|{b}:{c}}\n{per|{d}%}  ',
                backgroundColor: 'rgba(255, 147, 38, 0)',
                borderColor: 'transparent',
                borderRadius: 4,
                rich: {
                  a: {
                    color: '#999',
                    lineHeight: 16,
                    align: 'center'
                  },
                  hr: {
                    borderColor: '#aaa',
                    width: '100%',
                    borderWidth: 1,
                    height: 0
                  },
                  b: {
                    color: '#fff',
                    fontSize: 10,
                    lineHeight: 16
                  },
                  c: {
                    fontSize: 10,
                    color: '#eee'
                  },
                  per: {
                    color: '#FDF44E',
                    fontSize: 10,
                    borderRadius: 2
                  }
                }
              }
            },
            data: [{
              name: '营业厅',
              value: 3
            }, {
              name: '中国银行',
              value: 2
            }, {
              name: '邮局',
              value: 26
            }, {
              name: '西安银行',
              value: 24
            }, {
              name: '利安',
              value: 12
            },
              {
                name: '其他',
                value: 12
              }]
          }]
        }
        let barchart = this.$echarts.init(document.getElementById('ring'))
        console.log(option)
        barchart.setOption(option)
        let index = -1 // 高亮所在下标
        let dataLength = colorarr.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>

