Progression du tableau de bord de l'applet WeChat avec composant d'échelle

Voyons d'abord l'effet :

Appliquer en 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"
  />

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

Composants de référence dans json

  "usingComponents": {

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

  }

Les fichiers source des composants peuvent être téléchargés par eux-mêmes :  

Téléchargement du composant de progression