效果圖：

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

?

轉載于:https://www.cnblogs.com/caoxueying2018/p/9871408.html

總結

以上是生活随笔為你收集整理的知识点1: 进度条随数据变化，并添加渐变样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。