之前在新闻里面看到过一个条形图，展示的是每年各个国家的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'  }]