知识点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_VALUE1this.precents1 = res.data.data[0].KPI_VALUE2} catch (error) {console.log('**** indicator has error', error)}}}) 
}