echarts 图表轮播（pie图数据轮播）

本文总结了pie图轮播，难点是鼠标移入移出时候操作。

<template>
  <div class="pie">
    <div class="container" id="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { debounce } from 'lodash'
export default {
  data() {
    return {
      i: 0,
      list: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' },
      ],
    }
  },
  mounted() {
    this.initChart()
    this.autoMove()
    this.mouseMove()
	window.addEventListener('resize', debounce(() => this.myChart.resize(), 2000)) // 使用事件捕获，由外层向内
  },
  beforeDestroy() {
  	window.removeEventListener('resize', () => this.myChart.resize())
},
  methods: {
    initChart() {
      this.myChart = echarts.init(document.getElementById('chart'))
      let option = {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: '5%',
          left: 'center',
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: this.list,
          },
        ],
      }
      this.myChart.setOption(option)
    },
    autoMove() {
      this.timer = setInterval(() => {
        this.myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
        })
        this.myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: this.i % this.list.length,
        })
        this.i++
      }, 1000)
    },
    mouseMove() {
      this.myChart.on('mouseover', (params) => {
        window.clearInterval(this.timer)
        //如果鼠标移入正在高亮的数据段时，只显示当前高亮
        this.myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
        })
        this.myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: params.dataIndex,
        })
      })
      // 当鼠标移出，从上次坐标开始, this.i全局标记了
      this.myChart.on('mouseout', this.autoMove)
    },
  },
}
</script>

<style lang="scss" scoped>
.pie {
  height: 100vh;
  .container {
    height: vh(500);
  }
}
</style>