Echarts 餅狀圖實現自動高亮扇面

在網上找了很多案例，基本上都不太符合自己想要的，這裏想要餅狀圖中的每一個區域在定時器的作用下，每隔幾秒高亮其中一個扇面，代碼思路如下：

1、引用echarts.min.js版本號以3.x.爲例

# 餅狀圖容器
<div id="twoEchart" style="width: 210px;height: 100%"></div>

2、餅狀圖詳情實例

var myChart1 = echarts.init(document.getElementById('twoEchart'));

var option1 = {
            color: ['#1e33ff', '#008fff', '#552de1', '#4f1577', '#50befe', '#c95be9', '#1221b4'],
            tooltip: {
                trigger: 'item',
                backgroundColor: 'none',
                textStyle: {
                    fontSize: 12,
                    fontFamily: 'Microsoft YaHei'
                },
                position: function (point, params, dom, rect, size) {
                    $(dom).html('<div class="tip">\n' +
                        '        <span class="name">' + params.name + '</span>\n' +
                        '        <div class="num">' + params.value + '<span class="name">家</span></div>\n' +
                        '    </div>');

                    return 'inside'
                }
            },
            series: [
                {
                    type: 'pie',
                    radius: '80%',
                    center: ['50%', '50%'],
                    label: {
                        normal: {
                            show: false
                        }
                    },
                    hoverOffset: 20,
                    startAngle: 90,
                    data: [
                        {value: 335, name: '小型企業'},
                        {value: 310, name: '一般工業企業'},
                        {value: 234, name: '第三產業'},
                        {value: 135, name: '建築施工'},
                        {value: 1548, name: '畜禽養殖業'},
                        {value: 580, name: '污水處理廠'},
                        {value: 400, name: '固廢處置單位'}
                    ]
                }
            ]
        };
myChart1.setOption(option1);

 var app = {
     currentIndex: -1
 };

 setInterval(function () {
     var dataLen = option1.series[0].data.length;
     // 取消之前高亮的圖形
     myChart1.dispatchAction({
         type: 'downplay',
         seriesIndex: 0,
         dataIndex: app.currentIndex
     });
     app.currentIndex = (app.currentIndex + 1) % dataLen;
     // 高亮當前圖形
     myChart1.dispatchAction({
         type: 'highlight',
         seriesIndex: 0,
         dataIndex: app.currentIndex
     });
     // 顯示 tooltip
     myChart1.dispatchAction({
         type: 'showTip',
         seriesIndex: 0,
         dataIndex: app.currentIndex
     });
 }, 3000);

3、echarts中tooltip的dom樣式文件

 .tip{
    width: 100%;
    height: 100%;
    display:flex;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
.name{
     font-size: 12px;
   }
   .num{
     font-size: 18px;
   }

4、效果圖如下