饼图提示框自动播放案例pie简单易懂

先引入echars插件

<template>
  <div id="ed-pie"></div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { 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.pieFn()
  },
  methods: {
    pieFn() {
      var chartDom = document.getElementById('ed-pie')
      var myChart = this.$echarts.getInstanceByDom(chartDom)
      if (myChart == null) {
        myChart = this.$echarts.init(chartDom)
      }
      var option
      option = {
        tooltip: {
          trigger: 'item',
          backgroundColor: '#001c38cf',
          borderColor: '#00B8FF',
          borderWidth: 2,
          borderRadius: 8,
          textStyle: {
            align: 'left',
            fontSize: 14,
            color: '#fff'
          },
          // {b}（数据项名称），{c}（数值）, {d}（百分比）
          formatter: '&emsp;&emsp;&emsp;{b}<br/>数值：{c}万吨<br/>占比：{d}%'
        },
        legend: {
          top: '15%',
          right: '10%',
          textStyle: {
            color: '#CCF2FF',
            fontSize: 16
          },
          itemWidth: 14,
          orient: 'vertical'
        },
        // 饼图颜色
        color: ['#00B7FF', '#82FFB7', '#FFEF82', '#1BE6FE', '#FF7162'],
        series: [
          {
            // name: "占比",
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,

            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true
            },
            data: this.data,
            center: ['37%', '50%']
          }
        ]
      }

      option && myChart.setOption(option)
      // 饼图自动播放
      var currentIndex = 0
      var fhourTime = null
      var dataLen = option.series[0].data.length
      fhourTime = setInterval(function () {
        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
        currentIndex = (currentIndex + 1) % dataLen
        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
        // 显示 tooltip
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
      }, 2000)
      // 鼠标移入停止轮播
      myChart.on('mousemove', function (e) {
        clearInterval(fhourTime)
        // 取消轮播当前高亮效果
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
      })
      // 鼠标移出恢复轮播
      myChart.on('mouseout', function () {
        fhourTime = setInterval(function () {
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: currentIndex
          })
          currentIndex = (currentIndex + 1) % dataLen
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: currentIndex
          })
          myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: currentIndex
          })
        }, 2000)
      })
    }
  }
}
</script>

<style scoped lang='scss'>
#ed-pie{
    width:400px;
    height:400px;
}
</style>