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

思路：本来想用的是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 =thisvar 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);});