微信小程序之环形图

HTML

<view class = "page">
	<view style="width:350rpx;height:280rpx;border:1rpx solid #f40;">
		<image wx:if="{
   {imgUrl}}" src="{
   {imgUrl}}" style="width:350rpx;height:280rpx;"></image>
		<canvas wx:else canvas-id="annular-pie" ec="{
   {pie}}" style="width:350rpx;height:280rpx;"></canvas>
	</view>
</view>

JS

// components/rprogress/rprogress.js
Component({
   
  /**
   * 组件的属性列表
   */
  properties: {
   
    setdata: {
   
      type: Object, //类型
      value: {
   
        totalItems: 600,
        rightItems: [150, 200, 250],
        text: ["一级", "二级", "三级"],
        color: [
          ['#308347', '#00D3AC'],
          ['#F5AE8C', '#FFA600'],
          ['#FF4C6A', '#D42900']
        ],
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
   
    width: '',
    r: 80,
    lineWidth: 40,
    fontSize: "20"
  },
  ready: function () {
   
    //获取屏幕的宽度
    let that = this;
    wx.getSystemInfo({
   
      success: function (res) {
   
        that.setData({
   
          windowWidth: res.windowWidth,
        })
      }
    })
    // 页面初始化 options为页面跳转所带来的参数
    let totalItems = that.data.setdata.totalItems;
    let rightItems = that.data.setdata.rightItems;
    that.showScoreAnimation(rightItems, totalItems);
  },


  /**
   * 组件的方法列表
   */
  methods: {
   
    showScoreAnimation: function (rightItems, totalItems) {
   
      let that = this;
      // 页面渲染完成
      // 这部分是灰色底层
      //圆
      let cxt_arc = wx.createCanvasContext('annular-pie', this