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

成品效果如下圖所示：

組件代碼如下（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>

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

轉(zhuǎn)載于:https://www.cnblogs.com/qddyh/p/10972038.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。