效果图:
<div class="divPlan">
<div class="divHeader">{{ planProgress.name }}</div>
<div class="cutLine"></div>
<div class="divComponent">
<div
class="divComponentItem"
v-for="(item, index) in planProgress.data"
:key="index"
>
<span class="name">{{ item.name }}</span>
<div class="progress">
<div class="container">
<span
class="process"
:style="{
width: (item.value / item.total) * 100 + '%',
background: item.color,
}"
>
<span class="processNumber" v-if="showProcess">{{
(item.value / item.total).toFixed(2) * 100 + "%"
}}</span>
</span>
</div>
<span>{{ item.value }}万元</span>
</div>
</div>
</div>
</div>
export default {
name: "workingFace",
components: {},
data() {
return {
showProcess: false,
planProgress: {
name: "年度计划完成情况",
data: [
{ name: "1号分公司", value: 367, total: 2000, color: "#ff9b00" },
{ name: "2号分公司", value: 763, total: 2000, color: "#ff9b00" },
{ name: "3号分公司", value: 260, total: 2000, color: "#00ccff" },
{ name: "4号分公司", value: 969, total: 2000, color: "#00ccff" },
],
},
};
},
mounted() {
const end = document.querySelector(".process"),
that = this;
// 当css3的animation完成一个动画,我们想让动画保持在终止的状态或其他一些事件,就可以监听 webkitAnimationEnd 事件
// 开始事件: webkitAnimationStart
// 结束事件: webkitAnimationEnd
// 重复运动事件: webkitAnimationIteration
end.addEventListener("webkitAnimationEnd", function () {
that.showProcess = true;
});
},
};
.divPlan {
border-radius: 16px;
height: 32%;
width: 100%;
background: rgb(236, 235, 235);
}
.divHeader {
font-size: 15px;
padding: 10px 15px;
font-weight: bold;
}
.cutLine {
width: 100%;
height: 5px;
background-image: linear-gradient(to right, #0a3e55, #8f9192);
}
.divComponent {
display: flex;
flex-direction: column;
justify-content: space-around;
width: 99%;
height: calc(100% - 50px);
padding: 10px 15px 5px 15px;
}
.divComponentItem {
display: flex;
flex-direction: column;
justify-content: space-around;
width: 100%;
height: 25%;
text-align: left;
}
.name {
font-size: 15px;
}
.progress {
height: 45%;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.container {
width: 75%;
height: 30%;
background: #afbbc5;
}
.process {
display: block;
height: 100%;
position: relative;
animation: move 5s linear 0s 1;
}
@keyframes move {
0% {
width: 0px;
}
100% {
width: " (item.value / item.total) * 100 + '%'";
}
}
.processNumber {
position: absolute;
right: -40px;
top: -7px;
}
.process::after {
content: "";
width: 2px;
height: 200%;
background: inherit;
position: absolute;
top: -40%;
right: -1px;
}