效果圖如下

WXML

<view class='chart_wrapper'>
<view class='chart_wrapper'>
    <view class='chart_mark'>
      <view class='mark_item'>
        <view class='mark mark_color1'></view>
        <view>總課時量 24</view>
      </view>
      <view class='mark_item'>
        <view class='mark mark_color2'></view>
        <view>已上課時 12</view>
      </view>
      <view class='mark_item'>
        <view class='mark mark_color3'></view>
        <view>出勤 10</view>
      </view>
      <view class='mark_item'>
        <view class='mark mark_color4'></view>
        <view>缺勤 2</view>
      </view>
    </view>
     <canvas class='Canvas' canvas-id="Canvas0"></canvas>
     <canvas class='Canvas' canvas-id="Canvas1"></canvas>
     <canvas class='Canvas' canvas-id="Canvas2"></canvas>
     <canvas class='Canvas' canvas-id="Canvas3"></canvas>
     <canvas class='Canvas' canvas-id="Canvas4"></canvas>
    </view>
 

WXSS

/* 餅圖 */
.chart_wrapper{
  position: relative;
  width:100%;
  height:240px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Canvas{
  position: absolute;
  z-index: 999999;
  width: 100%;
  height: 100%;
  text-align: center;
}
.chart_mark{
  position: absolute;
  top: 0;
  left: 0;
}
.mark_item{
  display: flex;
  justify-content: start;
  align-items: center;
  font-size: 11px;
  margin-bottom: 2px;
  color: #505050;
}
.mark{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}
.mark_color1{
  background-color: #e7f5fd;
}
.mark_color2{
  background-color: #3173e7;
}
.mark_color3{
  background-color: #5eadef;
}
.mark_color4{
  background-color: #fcca4c;
}
 

JS

onReady: function () {
    // 頁面渲染完成
    //使用wx.createContext獲取繪圖上下文context
    var context = wx.createContext();
    // 畫餅圖
    var array = [24, 12, 10, 2,24];// 資料來源
    var colors = ["#e7f5fd", "#3173e7", "#5eadef", "#fcca4c","#f1f9fe"];// 顏色
    var total = 24;//總數
    //    計算總量（）
    // for (var index = 0; index < array.length; index++) {
    //   total += array[index];
    // }
    let { screenWidth, screenHeight } = wx.getSystemInfoSync();//獲取螢幕寬度
    var canvasWidth = screenWidth * 0.94 - 20;//獲取canvas寬度
    //    定義圓心座標
    var point = { x: canvasWidth / 2 , y: 120 };
    //    定義半徑大小
    var radius = [100,90,80,80,50];
    /*    迴圈遍歷所有的pie */
    for (var i = 0; i < array.length; i++) {
      context.beginPath();
      
      // if (i > 0) {
      //   // 計算開始弧度是前幾項的總和，即從之前的基礎的上繼續作畫
      //   for (var j = 0; j < i; j++) {
      //     start += array[j] / total * 2 * Math.PI;
      //   }
      // }
      //多層餅圖迴圈
      for (i = 0; i < array.length;i++){
      //    1.先計算始末弧度

 //判斷手機型別 解決小程式canvas在Android上顯示不全的bug
        if (this.data.brand == 'iPhone') {
          var start = 1.2 * Math.PI; //起點弧度
          var end = array[i] / total * 2 * Math.PI + 1.2 * Math.PI;//結束弧度
        } else {
          var start = 1.2 * Math.PI; //起點弧度
          //結束弧度 新增0.0000001的誤差，避免始末弧度相差360度，安卓不顯示的問題
          var end = (array[i] / total - 0.0000001) * 2 * Math.PI + 1.2 * Math.PI;
        }

      //    三層與四層均分第二層角度
        if(i==3){ 
          //第四層開始弧度為第三層的結束角度
          start = array[2] / total * 2 * Math.PI + 1.2 * Math.PI;
          //第四層結束弧度為 第四層以0為開始的結束角度+第三層的結束角度
          end = end + array[2] / total * 2 * Math.PI; 
        }
      //    2.畫一條弧，並填充成三角餅pie，前2個引數確定圓心，第3引數為半徑，第4引數起始旋轉弧度數，第5引數本次掃過的弧度數，第6個引數為時針方向 - false為順時針
      //    3.新增陰影效果
      context.shadowOffsetX = 5; // 陰影Y軸偏移
      context.shadowOffsetY = 5; // 陰影X軸偏移
      context.shadowBlur = 10; // 模糊尺寸
      context.shadowColor = 'rgba(0, 0, 0, 0.2)'; // 顏色

      context.arc(point.x, point.y, radius[i], start, end , false);
      //      4.連線回圓心
      context.lineTo(point.x, point.y);
      //      5.填充樣式
      context.setFillStyle(colors[i]);
      //      6.填充動作
      context.fill();
        if (i == 4) { 
          context.setFontSize(13)
          context.setFillStyle("#434344")
          context.fillText("出勤統計", canvasWidth/2 - 25, 125);
          
        }

      //呼叫wx.drawCanvas，通過canvasId指定在哪張畫布上繪製，通過actions指定繪製行為
      wx.drawCanvas({
          //指定canvasId,canvas 元件的唯一識別符號
          canvasId: 'Canvas'+ i +'',
          actions: context.getActions()
      });
    }
    }
  },