echarts 饼状图自动高亮

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>echart</title>
    <style>
        #faultPie{
            width:480px;
            height:280px;
            border:1px solid #000;
        }
         #faultPie2{
            width:480px;
            height:280px;
            border:1px solid #000;
        }
    </style>
</head>
<body>
    <div id="faultPie"></div>
    <div id="faultPie2"></div>
 
    <script src="jquery-2.1.1.min.js"></script>
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
    <script>
        var faultPieEchart = echarts.init(document.getElementById('faultPie')); //初始化echarts实例
        var faultPieOption = {
            legend: {
                data: ['已报名', '未报名'],
                icon: 'rect',
                top: 100,
                right: '14.17004%',
                itemGap: 35,
                itemWidth: 10,
                itemHeight: 10,
                orient: 'vertical',
                textStyle: {
                    padding: [0, 0, 0, 5],
                    color: 'rgba(255,255,255,0.87)'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: "{b} : <br>{c}起({d}%)",
                backgroundColor: 'rgba(0,0,0,0.3)', // 背景
                padding: [8, 10], //内边距
                extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.87);', //添加阴影
            },
            color: ['#289df5', '#ff5050'],
            series: [{
                type: 'pie',
                radius: ['80%', '62%'],
                center: ['40%', '60%'],
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: 42,
                    name: '已报名',
                    label: {
                        normal: {
                            formatter: '{c}',
                            textStyle: {
                                color: '#fff',
                                fontSize: 33
                            }
                        }
                    }
                }, {
                    value: 132,
                    name: '未报名',
                    label: {
                        normal: {
                            formatter: '\n09月数据',
                            textStyle: {
                                color: 'rgba(255,255,255,0.87)',
                                fontSize: 14
                            }
                        }
                    }
                }]
            }]
        };
        faultPieEchart.setOption(faultPieOption);
        
        
        var faultPieEchart2 = echarts.init(document.getElementById('faultPie2')); //初始化echarts实例
        var faultPieOption2 = {
            legend: {
                data: ['已报名', '未报名'],
                icon: 'rect',
                top: 100,
                right: '14.17004%',
                itemGap: 35,
                itemWidth: 10,
                itemHeight: 10,
                orient: 'vertical',
                textStyle: {
                    padding: [0, 0, 0, 5],
                    color: 'rgba(255,255,255,0.87)'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: "{b} : <br>{c}起({d}%)",
                backgroundColor: 'rgba(0,0,0,0.3)', // 背景
                padding: [8, 10], //内边距
                extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.87);', //添加阴影
            },
            color: ['#289df5', '#ff5050'],
            series: [{
                type: 'pie',
                radius: ['80%', '62%'],
                center: ['40%', '60%'],
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: 42,
                    name: '已报名',
                    label: {
                        normal: {
                            formatter: '{c}',
                            textStyle: {
                                color: '#fff',
                                fontSize: 33
                            }
                        }
                    }
                }, {
                    value: 132,
                    name: '未报名',
                    label: {
                        normal: {
                            formatter: '\n09月数据',
                            textStyle: {
                                color: 'rgba(255,255,255,0.87)',
                                fontSize: 14
                            }
                        }
                    }
                }]
            }]
        };
        faultPieEchart2.setOption(faultPieOption2);
        
        var index = 0;
        var mTime = setInterval(function() {
            faultPieEchart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: index
            });
            faultPieEchart.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: index
            });
            index++;
            if (index > faultPieOption.series[0].data.length) {
                index = 0;
            }
        }, 1000);	
        
        
        
        var index2 = 0;
        var mTime = setInterval(function() {
            faultPieEchart2.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: index2
            });
            faultPieEchart2.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: index2
            });
            index2++;
            if (index2 > faultPieOption.series[0].data.length) {
                index2 = 0;
            }
        }, 1000);
    </script>
 
</body>
</html>
原文链接：https://blog.csdn.net/qq_17211063/article/details/123252415