Vue|分段分颜色的进度条 css|js

这是一个自己写的进度条组件

.validate-message { display:contents ; color: #F56C6C; font-size: 12px; line-height: 1; padding-top: 4px; padding-left: 4px; position: absolute; top: 100%; left: 0; } .process-content{ width:calc(100% - 110px); height:40px; margin-right:20px } .pb-wrapper { display: inline-block; height:18px; width:100%; margin-top:5px; /*border:1px solid #cfd0d2; */ position:relative; background:#cfd0d2; } .pb-container { position:relative; left:-1px; margin-right:-2px; font:1px/0 arial; } .pb-value{ display: inline-block; height:18px; }

使用：

关联方法

// 生成随机颜色 randomHexColor() { // 随机生成十六进制颜色 let hex = Math.floor(Math.random() * 16777216).toString(16); // 生成ffffff以内16进制数 while (hex.length < 6) { // while循环判断hex位数，少于6位前面加0凑够6位 hex = `0${ hex}`; } const color = `#${ hex}`; return color; // 返回‘#'开头16进制颜色 }, // 生成不同颜色 getDifferntColor() { let color = ''; while (!color || this.coloredArray.indexOf(color) !== -1) { color = this.randomHexColor(); } return color; }, computeRate() { this.projectAdjustDataArray.map((item) => { item.countUsageRate = `${(100 * item.usage_count / this.totalData.count).toString()}%`; return item; }); }, loadData() { //自己封装好数据，这里就不详细写了 }

文章图片

效果大概就是这样的顶部项目图例那我没沾，数据关联一下就可以了，生成的颜色是随机的，因为项目是随机的，大概思路就是顶部图例的颜色和项目和下面进度条的颜色和项目是相对应的，下面那个主条是灰色的，然后用各个项目的颜色进行覆盖业务有点儿复杂，我也就大概粘了点儿代码，主要是在那个进度条组件中，只要分析清楚，就可以自己编写各种各样的进度条如果实现中有问题可以一起交流

【Vue|分段分颜色的进度条】灵光一闪。。。。为啥不用Echarts。。。。。