微信小程序手写饼状图，非wx-echarts库，简洁易懂，不占代码体积！！！

写在前面：小程序也有echarts组件库，但是我觉得太占代码量了，本来小程序的体积只有2m。在下载个组件库。那就没多少了。索性就手写一个。
实现效果：

布局

<view class="left">
	<cover-view class="white"></cover-view>
	<canvas style="width: 136px; height: 136px;" canvas-id="Canvas"></canvas>
</view>

样式

page {
	width: 100%;
	height: 100%;
}
 
.left {
	width: 300rpx;
	height: 300rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
 
.white {
	width: 136rpx;
	height: 136rpx;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 10;
	background-color: #fff;
	transform: translate(-50%, -50%);
}

实现效果

Page({
 
	/**
	 * 页面的初始数据
	 */
	data: {
		messarr: [{
				color: '#464af8',
				num: '20',
				flownum: '20',
			},
			{
				color: '#ff6262',
				num: '50',
				flownum: '50',
			},
			{
				color: '#f7c11b',
				num: '60',
				flownum: '60',
			},
			{
				color: '#ff8015',
				num: '80',
				flownum: '80',
			},
			{
				color: '#17d0bc',
				num: '20',
				flownum: '20',
			}
		]
	},
 
	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function(options) {
 
	},
 
	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady: function() {
      // 初始化
		const ctx = wx.createCanvasContext('Canvas');
		// 设置圆点 x  y   中心点
		let number = {
			x: 68,
			y: 68
		};
		// 获取数据 各类项的个数
		let term = this.data.messarr;
		let termarr = [];
		for (let t = 0; t < term.length; t++) {
			// flownum
			let thisterm = Number(term[t].flownum)
			let thiscolor = term[t].color
			termarr.push({
				data: thisterm,
				color: thiscolor
			})
		}
		console.log(termarr)
		// 设置总数
		let sign = 0;
		for (var s = 0; s < termarr.length; s++) {
			sign += termarr[s].data
		}
		//设置半径 
		let radius = 60;
		for (var i = 0; i < termarr.length; i++) {
			var start = 0;
			// 开始绘制
			ctx.beginPath()
			if (i > 0) {
				for (var j = 0; j < i; j++) {
					start += termarr[j].data / sign * 2 * Math.PI
				}
			}
			var end = start + termarr[i].data / sign * 2 * Math.PI
			ctx.arc(number.x, number.y, radius, start, end);
			ctx.setLineWidth(1);
			ctx.lineTo(number.x, number.y);
			ctx.setStrokeStyle('#fff');
			ctx.setFillStyle(termarr[i].color);
			ctx.fill();
			ctx.closePath();
			ctx.stroke();
		}
		ctx.draw()
	},
 
})

---

码字不易，在线求个三连支持。

大家记得收藏前，先点个赞哦！好的文章值得被更多人看到。

关注江哥不迷路，带你编程上高速。

微信公众号关注：江小鱼吧 免费领取高级前端学习资料，转身涨薪20K

支付宝生态技术学习交流群：
加入Q群与更多BAT一线大佬深度交流：1136157571 （点我入群）

---