之前做过的一个项目
效果类似:条形图上方是排行的各个公司和对应的分数,下方是条形图。
代码如下:
<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做的话有点麻烦。就酱将就用。