展示型手机网站模板下载,网站页面设计报价模板,深圳门户网站建设,东莞中小企业网站制作需求#xff1a;在小程序上实现数据可视化
思路#xff1a;本来想用的是echarts或者相关的可视化插件#xff0c;但因为用的是vue3#xff0c;大多数插件不支持#xff0c;所以用了echarts#xff0c;但最后打包的时候说包太大超过2M无法上传#xff0c;百度了一下在小程序上实现数据可视化
思路本来想用的是echarts或者相关的可视化插件但因为用的是vue3大多数插件不支持所以用了echarts但最后打包的时候说包太大超过2M无法上传百度了一下说包太大可以进行分包但是分包的时候还有很多条件例如tabbar必须在主包而且最重要的是主包还不能使用分包的资源那这样的话如果把echarts这个页面封装的页面放到分包里面那我主包就没法引用这个图表页面显示了所以分包是不现实的然而这一点是在我分完包之后才知道的所以这告诉我们无论使用什么新东西都要认真阅读文档读明白所有使用条件再决定是否可以使用分包实现不了最后只能放弃echarts转向用canvas绘图其实最开始也是考虑过使用canvas的但是因为canvas刚自己看了文档不久不太熟练而且也没太想好所以才用echarts的但最后还是回到了canvas上。
效果图 实现过程其实就是利用canvas 2d来画圆具体属性大家可以到这个网站查看HTML5 Canvas | 菜鸟教程
但是有一点要注意的是canvas原生属性画图优先级是最高的且不受z-index等优先级属性控制所以可能会有一些优先级问题所以最后我把canvas绘出来的图形转成了图片显示在页面上这样就没有了优先级的问题。
实现代码 canvas v-if!imgsrc idcanvas canvas-idcanvas stylewidth: 384px; height: 150px; /canvasimage v-ifimgsrc :srcimgsrc /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);});
