效果图：

dom：

//　　进度条 　　　　　　 　　　　　　　
     
              
      
            
     
 　　　　　　　//　　数据容器            
     
              
                  
     

css:

.progress{      width: 50%;      position: absolute;      height: 10px;      background: linear-gradient(to right,rgb(31,107,169),rgb(167,132,252)); //线性渐变      border-radius: 5px;      left: 20%;      bottom: 22px;      transition: all 2s; //css动画          .point{              width: 10px;              height: 10px;              border-radius: 50%;              background: #fff;              border: 2px solid rgb(173,133,255);              box-sizing:content-box !important;              position: absolute;              top: -2px;              right: 0px;          }}

• js

export default{    computed:{      styleObj1(){        return{          width:`${this.precents1*3.1}px` //宽度变化        }      }    }}

//接数据 loaddata() {        this.$http.indi.get('sl0057', {}, res => {          if (res.data.data && res.data.data.length > 0) {            try {              this.totalvalue1 = res.data.data[0].KPI_VALUE1              this.precents1 = res.data.data[0].KPI_VALUE2            } catch (error) {              console.log('**** indicator has error', error)            }          }        }) }