知識點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)}}}) 
}

?