yj.微信小程序 长短不一的饼状图

今天项目有个需求，发过来瞅了一眼，尼玛哦，这尼玛是画的吧，画的吧！！！（图1）

图1

赶紧百度一波 ，没有。。。没有。。。没有。。。擦嘞  要哭惹   ，百度h5的  有个看起来很舒的  

https://blog.csdn.net/Welkin_qing/article/details/84592210

还好看的懂h5 但是差距还是很大    emmmmm   最终我放弃写成一摸一样了     结果 如： （图二）

图2

 

图2代码：

.js:

var context = wx.createCanvasContext('Canvas');

    var array = [3,10,10,7,5,5,8,6];

    var arraystr = ['职业发展', '财务状况', '个人健康', '娱乐休闲', '家庭', '朋友和重要他人', '个人成长', '自我实现'];

    var colors = ["red", "blue", "yellow", "green", "purple", "black", "gold","forestgreen"];

    /*伸出去的线的长度*/

    var outLine = 30;

    /*说明的矩形大小*/

    var rectW = 30;

    var rectH = 16;

    var space = 20;

    var total = 0;

    for (var val = 0; val < array.length; val++) {

      total += array[val];

    }

    var point = { x: 250, y: 120 };

    var radius = [7 * 3, 7 * 10, 7 * 10, 7 * 7, 7 * 5, 7 * 5, 7 * 8, 7 *6];

    for (var i = 0; i < array.length; i++) {

      context.beginPath();

      var start = 0;

      if (i > 0) {

        for (var j = 0; j < i; j++) {

          start += array[j] / total * 2 * Math.PI;

        }

      }

      context.arc(point.x, point.y, radius[i], start, start + array[i] / total * 2 * Math.PI, false);

      context.setLineWidth(0)

      context.lineTo(point.x, point.y);

      context.setStrokeStyle('#F5F5F5');

      context.setFillStyle(colors[i]);

      context.fill();

      context.closePath();

      context.stroke();

 

      var edge = radius[i] + outLine;

      /*x轴方向的直角边*/

      var edgeX = Math.cos(start + (array[i] / total * 2 * Math.PI)/2) * edge;

      /*y轴方向的直角边*/

      var edgeY = Math.sin(start + (array[i] / total * 2 * Math.PI) / 2) * edge;

      var outX = point.x + edgeX;

      var outY = point.y + edgeY;

      context.beginPath();

      context.moveTo(point.x, point.y);

      context.lineTo(outX, outY);

      context.strokeStyle = colors[i];

      /*画文字和下划线*/

      /*线的方向怎么判断 伸出去的点在X0的左边 线的方向就是左边*/

      /*线的方向怎么判断 伸出去的点在X0的右边 线的方向就是右边*/

      /*结束的点坐标  和文字大小*/

      context.font = "14rpx Microsoft YaHei";

 

      const metrics = context.measureText(array[i]);

      var textWidth = metrics.width;

      if (outX > point.x) {

        /*右*/

        context.lineTo(outX + textWidth, outY);

        context.textAlign = 'left';

      } else {

        /*左*/

        context.lineTo(outX - textWidth, outY);

        context.textAlign = 'right';

      }

      context.stroke();

      context.textBaseline = 'bottom';

      context.fillText(array[i], outX, outY);

      /*绘制说明*/

      /*矩形的大小*/

      /*距离上和左边的间距*/

      /*矩形之间的间距*/

      context.fillRect(space, space + i * (rectH + 10), rectW, rectH);

      /*绘制文字*/

      context.beginPath();

      context.textAlign = 'left';

      context.textBaseline = 'top';

      context.font = '12px Microsoft YaHei';

      context.fillText(arraystr[i], space + rectW + 10, space + i * (rectH + 10));

    }

    context.draw();

 

.wxml

<canvas canvas-id="Canvas" style="width: 400px; height: 400px;">

        </canvas>

 

最后花了两个小时出来的样子（图3）

图3

还有一个问题  无法百分百还原，这个边上的框内文字怎么加，加应该是可以加的 但是目前时间不允许啊哈  

图3代码

.js

