实现效果：

实现前：

---

网上查progress找到的方法都是环形进度条的，且实现得贼复杂，要么封装一个新组件要么修改一串svg，其实线形进度条改成渐变色的方法非常简单，直接在css上修改就行了：

       <div class="progress_box"><el-progress :percentage="item.percent" :class="item.rank==1?'green':'blue'" :show-text="false"></el-progress></div>

:class="item.rank==1?'green':'blue'"即给进度条按条件加类名，排名第一的工厂为绿渐变色，其他工厂为蓝渐变色。

      .progress_box {width: 100%;  // 进度条的父标签需要加个宽度，否则进度条可能会不显示.green {.el-progress-bar__inner {background-color: unset;  // 将进度条默认的颜色给去除掉，若不生效就再加个!importantbackground-image: linear-gradient(90deg, #38f9d7 0%, #43e97b 100%);  // 给进度条加上渐变色}}.blue {.el-progress-bar__inner {background-color: unset !important;  // 同上background-image: linear-gradient(270deg, #26daea 0%, #156ff7 100%) !important;  // 同上}}}