需求:数据驱动图表渲染,先看效果图
我们知道,微信小程序中是没有图表组件的,使用echarts也会有很多问题,比如echarts的图表总是在屏幕最上层,也就是说,会在导航栏和菜单栏上方,这当然不是我们想要的,所以只能自己画一个。在这里我选择用canvas画。
首先画一组图表,数据由data驱动
-
wxml部分
<view class="section flex"> <view class='circleBar' bindtap="toModalDetail"> <view class="wrap"> <view class="top"> <canvas class="cir" style=' width:106px; height:106px;' canvas-id="leak"></canvas> <view class="centerWord-num">{ {resultComment}}</view> <view class="centerWord">漏接量</view> </view> </view> </view> <view class='circleBar' bindtap="toModalDetail"> <view class="wrap"> <view class="top"> <canvas class="cir" style=' width:106px; height:106px;' canvas-id="businessbanli"></canvas> <view class="centerWord-num-business">{ {resultCommentbusiness}}</view> <view class="centerWord-business">业务办理量</view> </view> </view> </view>
-
wxss部分
.circleBar { margin:50rpx; width: 250rpx; height: 250rpx; overflow: hidden; position: relative; } .cir { display: inline-block; background-color: #fff; border-radius: 100%; } .top { text-align: left; } .centerWord-num,.centerWord,.centerWord-num-business,.centerWord-business{ width: 100%; position: absolute; left: -15rpx; text-align: center; } .centerWord-num{ top: 30px; color: #3686ff; } .centerWord { top: 60px; color: #3686ff; } .centerWord-num-business{ top: 30px; color: #FFD395; } .centerWord-business { top: 60px; color: #FFD395; }
-
js部分
Page({ data: { timer: '', timerbusiness:'' }, onLoad: function(options) { let that = this; // 以下两个是项目监控测试数据 let totalItems = 100; let leakItems = 80; let businessItems=30; let completePercent = parseInt((leakItems / totalItems) * 100); let completePercentbusiness = parseInt((businessItems / totalItems) * 100); that.getResultComment(completePercent); that.getResultCommentbusiness(completePercentbusiness); that.showScoreAnimation(leakItems, totalItems); that.showScoreAnimationbusiness(businessItems, totalItems); }, showScoreAnimation: function (leakItems, totalItems) { let that = this; let copyleakItems = 0; that.setData({ timer: setInterval(function () { copyleakItems++; if (copyleakItems == leakItems) { clearInterval(that.data.timer) } else { // 页面渲染完成 // 这部分是灰色底层 let cxt_arc = wx.createCanvasContext('leak');//创建并返回绘图上下文context对象。 cxt_arc.setLineWidth(6);//绘线的宽度 cxt_arc.setStrokeStyle('#fff');//绘线的颜色 cxt_arc.setLineCap('round');//线条端点样式 cxt_arc.beginPath();//开始一个新的路径 cxt_arc.arc(53, 53, 50, 0, 2 * Math.PI, false);//设置一个原点(53,53),半径为50的圆的路径到当前路径 cxt_arc.stroke();//对当前路径进行描边 //这部分是蓝色部分 cxt_arc.setLineWidth(6); cxt_arc.setStrokeStyle('#3ea6ff'); cxt_arc.setLineCap('round') cxt_arc.beginPath();//开始一个新的路径 cxt_arc.arc(53, 53, 50, -Math.PI * 1 / 2, 2 * Math.PI * (copyleakItems / totalItems) - Math.PI *