SOURCE

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//1.创建数据包(信息)
var dataArr = [
    { name: '北京', color: 'yellow', value: 0.3 },
    { name: '上海', color: 'red', value: 0.7 },
    // { name: '广州', color: 'green', value: 0.1 },
    // { name: '深圳', color: 'purple', value: 0.15 },
    // { name: '天津', color: 'blue', value: 0.25 }
];
//2.定义圆心
var x0 = canvas.width * 0.5, y0 = canvas.height * 0.5;//显示在画布中间
//2.1定义半径
var radius = 50;
//2.2定义起始角度
var beginAngle = -90 * Math.PI / 180;
//(定义初始角度为-90deg)

let whiteRound = 30;

//3.遍历,绘制扇形
for (var i = 0; i < dataArr.length; i++) {
    //3.1扇形角度
    var tempAngle = dataArr[i].value * 360 * Math.PI / 180;
    //3.2结束角度
    var endAngle = beginAngle + tempAngle;

    //3.3开启路径
    ctx.beginPath();
    //3.4起点
    ctx.moveTo(x0, y0);
    //3.5绘制弧度
    ctx.arc(x0, y0, radius, beginAngle, endAngle);
    //3.6设置颜色
    ctx.fillStyle = dataArr[i].color;
    //3.7填充
    ctx.fill();
    //4.绘制文字
    //4.1常量
    var textAngle = beginAngle + tempAngle * 0.5; //角度
    var text = dataArr[i].name + dataArr[i].value * 100 + '%';
    console.log(text);

    // 中间白色圆
    ctx.beginPath();
    ctx.arc(x0, y0, whiteRound, 0, 2 * Math.PI, true); // 设置路径
    ctx.fillStyle = "#fff";
    ctx.fill(); // 画圆弧

    //4.2文字坐标
    var textX = x0 + (radius + 10) * Math.cos(textAngle);
    var textY = y0 + (radius + 10) * Math.sin(textAngle);
    //4.3文字字号和字体
    ctx.font = "10px '微软雅黑'";
    //4.4判断文字是否在左边
    if ((textAngle > 90 * Math.PI / 180) && (textAngle < 270 * Math.PI / 180)) {
        ctx.textAlign = 'end';//文字的右侧在基线的左端
    }
    //4.5 绘制文字
    ctx.fillStyle = "#000";
    ctx.fillText(text, textX, textY);
    //5.更新起始角度, 将当前扇形的结束角度作为下一个扇形的起始角度
    beginAngle = endAngle;
}

<canvas id="canvas" height="200" width="200"></canvas>