今天项目有个需求，发过来瞅了一眼，尼玛哦，这尼玛是画的吧，画的吧！！！（图1）
赶紧百度一波 ，没有。。。没有。。。没有。。。擦嘞 要哭惹 ，百度h5的 有个看起来很舒的
https://blog.csdn.net/Welkin_qing/article/details/84592210
还好看的懂h5 但是差距还是很大 emmmmm 最终我放弃写成一摸一样了 结果 如： （图二）
图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代码
.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> -->
在此作为记录 下次好用，有大佬有更好的方法 希望能够提出，万谢！！！
