微信小程序循环渲染canvas动态图表

需求：数据驱动图表渲染，先看效果图

我们知道，微信小程序中是没有图表组件的，使用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