echars 环形图加外边框

学习过程中将笔记跟大家分享，希望对大家也有所帮助，共同成长进步💪~\
如果大家喜欢，可以点赞或留言给个支持💕 ~~，谢谢大家⭐️⭐️⭐️~

需求是加外边框，鼠标放上去外边框随着一起突出，如下图所示：

代码如下：

function mychart1() {
    myChart1 = echarts.init(document.getElementById('profitTotal'));
    let echartData = [{
        name: '费用',
        value: 30, 
    },
    {
        name: '投资',
        value: 70, 
    },];
    let xAxisData = echartData.map(v => v.name);
    let yAxisData = echartData.map(v => v.value);
    option = {
        color:['#03A08C','#1D6CDC'],
        legend: {
            orient: 'vertical', // 'vertical' ,'horizontal'
            x: 'right', // 'center' | 'left' | 'right' | {number}, 
            y: 'center', // 'center' | 'bottom' | {number} 
            padding:[0,80,0,0],
            align:'left',
            textStyle: { //图例文字的样式
                color: '#81ACCF',
                fontSize: 14,
                fontWeight: '100',
            },
            // icon: "rect",   //  字段控制形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
        　　itemWidth: 18,  // 设置宽度
        　　itemHeight: 10, // 设置高度
        // 　　itemGap: 40, // 设置间距
            selectedMode:false,//取消图例上的点击事件
            data:xAxisData,
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: ['25%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderColor: '#0A284C',
                    borderWidth: 2,
                },
                label: {
                    normal: {
                        position: 'inner',
                        show : false,
                        formatter:'{c}%'
                    },
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:echartData,
            },
            {
                name: '外边框',
                type: 'pie',
                radius: ['25%', '80%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    normal:{
                        color:function(params){//渐变色
                            var colorList = ['rgba(3, 160, 140, 0.2)','rgba(3, 105, 211, 0.2)'];
                            return colorList[params.dataIndex]
                        },
                        // color:'rgba(62,109,255,0.4)',
                        borderColor: '#0A284C',
                        borderWidth: 2,
                    },
                },
                label: {
                    normal: {
                        position: 'inner',
                        show : true,
                        color:'#ffffff',
                        formatter:'{c}%'
                    },
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:echartData,
            }]
    };
    myChart1.on('mouseover', 'series.pie',function(params) {
        myChart1.dispatchAction({
            type: 'highlight',
            dataIndex: params.dataIndex,
            seriesIndex: 0,
        });
    });
    myChart1.on('mouseout', 'series.pie', function(params) {
        myChart1.dispatchAction({
            type: 'downplay',
            dataIndex: params.dataIndex,
            seriesIndex: 0,
        });
    });
    myChart1.setOption(option);
}

ECharts中支持的图表行为，通过 dispatchAction 触发。实现外边框会随着一起突出显示与否