如何用JS在Vue中制作柱状图对比画面
导读：这篇文章给大家介绍了“如何用JS在Vue中制作柱状图对比画面”的相关知识，讲解详细，步骤过程清晰，对大家进一步学习和理解“如何用JS在Vue中制作柱状图对比画面”有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起...
这篇文章给大家介绍了“如何用JS在Vue中制作柱状图对比画面”的相关知识，讲解详细，步骤过程清晰，对大家进一步学习和理解“如何用JS在Vue中制作柱状图对比画面”有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。本文实例为大家分享了vue中使用js制作进度条式数据对比动画的具体代码，供大家参考，具体内容如下
实现的效果：(初始化以及浏览器resize的时候两侧的条形为向两侧递增的动画，其中两端的数字也是递增的动画)
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.子组件当中
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当中
handlegetallwidth () {
this.$emit('getallwidth', this.$refs.allline.offsetwidth)
}
2.父组件当中
getalllinewidth (data) {
this.alllinewidth = data
this.calculateivatargo()
}
,
// 给条形图添加计算宽度，并形成动画
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)
}
)
}
以上就是关于如何用JS在Vue中制作柱状图对比画面的介绍，本文内容仅供参考，有需要的朋友可以借鉴了解看看，希望对大家学习或工作，想要了解更多欢迎关注网络，小编每天都会为大家更新不同的知识。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 如何用JS在Vue中制作柱状图对比画面
本文地址： https://pptw.com/jishu/654349.html