话不多说，直接上代码（可以直接复制即可使用）：

图例：

//环图
function showPie2() {
/* $.ajax({
url: ''+ctx+'/lastJob/find',
type: "POST",

dataType:'json',
async: false,
success: function(data){
for(var i=0;i<data.length;i++){
    var array = data[i]
}
 e=array.YCLBT;
}
}); */
var e=45;  //可以ajax传入e的值

var option = {
    title:{
    show:true,
    text:e+'%' +"\n"+"成功占比率" ,   //图中间的值
    x:'center',          //居中
    y:'center',
    textStyle: {
        fontSize: '15',
        color:'white',
        fontWeight: 'normal'
      }
   },
tooltip: {
    trigger: 'item',
    formatter: "{d}%",
    show:false
},
legend: {
    orient: 'vertical',
    x: 'left',
    show:false
},
series: 
{
    name:'',
    type:'pie',
    radius: ['55%', '75%'],
    avoidLabelOverlap: true,
    hoverAnimation:false,
    label: {
        normal: {
            show: false,
            position: 'center'
        },
        emphasis: {
            show: false
        }
    },
    labelLine: {
        normal: {
            show: false
        }
    },
    data:[
        {value:e, name:''},   //紫色环的值
        {value:100-e, name:''}   //白色环的值
    ]
},
 color:[
        new echarts.graphic.LinearGradient(120, 120, 120, 1, [{offset: 1, color: 'transparent'}, {offset: 1, color: '#cb3bff'}]) 
        ,'white'] //设置环的颜色 ，坐标控制渐变方向
    
}
var chart = echarts.init(document.getElementById("showPie2")); 
chart.setOption(option,true);  
//图形自适应 
window.addEventListener("resize",function(){
     chart.resize();
});
chart.off('click');
chart.on('click', function (params) {

});
}