echarts嵌套饼图（pie），初始默认选中

echarts嵌套饼图（pie），初始默认选中

需要实现的效果

在百度echarts，示例里面做修改，效果图如下

下列代码在百度echarts中，实现的代码
可以直接复制使用
但请注意注释中的相关信息

option = {
    tooltip: {
        trigger: 'item',
        // formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],
            label: {
                            color: '#555',
                            position: 'inner',
                            formatter: '{b|{b}}',
                            rich: {
                                b: {
                                    color: '#555',
                                    fontStyle: 'normal',
                                    fontWeight: 'normal',
                                    lineHeight: 33,
                                },
                            },
            },
            labelLine: {
                show: false
            },
            itemStyle: {
                normal: {
                    opacity: 0.7,
                    borderWidth: 2,
                    borderColor: '#fff',
                    },
            },
            data: [
                {value: 1555, name: '搜索引擎',itemStyle: {
                            normal: {
                                color: '#b3ffb2',
                            },
                        }},
                {value: 1200, name: '营销广告',itemStyle: {
                            normal: {
                                color: '#77f7ff',
                            },
                        } },
                {value: 250, name: '其他',itemStyle: {
                            normal: {
                                color: '#7faaff',
                            },
                        } },
            ]
        },
        {
            name: '访问来源',
            type: 'pie',
            radius: ['45%', '60%'],
            label: {
                formatter: '{b}\n{{d}%}  ',
                            show: false,
                            color: '#555',
                            
                        },
                        
                        labelLine: {
                            lineStyle: {
                                color: '#555',
                            },
                        },
                        emphasis: {
                            label: {
                                show: true,
                            },
                        },
                        itemStyle: {
                            normal: {
                                // opacity: 0.7,
                                borderWidth: 2,
                                borderColor: '#fff',
                            },
                        },
            data: [
                {value: 1000, name: '百度',itemStyle: {
                            normal: {
                                color: '#b3ffb2',
                            },
                        }},
                {value: 255, name: '谷歌',itemStyle: {
                            normal: {
                                color: '#b3ffb2',
                            },
                        },},
                {value: 250, name: '必应',itemStyle: {
                            normal: {
                                color: '#b3ffb2',
                            },
                        },},
                {value: 300, name: '邮件营销',itemStyle: {
                            normal: {
                                color: '#77f7ff',
                            },
                        },},
                {value: 400, name: '联盟广告',itemStyle: {
                            normal: {
                                color: '#77f7ff',
                            },
                        },},
                {value: 500, name: '视频广告',itemStyle: {
                            normal: {
                                color: '#77f7ff',
                            },
                        },},
                {value: 250, name: '其他',itemStyle: {
                            normal: {
                                color: '#7faaff',
                            },
                        },}
            ]
        }
    ]
};
//请在setOption之后调用下列方法
//在百度的echarts的示例里直接修改，因为没有二次渲染，所以有些配置没有实时的出现
let dataIn = option.series[0].data
let dataOut = option.series[1].data

//注意，如果，存在pie图刷新的情况，请做循环，逐一清除外层（和里层）的高亮

            for (let i = 0; i < dataOut.length; i++) {
                //先逐个清除外层高亮
                myChart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 1,
                    dataIndex: i,
                });
                if(i<dataIn.length){
                    for (let j = 0; j < dataIn.length+1; j++) {
                        if(i==j){
                            myChart.dispatchAction({
                                type: 'highlight',
                                seriesIndex: 1,
                                dataIndex: j,
                            });
                        }else{
                            // return
                        }

                    }
                }
            }
        var index = 0
        //设置默认选中项为第一项
        myChart.dispatchAction({
                            type: 'highlight',
                            seriesIndex: 1,
                            dataIndex: 0,
                        });
            //鼠标移入事件            
            myChart.on('mouseover', function(e) {
                if (e.dataIndex != index) {
                    myChart.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 1,
                        dataIndex: index,
                    });
                }
            });
            //鼠标移出事件
            myChart.on('mouseout', function(e) {
                index = e.dataIndex;
                //只做外层hover的显示，里层hover不做高亮显示
                if(e.seriesIndex==1){
                myChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 1,
                    dataIndex: e.dataIndex,
                });
                }
            });