Echars ring diagram with outer border

💪~ If you like it, you can like it or leave a message to support 💕~~~, thank you ⭐️ 💕 ️

The requirement is to add an outer border, and the outer border will be highlighted with the mouse, as shown in the picture below:

The code is as follows:

function mychart1() {
    myChart1 = echarts.init(document.getElementById('profitTotal'));
    let echartData = [{
        name: 'cost'.value: 30}, {name: 'investment'.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: { // Style the legend text
                color: '#81ACCF'.fontSize: 14.fontWeight: '100',},// Field control shape types include circle, rect,line, roundRect, triangle, diamond, pin, arrow, none
        　　itemWidth: 18.// Set the width
        　　itemHeight: 10.// Set the height
        // itemGap: 40, // set spacing
            selectedMode:false.// Cancel the click event on the legend
            data:xAxisData,
        },
        series: [{name: 'Access source'.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: 'Outer border'.type: 'pie'.radius: ['25%'.'80%'].avoidLabelOverlap: false.itemStyle: {
                    normal: {color:function(params){/ / gradients
                            var colorList = ['rgba (3, 160, 140, 0.2)'.'rgba (3, 105, 211, 0.2)'];
                            return colorList[params.dataIndex]
                        },
                        / / color: 'rgba (62109255,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); }Copy the code

Chart behavior supported in ECharts, triggered by dispatchAction. The outer border is highlighted or not along with the implementation