微信小程序-多层饼图/包含关系饼图/自定义饼图关系模式

效果图如下

WXML

    
      
        
        总课时量 24
      
      
        
        已上课时 12
      
      
        
        出勤 10
      
      
        
        缺勤 2
      
    
     
     
     
     
     
    

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()
      });
    }
    }
  },