使用element UI中的Progress定义排行

    原型图如下：

    首先，这需要展示五条数据，每条的颜色都不一样，还要显示百分比，每条数据可分为上下两部分，上部分展示名字和百分比，下部分显示进度条。因为项目用的element，所以直接用它里面的Progress完成。

     用flex布局很容易实现这种布局，可以用v-for循环展示出内容：

progressData就是数据源，要修改它原有的样式

.el-progress-bar__outer{border-radius: 0;background-color:#3a3e63}

.el-progress-bar__inner{border-radius: 0;}

.el-progress__text{display: none;}

.el-progress-bar{padding: 0 1.25rem;}

看下效果：

嗯~~~大致效果出来了，开始搞颜色，Progress有个color属性，可以更改颜色，关键它可以是函数啊，那做起来更方便了。首先，定义一个数组来装颜色

progressColor:['#1bf8f3','#3196e8','#feb046','#e8484f','#9174e4']

在定义个函数customColorMethod(index)，传个位置的参数，方便从数组里取值，

好了，看下效果吧

   哇啊啊，还剩两处：右上角的百分数和进度条。也挺好弄得，道理和customColorMethod函数一样，动态绑定css。

好了，完美实现。这里面我都是动态绑定一个方法，第一次这样用，也不知道合不合理，分享出来请大佬指点指点。不喜勿喷啊