【菜鸡记录】排行榜条形图绘制，vue、js和css

之前做过的一个项目

效果类似：条形图上方是排行的各个公司和对应的分数，下方是条形图。

代码如下：

<div class="value-list">
  <div class="number-line" :style="{ width: getLineWidth(item) + '%' }"></div>
 </div>

方法：

 getLineWidth(item) {
 return (item[this.valueKey] / this.topList[0][this.valueKey] * 100) || 0
// return item[this.valueKey]
},

css:

    .value-list {
            width: 100%;
            height: vh(6);
            background-color: #294766;
            opacity: 1;
            position: relative;
            //   margin-top: vh(10);

            .number-line {
                position: absolute;
                height: vh(6);
                background: linear-gradient(-270deg, rgba(25, 140, 255, 0.102) 0%, #198CFF 100%);
                border-radius: 0px 0px 0px 0px;
                opacity: 1;
                width: 20%;
            }
        }

原理：后端把排行榜第一放在list的第一个item项，根据item的value值动态计算条形图的宽度，每一个item的宽度=[（item的value值/榜一的value值）*100%]。

因为有ui样式要求，echarts做的话有点麻烦。就酱将就用。