微信小程序仪表盘进度带刻度组件

先来看一下效果：

wxml中应用：

<progress 
      height="750" 
      r="110" 
      bgWidth="13"
      gaugeid="g1"
      animateMsec="700" 
      scaleTextStyle="{{scaleTextStyle}}" 
      indicatorTextStyle='{{indicatorTextStyle}}'
      indicatorValueStyle='{{indicatorValueStyle}}'
      indicatorCircleStyle='{{indicatorCircleStyle}}'
      indicatorBgColor="#01CDA8"
      min="0"
      max="100"
      value="60"
  />

 js中配置

  data: {
   
    scaleTextStyle:{
      show:true,
      size:12,
      color:'#01CDA8'
    },
    indicatorTextStyle:{
      show:true,
      size:16,
      text:'身体质量等级'
    },
    indicatorValueStyle: {
      show: true,
      size: 55,
      color:'#01CDA8'
    },
    indicatorCircleStyle:{
      show:true,
      boderColor:[
        {
          progress:0,
          value:"#01CDA8"
       },
        {
          progress: 1,
          value: "#fff"
        }
      ]
    }
  },

json中引用组件

  "usingComponents": {

    "progress":"../../../../components/progress/progress"

  }

组件源文件可自行下载：  

Progress组件下载