小程序----使用图表显示数据--canvas

需求：在小程序上实现数据可视化

思路：本来想用的是echarts或者相关的可视化插件，但因为用的是vue3，大多数插件不支持，所以用了echarts，但最后打包的时候说包太大超过2M无法上传，百度了一下，说包太大可以进行分包，但是分包的时候还有很多条件，例如tabbar必须在主包，而且最重要的是主包还不能使用分包的资源，那这样的话，如果把echarts这个页面封装的页面放到分包里面，那我主包就没法引用这个图表页面显示了，所以分包是不现实的（然而这一点是在我分完包之后才知道的，所以这告诉我们，无论使用什么新东西都要认真阅读文档，读明白所有使用条件，再决定是否可以使用），分包实现不了，最后只能放弃echarts，转向用canvas绘图，其实最开始也是考虑过使用canvas的，但是因为canvas刚自己看了文档不久，不太熟练，而且也没太想好，所以才用echarts的，但最后还是回到了canvas上。

效果图：

实现过程：其实就是利用canvas 2d来画圆，具体属性大家可以到这个网站查看HTML5 Canvas | 菜鸟教程，

但是有一点要注意的是，canvas原生属性画图优先级是最高的，且不受z-index等优先级属性控制，所以可能会有一些优先级问题，所以最后我把canvas绘出来的图形转成了图片显示在页面上，这样就没有了优先级的问题。

实现代码：

复制代码

 <canvas v-if="!imgsrc" id="canvas" canvas-id="canvas" style="width: 384px; height: 150px;" ></canvas>
  <image v-if="imgsrc" :src="imgsrc" ></image>

	let that =this
			var ctx = uni.createCanvasContext('canvas', this);
			let end = (this.data.done / this.data.total ) * 2 * Math.PI; //设置弧度
			ctx.setLineWidth(12); // 设置圆环的宽度
			ctx.arc(100, 80, 60, 0, 2 * Math.PI)
			ctx.setStrokeStyle('#ececec');
			ctx.stroke(); //对当前路径进行描边
			// ctx.setLineCap('square'); // 设置圆环端点的形状  无圆角
			ctx.beginPath(); //开始一个新的路径
			ctx.setStrokeStyle('#6db500'); // 设置圆环的颜色
			ctx.setLineCap('round'); // 设置圆环端点的形状  圆角
			ctx.arc(100, 80, 60, 0, end, false);
			ctx.stroke(); //对当前路径进行描边
			//设置一个原点(110,110)，半径为100的圆的路径到当前路径
			ctx.stroke(); //对当前路径进行描边
			ctx.draw(false,()=>{
				// 生成图片
				wx.canvasToTempFilePath({
				  height: 150,
				  canvasId: 'canvas',
				  success: (res) => {
					  that.imgsrc = res.tempFilePath
				  },
				  fail: (res) => {
				    console.log(res);
				  }
				},that);
			});