需求及主要解释请见上一篇：10.canvas饼图1https://segmentfault.com/a/1190000021599679
最终效果：
由于本次简单，就不过多解释了。
看上一篇解释就能看懂
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>andy-js:canvas饼图2</title>
<style>
*{margin:0;padding:0;}
#box{width:284px;height:164px;margin:100px auto;background: #010650;}
</style>
</head>
<body>
<div id="box">
<canvas id="c1" width="284" height="164"></canvas>
</div>
<script>
var data=[
{
name:'专科',
value:0.5,
},
{
name:'高中及以下',
value:0.3,
},
{
name:'本科及以上',
value:0.2,
},
];
var w=284,h=164,center={x:w/3,y:h/2};
var oC1=document.getElementById('c1');
var ctx=oC1.getContext('2d');
var lineWidth=4, //线宽
margin=5, //边距
radius=58; //最外圈的半径
var padding=50,
textX=center.x+radius+20, //示列文字开始的X
textMargin=(h-padding)/data.length; //文字距离
textY=padding/2+textMargin/2; //示列文字开始的Y
ctx.lineWidth=lineWidth;
var colors=['rgba(36,221,175,1)','rgba(49,74,211,1)','#6058ef'];
for(var i=0;i<data.length;i++){
//画圈
let end=Math.PI*(2*(1-data[i].value)+1.5);
ctx.strokeStyle=colors[i];
ctx.beginPath(); //起始一条路径
ctx.arc(center.x,center.y,radius,Math.PI*1.5,end,true);
ctx.stroke();
ctx.strokeStyle='#1c1b6d'; //#1c1b6d
ctx.beginPath(); //起始一条路径
ctx.arc(center.x,center.y,radius,end,Math.PI*1.5,true);
ctx.stroke();
radius=radius-margin-lineWidth;
//文字
ctx.fillStyle=colors[i];
ctx.fillRect(textX,textY,8,8);
ctx.fillStyle='#D8D8D8';
ctx.textBaseline='top';
ctx.fillText(data[i].name,textX+15,textY);
textY+=textMargin;
};
</script>
</body>
</html>
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。