vue中echarts饼图实现循环高亮效果

<div id="main"></div>

data() {
	return {
		mTime: null,
        echartsPie: "",
        typeProportionList: []
    }
}

mounted() {
	this.getList()
}

methods: {
getList() {
        getList()
        .then(res => {
            if (res.code == 1) {
                this.typeProportionList = []
                this.nameList = []
                res.data.forEach(element => {
                    this.typeProportionList.push({
                        name: element.name,
                        value: element.proportion
                    })
                    this.nameList.push({
                        name: element.name
                    })
                });
                this.getPie()
            }
        })
    },
	pieActive() {
        this.echartsPie = echarts.init(document.getElementById('main'))
        let index = -1 //高亮所在下标
        let dataLength = this.typeProportionList.length   // 当前饼图有多少个扇形
        console.log(dataLength, "dataLength")
        this.mTime = setInterval(()=>{
            // 清除之前的高亮
            this.echartsPie.dispatchAction({
              type: 'downplay',
              seriesIndex: 0,
              dataIndex: index
            })
            index = (index + 1) % dataLength
            // 当前下标高亮
            this.echartsPie.dispatchAction({
              type: 'highlight',
              //   type: 'showTip',  会显示占比
              seriesIndex: 0,
              dataIndex: index
            })
            if (index > dataLength) {
              index = 0
            }
        }, 1500)
        // 鼠标划入
        this.echartsPie.on('mouseover',()=>{
          // 停止定时器，清除之前的高亮
          clearInterval(this.mTime)
          this.echartsPie.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: index
          })
        })
    },
    getPie() {
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            title: {
                text: '',
                subtext: '',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                data: this.nameList,
                orient: "vertical", //垂直显示还是水平显示
                right: 30, //legend相对位置
                bottom: 40, //legend相对位置
                textStyle: { 
                    fontSize: "14", 
                    color:'#fff'
                }, //legend字体大小
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true}
                }
            },
            series: [
                {
                    name: '面积模式',
                    type: 'pie',
                    radius: [20, 80],
                    center: ['35%', '50%'],  //  设置饼图的位置
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 5,
                        label:{
            	        	show:true,
            	        	formatter:'{c}'
            	        },
                    },
                    data: this.typeProportionList
                }
            ]
        };
        option && myChart.setOption(option);
        // 鼠标划出
        this.pieActive()
        this.echartsPie.on('mouseout',()=>{
          this.pieActive()
        })
    },
 }