沧浪网站建设方案,网站建设实践心得体会,建设一个网站需要那些技术,网页制作与网站建设作业需求#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来画圆具体使用canvas的属性大家可以到这个网站查看HTML5 Canvas | 菜鸟教程
但是有一点要注意的是canvas原生属性画图优先级是最高的且不受z-index等优先级属性控制所以可能会有一些优先级问题所以最后我把canvas绘出来的图形转成了图片显示在页面上这样就没有了优先级的问题。
实现代码
templateviewcanvas v-if!imgsrc idcanvas canvas-idcanvas stylewidth: 384px; height: 150px; /canvasimage v-ifimgsrc :srcimgsrc /image/view
/templatescriptexport 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 langscssimage{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
