微信小程式canvas 畫動態圓環百分比進度條例項 根據手機螢幕寬度自適應放大縮小
阿新 • • 發佈：2019-01-02
這裡是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;"> 這裡是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
});
}
});
}
});