请问这种echarts环形图要怎么做？

Question

本来想用itemStyle的border做但是只能做到这种底部：

并且设计图是有背景图的，用纯色还会盖住背景图。

不知道有没有人做过类似的
多谢~

Answer 1

你可以根据我这个微调就是你图上面的样子了，我的边框设置的比较小，你可以根据你自己的设置合适的大小就可以了，对你有帮助望采纳一下~

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:['#694EFF','#0369D3'],
        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(34,50,114,0.4)','rgba(5,55,104,0.4)'];
                            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);
}