Vue中使用js制作進(jìn)度條式數(shù)據(jù)對(duì)比動(dòng)畫
更新時(shí)間：2022年03月27日 14:10:20 作者：doit_damao
這篇文章主要為大家詳細(xì)介紹了Vue中使用js制作進(jìn)度條式數(shù)據(jù)對(duì)比動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue中使用js制作進(jìn)度條式數(shù)據(jù)對(duì)比動(dòng)畫的具體代碼，供大家參考，具體內(nèi)容如下
實(shí)現(xiàn)的效果：(初始化以及瀏覽器resize的時(shí)候兩側(cè)的條形為向兩側(cè)遞增的動(dòng)畫，其中兩端的數(shù)字也是遞增的動(dòng)畫)
HTML部分：
<div class="no-ivatargo-chart-b">
? <div class="investment-ability">
? ? <div class="title">
? ? ? <span>您的投資能力分析</span>
? ? </div>
? ? <div class="investment-ability-picture-outer-container">
? ? ? <div class="investment-ability-picture-container">
? ? ? ? <div class="investment-ability-picture-header"
? ? ? ? ? ? ?ref="allLine">
? ? ? ? ? <span>我</span>
? ? ? ? ? <span>平均</span>
? ? ? ? </div>
? ? ? ? <div class="investment-ability-picture"
? ? ? ? ? ? ?v-for="(item, index) in abilityArr"
? ? ? ? ? ? ?:key="index">
? ? ? ? ? <div class="investment-ability-picture-top">
? ? ? ? ? ? <div class="investment-left">
? ? ? ? ? ? ? <div class="left-icon-outer">
? ? ? ? ? ? ? ? <div class="left-icon-inner"></div>
? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? <span>{{item.title}}</span>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="investment-right">
? ? ? ? ? ? ? <div class="investment-info">
? ? ? ? ? ? ? ? <span class="my-color">{{item.score | scoreFilter}}</span>
? ? ? ? ? ? ? ? <div class="all-line">
? ? ? ? ? ? ? ? ? <div class="my-line"
? ? ? ? ? ? ? ? ? ? ? ?:style="{'width': item.myWidth}"></div>
? ? ? ? ? ? ? ? ? <div class="other-line"
? ? ? ? ? ? ? ? ? ? ? ?:style="{'width': item.averageWidth}"></div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <span class="average-color">{{item.average | scoreFilter}}</span>
? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? ? <div class="investment-ability-picture-footer">
? ? ? ? ? <span>100</span>
? ? ? ? ? <span>0</span>
? ? ? ? ? <span>100</span>
? ? ? ? </div>
? ? ? </div>
? ? </div>
? </div>
</div>filters: {
? scoreFilter (val) {
? ? if (!isNaN(val)) {
? ? ? return Number(val) < 10 ? `0${parseInt(val)}` : parseInt(val)
? ? } else {
? ? ? return ''
? ? }
? }
}CSS部分：
.no-ivatargo-chart-b {
? width: 100%;
? overflow: hidden;
? display: flex;
? flex-direction: column;
? font-size: 14.76px;
? color: #bfbfbf;
? background-color: #0f1318;
? .title {
? ? display: flex;
? ? align-items: center;
? ? font-size: 17.22px;
? ? color: #bfbfbf;
? ? margin-bottom: 15px;
? }
? .investment-ability-picture-header {
? ? width: 400px;
? ? margin-left: 130px;
? ? display: flex;
? ? align-items: center;
? ? justify-content: space-around;
? ? margin-bottom: 10px;
? ? color: #fff;
? }
? .investment-ability-picture-outer-container {
? ? display: flex;
? ? justify-content: center;
? ? align-items: center;
? ? height: calc(100% - 50px);
? ? .investment-ability-picture-container {
? ? ? display: flex;
? ? ? flex-direction: column;
? ? ? .investment-ability-picture {
? ? ? ? display: flex;
? ? ? ? flex-direction: column;
? ? ? ? margin-bottom: 10px;
? ? ? ? .investment-ability-picture-top {
? ? ? ? ? display: flex;
? ? ? ? ? .investment-left {
? ? ? ? ? ? font-size: 14.76px;
? ? ? ? ? ? color: #bfbfbf;
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? display: flex;
? ? ? ? ? ? align-items: center;
? ? ? ? ? ? .left-icon-outer {
? ? ? ? ? ? ? width: 14px;
? ? ? ? ? ? ? height: 14px;
? ? ? ? ? ? ? background-color: #3fb050;
? ? ? ? ? ? ? border-radius: 50%;
? ? ? ? ? ? ? position: relative;
? ? ? ? ? ? ? margin-right: 5px;
? ? ? ? ? ? ? .left-icon-inner {
? ? ? ? ? ? ? ? position: absolute;
? ? ? ? ? ? ? ? width: 5px;
? ? ? ? ? ? ? ? height: 5px;
? ? ? ? ? ? ? ? top: 50%;
? ? ? ? ? ? ? ? left: 50%;
? ? ? ? ? ? ? ? transform: translate(-50%, -50%);
? ? ? ? ? ? ? ? background-color: #fff;
? ? ? ? ? ? ? ? border-radius: 50%;
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? ? .investment-right {
? ? ? ? ? ? display: flex;
? ? ? ? ? ? align-items: center;
? ? ? ? ? ? justify-content: space-between;
? ? ? ? ? ? .investment-info {
? ? ? ? ? ? ? display: flex;
? ? ? ? ? ? ? align-items: center;
? ? ? ? ? ? ? justify-content: space-between;
? ? ? ? ? ? ? .all-line {
? ? ? ? ? ? ? ? width: 400px;
? ? ? ? ? ? ? ? height: 10px;
? ? ? ? ? ? ? ? background-color: #57606e;
? ? ? ? ? ? ? ? border-radius: 2px;
? ? ? ? ? ? ? ? margin-left: 10px;
? ? ? ? ? ? ? ? margin-right: 10px;
? ? ? ? ? ? ? ? position: relative;
? ? ? ? ? ? ? ? .my-line {
? ? ? ? ? ? ? ? ? width: 0;
? ? ? ? ? ? ? ? ? height: 10px;
? ? ? ? ? ? ? ? ? position: absolute;
? ? ? ? ? ? ? ? ? top: 0;
? ? ? ? ? ? ? ? ? right: 200px;
? ? ? ? ? ? ? ? ? background-color: #f5a623;
? ? ? ? ? ? ? ? ? border-top-left-radius: 2px;
? ? ? ? ? ? ? ? ? border-bottom-left-radius: 2px;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .other-line {
? ? ? ? ? ? ? ? ? width: 0;
? ? ? ? ? ? ? ? ? height: 10px;
? ? ? ? ? ? ? ? ? position: absolute;
? ? ? ? ? ? ? ? ? top: 0;
? ? ? ? ? ? ? ? ? left: 200px;
? ? ? ? ? ? ? ? ? background-color: #1890ff;
? ? ? ? ? ? ? ? ? border-top-right-radius: 2px;
? ? ? ? ? ? ? ? ? border-bottom-right-radius: 2px;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? }
? ? ? ? ? ? ? .my-color {
? ? ? ? ? ? ? ? width: 20px;
? ? ? ? ? ? ? ? color: #f5a623;
? ? ? ? ? ? ? }
? ? ? ? ? ? ? .average-color {
? ? ? ? ? ? ? ? width: 20px;
? ? ? ? ? ? ? ? color: #1890ff;
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? }
? ? ? ? .investment-ability-picture-bottom {
? ? ? ? ? display: flex;
? ? ? ? ? flex-direction: column;
? ? ? ? ? background-color: #ccc;
? ? ? ? ? width: 400px;
? ? ? ? ? margin-left: 130px;
? ? ? ? ? padding: 5px;
? ? ? ? ? color: #000;
? ? ? ? }
? ? ? }
? ? }
? }
? .investment-ability-picture-footer {
? ? width: 400px;
? ? margin-left: 130px;
? ? display: flex;
? ? align-items: center;
? ? justify-content: space-between;
? ? color: #fff;
? }
}JS部分：
1.子組件當(dāng)中
mounted () {
? let that = this
? window.onresize = () => {
? ? clearTimeout(that.resizeTimer)
? ? that.resizeTimer = setTimeout(() => {
? ? ? that.handleGetAllWidth()
? ? }, 1000)
? }
? this.$nextTick(() => {
? ? clearTimeout(this.resizeTimerB)
? ? this.resizeTimerB = setTimeout(() => {
? ? ? this.handleGetAllWidth()
? ? }, 200)
? })
}
?
// methods當(dāng)中
handleGetAllWidth () {
? this.$emit('getAllWidth', this.$refs.allLine.offsetWidth)
}2.父組件當(dāng)中
getAllLineWidth (data) {
? this.allLineWidth = data
? this.calculateIvatargo()
},
// 給條形圖添加計(jì)算寬度，并形成動(dòng)畫
calculateIvatargo () {
? this.myTimerArr.forEach((value, index) => {
? ? clearInterval(value)
? })
? this.averageTimerArr.forEach((value, index) => {
? ? clearInterval(value)
? })
? this.myTimerArr = []
? this.averageTimerArr = []
? let myVal = []
? let averageVal = []
? this.myAbilityArr.forEach((value, index) => {
? ? myVal[index] = 0
? ? averageVal[index] = 0
? ? this.myTimerArr[index] = setInterval(() => {
? ? ? if (myVal[index] > Number(this.allLineWidth) * Number(value.score) / 200 || !value.score) {
? ? ? ? clearInterval(this.myTimerArr[index])
? ? ? ? value.score ? myVal[index] = Number(this.allLineWidth) * Number(value.score) / 200 : myVal[index] = 0
? ? ? ? this.$set(value, 'myWidth', myVal[index] + 'px')
? ? ? ? this.$set(value, 'myNum', value.score)
? ? ? } else {
? ? ? ? myVal[index]++
? ? ? ? this.$set(value, 'myWidth', myVal[index] + 'px')
? ? ? ? this.$set(value, 'myNum', myVal[index] / 2)
? ? ? }
? ? }, 5)
? ? this.averageTimerArr[index] = setInterval(() => {
? ? ? if (averageVal[index] > Number(this.allLineWidth) * Number(value.average) / 200 || !value.average) {
? ? ? ? clearInterval(this.averageTimerArr[index])
? ? ? ? value.average ? averageVal[index] = Number(this.allLineWidth) * Number(value.average) / 200 : averageVal[index] = 0
? ? ? ? this.$set(value, 'averageWidth', averageVal[index] + 'px')
? ? ? ? this.$set(value, 'averageNum', value.average)
? ? ? } else {
? ? ? ? averageVal[index]++
? ? ? ? this.$set(value, 'averageWidth', averageVal[index] + 'px')
? ? ? ? this.$set(value, 'averageNum', averageVal[index] / 2)
? ? ? }
? ? }, 5)
? })
}以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue + Webpack + Vue-loader學(xué)習(xí)教程之相關(guān)配置篇
這篇文章主要介紹了關(guān)于Vue + Webpack + Vue-loader的相關(guān)配置篇，文中通過(guò)示例代碼介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-03-03
這篇文章主要介紹了vue中如何配置proxy代理問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
詳解TypeScript+Vue 插件 vue-class-component的使用總結(jié)
這篇文章主要介紹了TypeScript+Vue 插件 vue-class-component的使用總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
這篇文章主要介紹了element-ui在table中如何禁用其中幾行問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
對(duì)Vue table 動(dòng)態(tài)表格td可編輯的方法詳解
今天小編就為大家分享一篇對(duì)Vue table 動(dòng)態(tài)表格td可編輯的方法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue3?Watch踩坑實(shí)戰(zhàn)之watch監(jiān)聽無(wú)效
Vue.js中的watch選項(xiàng)用于監(jiān)聽Vue實(shí)例上某個(gè)特定的數(shù)據(jù)變化,下面這篇文章主要給大家介紹了關(guān)于Vue3?Watch踩坑實(shí)戰(zhàn)之watch監(jiān)聽無(wú)效的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
Vue首評(píng)加載速度及白屏?xí)r間優(yōu)化詳解
這篇文章主要介紹了vue項(xiàng)目?jī)?yōu)化首評(píng)加載速度，以及白屏?xí)r間過(guò)久的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
vue路由跳轉(zhuǎn)打開新窗口(window.open())和關(guān)閉窗口(window.close())
這篇文章主要介紹了vue路由跳轉(zhuǎn)打開新窗口(window.open())和關(guān)閉窗口(window.close())問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
前端vue中el-table增加合計(jì)行及合并單元格代碼示例
在有些情況下我們會(huì)有合并表頭、合并列、合并尾部合計(jì)的需求,這篇文章主要給大家介紹了關(guān)于前端vue中el-table增加合計(jì)行及合并單元格的相關(guān)資料,需要的朋友可以參考下2023-09-09
VueAwesomeSwiper在VUE中的使用以及遇到的一些問(wèn)題
這篇文章主要介紹了VueAwesomeSwiper在VUE中的使用以及遇到的一些問(wèn)題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01