之前在新聞里面看到過一個條形圖，展示的是每年各個國家的GDP比較，里面出現中國的GDP每年都在趕超其他國家，條形圖趕超其他國家有個排序的動畫，感覺很生動也很好看，就試著用VUE實現了一遍。做了才知道其實邏輯比較簡單，現在把代碼貼出來，有需要的同學可以拿去用用(代碼比較粗糙，可以自己再去細化一下)，主要是用css3里面的過渡效果實現的。

成品效果如下圖所示：

組件代碼如下（d-echart.vue）：

<template>
<div class="chart">
<ul>
<li
v-for="(item) of list"
:key="item.name"
:style="{'transform': 'translateY(' + item.index * 36 + 'px)'}"
>
<div class="name">{{ item.name }}</div>
<div class="bar">
<i :style="{'width': item.gdp + '%','backgroundColor': item.bg}"><em>{{ item.gdp }}</em></i>
</div>
</li>
</ul>
</div>
</template>

<script>
export default {
props: {
data: {
type: Array,
default: () => ([])
}
},
data () {
return {
viewData: this.data
}
},
computed: {
list () {
const list = JSON.parse(JSON.stringify(this.viewData))
list.sort((x, y) => {
return y.gdp - x.gdp
})
list.forEach((item, i) => {
this.viewData.forEach((it, idx) => {
if (item.name === it.name) {
this.$set(this.viewData, idx, {...this.viewData[idx], 'index': i})
}
})
})
return this.viewData
}
},
watch: {
'data': function (val) {
this.viewData = val
}
}
}
</script>

<style scoped lang="scss">
h3 {
background-color: #f1f1f1;
padding-bottom: 16px;
}
.chart {
ul {
position: relative;
li {
display: block;
width: 530px;
margin-top: 10px;
overflow: hidden;
padding-right: 30px;
position: absolute;
transition: all 0.5s linear;
top: 0;
left: 0;
div {
float: left;
&.name {
width: 90px;
margin-right: 10px;
text-align: right;
}
&.bar {
position: relative;
width: 400px;
i {
display: inline-block;
height: 14px;
line-height: 14px;
background-color: #1a7a63;
position: relative;
transition: all 1s linear;
em {
position: absolute;
right: -30px;
top: 0;
height: 14px;
line-height: 14px;
display: inline-block;
}
}
}
}
}
}
}
</style>

使用方法如下： <dEchart :data="data"></dEchart>

數據格式形如(即數據data的格式)： [
{
name: '中國',
gdp: 7,
bg: '#1F9A99'
},
{
name: '美國',
gdp: 96,
bg: '#9A9839'
},
{
name: '日本',
gdp: 85,
bg: '#9a270f'
},
{
name: '英國',
gdp: 78,
bg: '#50409a'
},
{
name: '俄羅斯',
gdp: 65,
bg: '#2b9a0a'
},
{
name: '緬甸',
gdp: 15,
bg: '#e66491'
},
{
name: '新加坡',
gdp: 39,
bg: '#8d869a'
},
{
name: '印度',
gdp: 10,
bg: '#070b9a'
}
]

轉載于:https://www.cnblogs.com/qddyh/p/10972038.html

總結

以上是生活随笔為你收集整理的带排序动画的横向条形图的全部內容，希望文章能夠幫你解決所遇到的問題。

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