How to use js to make Progress Bar data comparison Animation in Vue
In this article Xiaobian for you to introduce in detail "how to use js in Vue to make progress bar data comparison animation", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use js to make progress bar data comparison animation in Vue" can help you solve your doubts.
Effect achieved: (the bars on both sides of the initialization and browser resize are animations that increase progressively to both sides, and the numbers at both ends are also incremental animations)
HTML section:
My average analysis of your investment ability is {{item.title}} {{item.score | ScoreFilter} {{item.average | scoreFilter}} 1000 0 100 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.子组件当中 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)})} / / handleGetAllWidth () {this.$emit ('getAllWidth', this.$refs.allLine.offsetWidth)} in methods
two。 In the parent component
GetAllLineWidth (data) {this.allLineWidth = data this.calculateIvatargo ()}, / / add a calculated width to the bar chart And form the animation 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) 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) 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 {average value [index] + + this.$set (value,' averageWidth', averageVal [index] + 'px') this.$set (value,' averageNum' AverageVal [index] / 2)}}, 5)})} read here This article "how to use js to make progress bar data comparison animation in Vue" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.
