uni-app canvas绘制动态数据圆环统计图表/进度条同理

uni-app canvas绘制动态数据圆环统计图表/进度条同理

初次使用uni开发小程序，感觉上手挺不错，但是有个图表需求，引用echarts库是第一反应,我又觉得这太麻烦了，就一个小圆饼图而已，但是自己canvas菜得一批，就去uni的插件市场去找，确实是有，但是一堆代码引进来也不安逸,索性自己就尝试来画，

话不多说，上效果图

分析：三类数据占比进行渲染一个圆环统计图，由于设计是这样，下面没有给出颜色与标签，

组件代码（修复更新-可以画多个圆环统计图）

注意：这里还是提醒一下刚用uni-app的小伙伴，这里的id是“canvas-id=‘’”

<template>
<view class="list">
	<canvas  v-for="(item,index) in list" :key="index" class="canvas" :canvas-id="item.canvas"></canvas>
</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					sum: 8,
					val: 0,
					valArr: 0,
					pre: 30,
					canvas: "myCanvas1",
					title: "视频学习",
				},
				{
					sum: 120,
					val: 0,
					pre: 30,
					valArr: 0,
					canvas: "myCanvas2",
					title: "模拟测试",
				},
				{
					sum: 100,// 总计
					val: 50,//实际值
					pre: 30,
					valArr: 0,
					canvas: "myCanvas3",
					title: "章节练习",
				},
			],
		};
	},
	onLoad: function () {
		this.getReport();
	},
	methods: {
		//学习报告
		getReport(id) {
			this.$nextTick(() => {
				for (let i = 0; i < this.list.length; i++) {
					this.Progressbar(this.list[i]);
				}
			});
		},
		Progressbar(canvas) {
			//根据后台获取到的数据计算比例
			let sum = canvas.sum == 0 ? 1 : canvas.sum; // 总计
			let newVal = parseFloat(((canvas.val / sum) * 100).toFixed(0)); //展示概率
			let val = parseFloat(((canvas.valArr / sum) * 2).toFixed(1)); //实际
			const ctx = uni.createCanvasContext(canvas.canvas); //拿到canvas对象（自己的定义的canvas-id）
			// 开始绘制第一条路径 总数 红色
			ctx.beginPath(); // 开始绘制路径
			ctx.arc(50, 50, 45, 0, 3 * Math.PI); // arc画圆
			ctx.setStrokeStyle("#f2f2f2"); // 线条颜色
			ctx.setLineWidth(5); // 线条宽度
			ctx.stroke(); // 绘制成线条（fill()是填充为饼图）
			// 开始绘制第二条路径 成交 橘色
			ctx.beginPath();
			ctx.arc(50, 50, 45, 0, val * Math.PI);
			ctx.setStrokeStyle("#ff7400");
			ctx.setLineWidth(5);
			ctx.stroke();
			// 填充字体-367
			ctx.setFillStyle("#FF7400");
			ctx.setFontSize(25);
			ctx.setTextAlign("center");
			ctx.fillText(newVal, 50, 60);
			ctx.stroke();
			// 填充字体-累计推荐
			ctx.setFillStyle("#FF7400");
			ctx.setFontSize(13);
			ctx.fillText("%", 70, 60);
			ctx.stroke();
			// 渲染
			ctx.draw();
			//绘制动画效果
			if (canvas.valArr < canvas.val) {
				canvas.valArr = canvas.valArr + 5;
				if (canvas.valArr > canvas.val) {
					canvas.valArr = canvas.val;
					return;
				}
			}
			if (canvas.valArr <= canvas.val) {
				setTimeout(() => {
					this.Progressbar(canvas);
				}, 20);
			}
		},
	},
};
</script>

<style lang="less">
.canvas {
	width: 100px;
	height: 100px;
}
</style>