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

先来看一下效果：

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" }

组件源文件可自行下载：