微信小程序canvas 画动态圆环百分比进度条实例 根据手机屏幕宽度自适应放大缩小

这里是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
        });
      }
    });
  }
});