微信小程序canvas 画动态圆环百分比进度条实例 根据手机屏
2018-09-29 本文已影响0人
凉介Seven
image.png
这里是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>
</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
});
}
});
}
});
