echarts圆角环形图

主要利用极坐标轴和bar,以及roundCap.

option = {
    angleAxis: {
        max: 100,
        startAngle:90,
        show:false,
            handle:{size:50,show:true},
        splitLine: {
            show: false
        }
    },
   
    grid:{width:'10'},
    radiusAxis: {
        type: 'category',
        show:false,
        splitLine: {
            show: false
        },
        name:'111',
        data: ['50%', '42%', 'x', 'y', 'z'],
        
    },
    polar: {
        tooltip:{show:true},
        radius:['50%','100%']
    },
    series: [{
        type: 'bar',
        stack:'one',
        label:{position:'inside',color:'rgba(176,240,255,1)',formatter:"{d}%"},
        data: [50, 10, 9, 80, 100],
        roundCap: true,
         zlevel:2,
        coordinateSystem: 'polar',
        name: 'Without Round Cap',
        // color:'rgba(7,108,118,1)',
        
        itemStyle: {
            borderColor: 'red',
            borderWidth: 0,
            label:{formatter: '{b}: {@score}',show:true,position:'inside',color:'black',backgroundColor:'black'},
  
        }
    }, {
        type: 'bar',
        stack:'one',
        roundCap:true,
        zlevel:1,
        data: [50, 90, 91, 20, 0],
        coordinateSystem: 'polar',
        name: 'With Round Cap',
        color: 'rgba(176,240,255,1)',
        // barWidth:10,
        itemStyle: {
            borderColor: 'rgba(7,108,118,1)',
            borderWidth: 1
        }
    }],
    legend: {
        show: true,
        data: ['Without Round Cap', 'With Round Cap']
    }
};

效果图：