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

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

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

效果图：

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

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

实现代码：

<template><view><canvas v-if="!imgsrc" id="canvas" canvas-id="canvas" style="width: 384px; height: 150px;" ></canvas><image v-if="imgsrc" :src="imgsrc" ></image></view>
</template><script>export default {props:['data','num'],data() {return {imgsrc:''};},// 组件能被调用必须是组件的节点已经被渲染到页面上// 1、在页面mounted里调用，有时候mounted 组件也未必渲染完成created() {//这里的data就是我想展示的数据，其中data.total是总数，data.done是已使用数，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.beginPath(); ctx.setStrokeStyle('#6db500'); ctx.setLineCap('round'); // 设置圆环端点的形状-圆角ctx.arc(100, 80, 60, 0, end, false);ctx.stroke();ctx.draw(false,()=>{// 生成图片wx.canvasToTempFilePath({height: 150,canvasId: 'canvas',success: (res) => {that.imgsrc = res.tempFilePath},fail: (res) => {console.log(res);}},that);});}}
</script>
<style lang="scss">image{height: 125px;}.icon{display: inline-block;width: 12px;height: 12px;border-radius: 3px;background-color: #6db500;}.noicon{display: inline-block;width: 12px;height: 12px;border-radius: 3px;background-color: #ececec;}.text{font-size: 14px;font-weight: 400;position: absolute;top: 40%;right: 20%;}.all{font-size: 14px;font-weight: 500;padding-bottom: 6px;}
</style>

备注：环境是vue3，写的确实vue2的代码，这是为什么呢，因为创建模版的时候没有vue3的选项，以至于我没有注意到生成的是vue2的页面，导致我好多个页面都是vue2o(╥﹏╥)o