微信小程序canvas 画动态圆环百分比进度条实例 根据手机屏幕宽度自适应放大缩小
2018-01-29 15:23
846 查看
这里是wxml代码:
<component-analysis-report active="0" bindselectReport="selectReport"></component-analysis-report> <component-no-data text="小喜正在统计中,敬请期待噢~" wx:if="{{!params.allAmount}}"></component-no-data> <view class="wrap" hidden="{{!params.allAmount}}"> <!-- <view class="top" style="z-index:1;">{{reportName}}询盘统计报告</view> --> <view class="circle"> <canvas class="more" canvas-id="canvasCircles"></canvas> <canvas class="more" canvas-id="canvasCircle"></canvas> <canvas class="more" canvas-id="canvasArcCir"></canvas> <view class="more circles" wx:if="{{current==0}}"> <view> <view class="circleone"> <text>{{params.gmvPercent}}</text> % </view> <view class="circletwo">成交占比</view> </view> </view> <!-- <view class="more circles" wx:if="{{current==1}}"> <view> <view class="circleone"> <text>{{params.effectivePercent}}</text> % </view> <view class="circletwo">有效询盘占比</view> </view> </view> --> <!-- <view class="more circles bottom" wx:if="{{current==0}}"> <view class="ONE"></view> <view class="TWO"></view> </view> <view class="more circles bottom" wx:if="{{current==1}}"> <view class="TWO"></view> <view class="ONE"></view> </view> --> </view> <swiper class="circle-box" bindchange="currentChange"> <block> <swiper-item> </swiper-item> <!-- <swiper-item> </swiper-item> --> </block> </swiper> <view class="mainS"> <view class="deal" wx:if="{{current==0}}"> <view class="block"> <view class="pic"> <image src="{{images.totalValue}}" /> </view> <view class="name"> {{enquireName.totalValue}} </view> <view class="prc">¥{{params.allAmount}}</view> <view class="num">{{params.allAmountCount}} 笔</view> < 12c96 /view> <view class="block"> <view class="pic"> <image src="{{images.tranValue}}" /> </view> <view class="name"> {{enquireName.tranValue}} </view> <view class="prc">¥{{params.gmvAmount}}</view> <view class="num">{{params.gmvAmountCount}} 笔</view> </view> <view class="block"> <view class="pic"> <image src="{{images.enquireValue}}" /> </view> <view class="name"> {{enquireName.enquireValue}} </view> <view class="prc">¥{{params.followAmount}}</view> <view class="num">{{params.followAmountCount}} 笔</view> </view> <view class="block"> <view class="pic"> <image src="{{images.lossCount}}" /> </view> <view class="name"> {{enquireName.lossValue}} </view> <view class="prc"> ¥{{params.lossAmount}} </view> <view class="num">{{params.lossAmountCount}} 笔</view> </view> <view class="block"> <view class="pic"> <image src="{{images.gmvCount}}" /> </view> <view class="name"> {{enquireName.gmvCount}} </view> <view class="prc"> {{params.effective}}次</view> <view class="num"></view> </view> </view> <!-- <view class="loss" wx:if="{{current==1}}"> <view class="block"> <view class="pic"> <image src="{{images.allCount}}" /> </view> <view class="name"> {{enquireName.allCount}} </view> <view class="prc"></view> <view class="num red">{{params.enquiryCount}}</view> </view> <view class="block"> <view class="pic"> <image src="{{images.gmvCount}}" /> </view> <view class="name">{{enquireName.gmvCount}} </view> <view class="prc"></view> <view class="num red">{{params.effective}}</view> </view> <view class="block"> <view class="pic"> <image src="{{images.lossCount}}" /> </view> <view class="name"> {{enquireName.lossCount}} </view> <view class="prc"></view> <view class="num red">{{params.garbage}}</view> </view> </view> --> </view> </view>
这里是wxss代码:
.wrap { /* width: 100%; */ /* margin-top: 71rpx; */ height: 100%; position: relative; font-size: 28rpx; } .circle-box { height: 500rpx; text-align: center; color: #fff; border-color: #55abf6; background-image: linear-gradient(165deg, #52a6db 0%, #6382d2 100%); } .top { position: absolute; top: 24rpx; width: 100%; height: 46rpx; line-height: 46rpx; font-size: 28rpx; color: #ffffff; letter-spacing: 0; text-align: center; } .circle { width: 380rpx; position: relative; margin: auto; top: 30rpx; } .more { width: 380rpx; height: 380rpx; position: absolute; right: 0; } .circles { width: 380rpx; height: 380rpx; color: #ffffff; font-size: 24rpx; display: flex; justify-content: center; align-items: center; text-align: center; } .circleone { font-size: 36rpx; } .circleone text { font-size: 80rpx; } .circletwo{ opacity: 0.64; } .bottom { height:430rpx; justify-content: center; align-items: flex-end; } .bottom .ONE { width: 60rpx; height: 8rpx; background: #ffffff; margin: 5rpx; border-radius: 2rpx; } .bottom .TWO { width: 60rpx; height: 8rpx; background: #ffffff; margin: 5rpx; opacity: 0.3; border-radius: 2rpx; } .deal, .loss { height: auto; margin: -90rpx 24rpx 30rpx; } .block { height: 142rpx; /* box-shadow: 3px 3px 3px #eeeeee; */ background: #ffffff; margin-bottom: 12rpx; /* border: 1rpx solid #e0e0e0; */ display: flex; align-items: center; padding: 0 54rpx; box-shadow: 9rpx 9rpx 8rpx 0 rgba(168, 168, 169, 0.31); border-radius: 6rpx; text-align: center; } .block .name { flex: 1; } .block .prc { flex: 1.5; font-size: 32rpx; color: #CB2B2B; } .block .num { flex: 1; color: #999999; } .block .pic { width: 50rpx; height: 50rpx; margin-right: 20rpx; } .block .red { color: #CB2B2B; }
这里是js代码:
var app = getApp(); var interval; var varName; var ctx = wx.createCanvasContext('canvasArcCir'); Page({ data: { params: { allAmount: '', allAmountCount: '', effective: '', effectivePercent: '', enquiryCount: '', followAmount: '', followAmountCount: '', garbage: '', gmvAmount: '', gmvAmountCount: '', gmvPercent: '', lossAmount: '', lossAmountCount: '' }, images: { totalValue: app.CDN + 'enquiry_1.png', tranValue: app.CDN + 'enquiry_2.png', enquireValue: app.CDN + 'enquiry_3.png', lossValue: app.CDN + 'enquiry_4.png', allCount: app.CDN + 'enquiry_count.png', gmvCount: app.CDN + 'enquiry_success.png', lossCount: app.CDN + 'enquiry_loss.png' }, enquireName: { totalValue: '总金额', enquireValue: '跟单金额', tranValue: '成交金额', lossValue: '流失金额', allCount: '询盘总次数', gmvCount: '有效询盘', lossCount: '垃圾询盘' }, enquireuse: { totalValue: '询盘总次数', enquireValue: '垃圾询盘', tranValue: '有效询盘' }, reportId: 1, reportName: '2018年1月', current: 0, // 自定义canvas缩放比例 width: 190, height: 190, r: 100, r1: 80, r2: 92 }, //选择传入reportId selectReport(e) { this.setData({ reportId: e.detail.params.reportId, reportName: e.detail.params.reportName }); wx.setNavigationBarTitle({ title: e.detail.params.reportName + '询盘分析报告' }); this.getList(); // console.log(e.detail.params.reportId, e.detail.params.reportName); }, //获取分析报告列表 getList() { if (wx.showLoading) { wx.showLoading({ title: '加载中...' }); } app .get('/report/detail', { reportId: this.data.reportId }) .then(e => { if (wx.hideLoading) { wx.hideLoading(); } this.setData({ params: e.data }); this.drawCircle(); }) .catch(res => { if (wx.hideLoading) { wx.hideLoading(); } console.log(res); }); }, drawCircle: function() { let that = this; //进度条 var cxt_arc = wx.createCanvasContext('canvasCircle'); cxt_arc.setLineWidth(6); cxt_arc.setStrokeStyle('#81C6F6'); cxt_arc.setLineCap('round'); cxt_arc.beginPath(); cxt_arc.arc(that.data.r, that.data.r, that.data.r1, 0, 2 * Math.PI, false); cxt_arc.stroke(); cxt_arc.draw(); // 外线 var cxt_arcs = wx.createCanvasContext('canvasCircles'); cxt_arcs.setLineWidth(0.3); cxt_arcs.setStrokeStyle('rgba(255, 255, 255, 0.2)'); cxt_arcs.setLineCap('round'); cxt_arcs.beginPath(); cxt_arcs.arc(that.data.r, that.data.r, that.data.r2, 0, 2 * Math.PI, false); cxt_arcs.stroke(); cxt_arcs.draw(); // 百分比 clearInterval(varName); function drawArc(s, e) { ctx.setFillStyle('white'); ctx.clearRect(0, 0, 2 * that.data.r, 2 * that.data.r); ctx.draw(); var x = that.data.r, y = that.data.r, radius = that.data.r1; ctx.setLineWidth(5); ctx.setStrokeStyle('#76FBF6'); ctx.setLineCap('round'); ctx.beginPath(); ctx.arc(x, y, radius, s, e, false); ctx.stroke(); ctx.draw(); } var step = 1, startAngle = 1.5 * Math.PI, endAngle = 0; var animation_interval = 10, n = 60; let a = 0; if (this.data.current == 0) { console.log(this.data.params); console.log(this.data.params.gmvPercent); a = this.data.params.gmvPercent / 100; // a = 0.02 / 100; } else { a = this.data.params.effectivePercent / 100; } var animation = function() { if (step <= n) { endAngle = step * a * 2 * Math.PI / n + 1.5 * Math.PI; drawArc(startAngle, endAngle); step++; } else { clearInterval(varName); } }; varName = setInterval(animation, animation_interval); }, // SWIPER currentChange: function(e) { this.setData({ current: e.detail.current }); this.drawCircle(); }, onReady: function() { // this.drawCircle(); }, onLoad: function(options) { let that = this; wx.getSystemInfo({ //获取系统信息成功,将系统窗口的宽高赋给页面的宽高 success: function(res) { var widths = res.windowWidth; var heights = res.windowHeight; that.setData({ width: 190 / 414 * widths, height: 190 / 414 * heights, r: 100 / 414 * widths, r1: 80 / 414 * widths, r2: 92 / 414 * widths }); } }); } });
相关文章推荐
- canvas绘制圆环百分比进度的动态效果
- iOS 中根据屏幕宽度自适应分布按钮的实例代码
- 微信小程序 动态的设置图片的高度和宽度详解及实例代码
- H5动画,canvas绘制圆环百分比进度的动态效果
- H5动画,canvas绘制圆环百分比进度的动态效果
- 移动页面HTML5自适应手机屏幕宽度
- 【微信小程序】canvas-eharts 微信小程序的动态图表
- HTML5 移动页面自适应手机屏幕宽度详解
- 微信小程序实现image组件图片自适应宽度比例显示的方法
- 根据屏幕的宽度,动态设置控件高度
- 微信小程序例子——获取手机屏幕亮度
- 手机网页宽度自适应屏幕宽度的方法
- 根据屏幕分辨率放大缩小图片
- 微信小程序swiper组件实现图片宽度自适应
- iOS 根据屏幕宽度自适应分布按钮
- 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )
- 微信小程序图片等比例缩放 动态的获取图片的高度和宽度 动态的设置图片的高度和宽度
- 如何让网页适应所有的屏幕宽度+表格根据内容自适应
- css实现div高度根据自适应宽度(百分比)调整
- 移动页面自适应手机屏幕宽度