siyu_app/pages_watch/components/myRing/myRing.vue

<template>
	<view>
		<canvas :style="{width: canvasWidth + 'px',height:canvasHeight + 'px'}" canvas-id="homeownerCanvas"
			class="homeowner-canvas_charts" @error="canvasIdErrorCallback"></canvas>
	</view>
</template>

<script>
	export default {
		name: "myRing",
		props: ['info'],
		data() {
			return {
				ctx: null,
				canvasWidth: uni.upx2px(208),
				canvasHeight: uni.upx2px(208),
				radius: uni.upx2px(80),
				list: [{
						color2: "#EEDFFB",
						color1: "#8C37E6",
						val: 0,
						title: "深睡",
					},
					{
						color2: "#F6D6F5",
						color1: "#D138CF",
						val: 0,
						title: "浅睡",
					},
					{
						color2: "#FDDFE0",
						color1: "#F88082",
						val: 0,
						title: "快速眼动",
					},
					{
						color2: "#FEDE93",
						color1: "#FDBD27",
						val: 0,
						title: "清醒",
					},
				],
			}
		},
		methods: {
			initData() {
				const sum = (Number(this.info.deepPre || 0) + Number(this.info.lightPre || 0) + Number(this.info.eyemovePre || 0) + Number(this.info.weakPre || 0)).toFixed(0)
				this.list[0].val = sum == 0 ? 0 : (Number(this.info.deepPre || 0) / sum).toFixed(2)
				this.list[1].val = sum == 0 ? 0 : (Number(this.info.lightPre || 0) / sum).toFixed(2)
				this.list[2].val = sum == 0 ? 0 : (Number(this.info.eyemovePre || 0) / sum).toFixed(2)
				this.list[3].val = sum == 0 ? 0 : (Number(this.info.weakPre || 0) / sum).toFixed(2)
				this.initCanvas('homeownerCanvas', this.list)
			},
			initCanvas(canvasID, data) {
				this.ctx = uni.createCanvasContext(canvasID, this)
				// 定义圆环的属性
				const centerX = this.canvasWidth / 2; // 圆心的x坐标
				const centerY = this.canvasHeight / 2; // 圆心的y坐标
				const radius = uni.upx2px(80); // 圆环的半径
				const lineWidth = uni.upx2px(28); // 圆环的宽度
				let tempAngle = 0;
				this.ctx.beginPath();
				this.ctx.arc(centerX, centerY, radius,0, Math.PI*2);
				this.ctx.setStrokeStyle("#eee");
				this.ctx.setLineWidth(lineWidth);
				this.ctx.stroke();
				for (let i = 0; i < data.length; i++) {
					//计算当前扇形角度   所占比例*360
					let angle = data[i].val * 360;
					//当前扇形起始绘制弧度   360 = 2π  等于6.28
					let startAngle = tempAngle * Math.PI / 180;
					//当前扇形借结束绘制弧度
					let endAngle = (tempAngle + angle) * Math.PI / 180;
					// 开始绘制第二条路径 成交 橘色
					this.ctx.beginPath();
					// this.ctx.setLineJoin('miter');
					this.ctx.setLineCap('round')
					this.ctx.arc(centerX, centerY, radius,startAngle-(Math.PI / 2), endAngle-(Math.PI / 2));
					// centerX - radius - lineWidth, centerY,centerX + radius + lineWidth,centerY
					let gradient = this.ctx.createLinearGradient(centerX, centerY - radius,centerX,centerY +radius);
					gradient.addColorStop(0, data[i].color2);
					gradient.addColorStop(1, data[i].color1);
					// this.ctx.setStrokeStyle(gradient);
					this.ctx.setStrokeStyle(data[i].color1);
					this.ctx.setLineWidth(lineWidth);
					this.ctx.stroke();
					//当前扇形结束绘制角度，即下一个扇形开始绘制角度
					tempAngle += angle; 
				}
				
				this.ctx.setFillStyle("#757575");
				this.ctx.setFontSize(uni.upx2px(28));
				this.ctx.setTextAlign("center");
				this.ctx.setTextBaseline("middle");
				this.ctx.fillText("睡眠", uni.upx2px(104), uni.upx2px(88));
				this.ctx.fillText("比例", uni.upx2px(104), uni.upx2px(124));
				this.ctx.stroke();
				this.ctx.draw();
			},
			canvasIdErrorCallback: function(e) {
				console.error(e.detail.errMsg)
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.homeowner-canvas_charts {
		// transform: rotate(-90deg);
	}
</style>