// var arraystr = ['职业发展', '财务状况', '个人健康', '娱乐休闲', '家庭', '朋友和重要他人', '个人成长', '自我实现'];

  //  var colors = ["red", "blue", "yellow", "green", "purple", "black", "gold", "forestgreen"];

  //  var array1 = [.1, .1, .1, .1, .2, .2, .1, .1];

  //  /*伸出去的线的长度*/

  //  var outLine = 30;

  //  /*说明的矩形大小*/

  //  var rectW = 30;

  //  var rectH = 16;

  //  var space = 20;

  //  var array = [10, 10, 10, 10, 10, 10, 10, 10];

  //  var point = { x: 200, y: 150 };

  //  var radius = [100, 100, 100, 100, 100, 100, 100, 100];

  //  var context = wx.createCanvasContext('Canvas1');

 

  //  var total = 0;

  //  for (var val = 0; val < array.length; val++) {

  //    total += array[val];

  //  }

  //  for (var i = 0; i < array.length; i++) {

  //    context.beginPath();

  //    var start = 0;

  //    if (i > 0) {

  //      for (var j = 0; j < i; j++) {

  //        start += array[j] / total * 2 * Math.PI;

  //      }

  //    }

  //    context.arc(point.x, point.y, radius[i], start, start + array[i] / total * 2 * Math.PI, false);

  //    context.setLineWidth(1)

  //    context.lineTo(point.x, point.y);

  //    context.setStrokeStyle('#333333');

  //    context.setFillStyle('#fff');

  //    context.fill();

  //    context.closePath();

  //    context.stroke();

  //  }

  //  context.draw();

  //  var radius2 = [80, 80, 80, 80, 80, 80, 80, 80];

  //  var context2 = wx.createCanvasContext('Canvas2');

  //  var total = 0;

  //  for (var val = 0; val < array.length; val++) {

  //    total += array[val];

  //  }

  //  for (var i = 0; i < array.length; i++) {

  //    context2.beginPath();

  //    var start = 0;

  //    if (i > 0) {

  //      for (var j = 0; j < i; j++) {

  //        start += array[j] / total * 2 * Math.PI;

  //      }

  //    }

  //    context2.arc(point.x, point.y, radius2[i], start, start + array[i] / total * 2 * Math.PI, false);

  //    context2.setLineWidth(1)

  //    context2.lineTo(point.x, point.y);

  //    context2.setStrokeStyle('#333333');

  //    context2.setFillStyle('#fff');

  //    context2.fill();

  //    context2.closePath();

  //    context2.stroke();

  //  }

  //  context2.draw();

  //  var radius3 = [70, 50, 70, 80, 40, 60, 50, 30];

  //  var context3 = wx.createCanvasContext('Canvas3');

  //  var total = 0;

  //  for (var val = 0; val < array.length; val++) {

  //    total += array[val];

  //  }

  //  for (var i = 0; i < array.length; i++) {

  //    context3.beginPath();

  //    var start = 0;

  //    if (i > 0) {

  //      for (var j = 0; j < i; j++) {

  //        start += array[j] / total * 2 * Math.PI;

  //      }

  //    }

  //    context3.arc(point.x, point.y, radius3[i], start, start + array[i] / total * 2 * Math.PI, false);

  //    context3.setLineWidth(1)

  //    context3.lineTo(point.x, point.y);

  //    context3.setStrokeStyle('#333333');

  //    context3.setFillStyle(colors[i]);

  //    context3.fill();

  //    context3.closePath();

  //    context3.stroke();

 

 

 

  //  var edge = radius[i]+20 ;

  //    /*x轴方向的直角边*/

  //    var edgeX = Math.cos(start + (array[i] / total * 2 * Math.PI)/2) * edge;

  //    /*y轴方向的直角边*/

  //    var edgeY = Math.sin(start + (array[i] / total * 2 * Math.PI) / 2) * edge;

  //    var outX = point.x + edgeX;

  //    var outY = point.y + edgeY+10;

  //    context3.beginPath();

  //    // context3.moveTo(point.x, point.y);

  //    // context3.lineTo(outX, outY);

  //    // context3.strokeStyle = colors[i];

  //    /*画文字和下划线*/

  //    /*线的方向怎么判断 伸出去的点在X0的左边 线的方向就是左边*/

  //    /*线的方向怎么判断 伸出去的点在X0的右边 线的方向就是右边*/

  //    /*结束的点坐标  和文字大小*/

  //    context3.font = "14rpx Microsoft YaHei";

  //    const metrics = context3.measureText(radius3[i]);

  //    var textWidth = metrics.width;

  //    if (outX > point.x) {

  //      /*右*/

  //      context3.lineTo(outX + textWidth, outY);

  //      context3.textAlign = 'left';

  //    } else {

  //      /*左*/

  //      context3.lineTo(outX - textWidth, outY);

  //      context3.textAlign = 'right';

  //    }

  //    context3.stroke();

  //    context3.textBaseline = 'bottom';

  //    context3.fillText(radius3[i], outX, outY);

  //    // context3.fillRect(space, space + i * (rectH + 10), rectW, rectH);

  //    // /*绘制文字*/

  //    // context3.beginPath();

  //    // context3.textAlign = 'left';

  //    // context3.textBaseline = 'top';

  //    // context3.font = '12px Microsoft YaHei';

  //    // context3.fillText(arraystr[i], space + rectW + 10, space + i * (rectH + 10));

  //  }

  //  context3.draw();

.wxml

<!-- <canvas canvas-id="Canvas1" style="width: 400px; height: 400px;">

          <canvas canvas-id="Canvas2" style="width: 400px; height: 400px;">

            <canvas canvas-id="Canvas3" style="width: 400px; height: 400px;">

            </canvas>

          </canvas>

        </canvas> -->

 

 

 

在此作为记录  下次好用，有大佬有更好的方法  希望能够提出，万谢！！！