知识点1: 进度条随数据变化，并添加渐变样式

效果图：

dom：

            //　　进度条
　　　　　　
　　　　　　　<div class="progress" :style="styleObj1">
              <div class="point"></div>
            </div>

　　　　　　　//　　数据容器
            <div class="precent">
              <counter :data="precents1" :config="config2"></counter>
            </div>
    

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