实现如图所示

html：

 <div class="progress-container"><div class="progress-box left" :style="leftStyle"><div class="progress-value-top left">总中标电量</div><div class="progress-value left">{{ responseAllData.totalBidPower }} MWh</div></div><div class="progress-box right" :style="rightStyle"><div class="progress-value-top right">有效调节电量</div><div class="progress-value right">{{ responseAllData.vaildRespQty }} MWh</div></div></div><div class="progress-container"><div class="progress-box" :style="leftStyleTwo"><div class="progress-value" style="color: #9daec3">平均达标率</div></div><div class="progress-box right" :style="rightStyleTwo"><div class="progress-value right">{{ responseAllData.avgReachRate }} %</div></div></div>

css：

.progress-container {display: flex;align-items: center;width: 100%;height: 16px;position: relative; /* 为了绝对定位内部元素 */margin-top: 50px;margin-bottom: 20px;
}.progress-box {position: relative;height: 100%;
}
.progress-box.left {position: relative;height: 100%;margin-right: 5px;
}.progress-value-top {position: absolute;top: -50px;font-weight: bold;color: #9daec3;
}.progress-value-top.left {left: 0;
}.progress-value-top.right {right: 0;
}.progress-value {position: absolute;top: -25px;font-weight: bold;
}.progress-value.left {left: 0;font-size: 14px;color: #1c77ea;
}.progress-value.right {right: 0;font-size: 14px;color: #04c886;
}

vue2：

computed: {leftStyle() {return {width: `${this.responseAllData.totalBidPower}%`,backgroundImage: "linear-gradient(270deg, #159AFF 5%, #159aff66 100%)",};},rightStyle() {return {width: `${this.responseAllData.vaildRespQty}%`,backgroundImage: "linear-gradient(270deg, #04c88666 0%, #04C886 100%)",};},leftStyleTwo() {return {width: `${this.responseAllData.avgReachRate}%`,backgroundImage: "linear-gradient(270deg, #159AFF 5%, #159aff66 100%)",};},rightStyleTwo() {return {width: `${150 - this.responseAllData.avgReachRate}%`,backgroundImage:"linear-gradient(270deg, #ffffff80 0%, #00000000 100%)",};},},