Progresso do painel do miniaplicativo WeChat com componente de escala

Vamos dar uma olhada no efeito primeiro:

Aplicar em 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 configuração

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

Componentes de referência em json

  "usandoComponentes": {

    "progresso":"../../../../componentes/progresso/progresso"

  }

Os arquivos de origem do componente podem ser baixados por si mesmos:  

Download do componente de progresso