SOURCE

window.onload = function(){
	drawCanvanPercent("percent","myCanvas")
}
/*监听浏览器变化修改默认字体的大小*/
window.onresize = function(){

	drawCanvanPercent("percent","myCanvas")
}



/*绘制进度条函数，percentId：百分比id, c_Id:canvas的id ，环形进度条的宽高根据父标签进行定义，百分比的参数是data-percent*/
function drawCanvanPercent(percentId,c_Id){
	var per = 0; //设置百分比
	var _canvas = document.getElementById(c_Id);
	var canvasId = c_Id; 
	var cirR =   ( _canvas.parentElement.clientWidth - 20 ) / 2 ; //最外层圆的半径
	var lineWidth = 2;//最外层边框大小
	var borColor = "#0053FF"; //最外层边框颜色
	
	
	var dushu_ele = document.getElementById(percentId); //进度条id
	
	//通过父元素设置canvas的大小
	_canvas.width = cirR *2+2 || _canvas.parentElement.clientWidth;
	_canvas.height = cirR *2+2 || _canvas.parentElement.clientWidth;
	
	drawCircle(_canvas,cirR,lineWidth,borColor); //canvas对象、r:圆半径，2
    
   
    var ctx2 = _canvas.getContext("2d"); 
    var circle = { 
     	r : cirR,      //环形圆的半径 
     	per : _canvas.getAttribute('data-percent'),      //百分比分子 
     	lineWidth : 10      //环形圆的半径
 	}; 
 	
 	
 	if(_canvas.getContext){ 
		drawPercent2(ctx2,circle,per,dushu_ele);
    } 
    
 	//绘制进度条圆
	function drawPercent2(ctx2,circle,per,dushu_ele){
		var pper_interal= setInterval(function () { 
            if(per>=circle.per){ 
		        per=circle.per; 
		        clearTimeout(pper_interal); 
		    }else{ 
		         per++; 
		    } 
		    dushu_ele.innerText=per+'%'; 
     		ctx2.beginPath();
      
      
        
     		var g = ctx2.createLinearGradient(0,0,0,per);  //创建渐变对象  渐变开始点和渐变结束点
			  g.addColorStop(0, '#00EEE1'); //添加颜色点
			  g.addColorStop(1, '#0257EA '); //添加颜色点
			  ctx2.strokeStyle = g;     //使用渐变对象作为圆环的颜色
			
			  ctx2.lineCap  = "round";  
		    ctx2.lineWidth = circle.lineWidth; 
		    ctx2.arc(circle.r+1, circle.r+1, circle.r-5,1.5*Math.PI, Math.PI*(1.5-(per/100)*270/180 ), true ); //这里的仪表盘总度数为234。即(2-0.85)*Math.PI
		    ctx2.stroke(); 
		    ctx2.closePath();
        }, 10);
		
	}
	
	//绘制背景圆圈
	function drawCircle(obj,cir_r,lineWidth,color){ 
		var ctx=obj.getContext("2d");
		//设置圆心位置
		var x = obj.clientWidth /2 ; 
		var y = obj.clientHeight/ 2; 
		ctx.beginPath();
		ctx.strokeStyle = color; 
     	ctx.lineWidth= lineWidth; 
		ctx.arc(cir_r+1,cir_r+1,cir_r,0,1.5*Math.PI);
		ctx.stroke();
	}
}

<div class="rea-num reach-charts">
  <div class="reach-text">
    <div id="percent" class="reach-percent" ></div>
    <div>成功率</div>
  </div>
  <!--data-percent用于修改百分比的参数-->
  <canvas id="myCanvas" data-percent="90" class="canvas-circle"> 
       您的浏览器不支持canvas标签。 
  </canvas>
</div>

body,html{
				padding: 0;
				margin: 0;
				font-family: "微软雅黑",arial;
				font-size: 100px;
				color: #fff;
        background-color: #022136;
			}
.reach-charts{
				overflow: hidden;
				margin: 0.5rem;
				width: 1.6rem;
				height: 1.6rem;
				border: 0.04rem solid rgba(255,255,255,0.10);
				border-radius: 100%;
				padding: 0.1rem;
				position: relative;
				margin:50px auto;
			}
			.reach-text{
				color: #fff;
				position: absolute;
				text-align: center;
				width: 1.6rem;
				text-align: center;
				font-size: 0.14rem;
				margin-top: 50%;
				top:-0.4rem
			}
			.reach-percent{
				font-size: 0.4rem;
			}
//设置绘制的中心圆圈居中显示
 .canvas-circle {
                position:absolute;
                top:50%;
                left:50%;
                transform:translate(-50%,-50%)
            }