当然有办法实现啦！我帮你基于现有代码改造，添加目标产量的水平标记线，甚至还能加上对应的标签提示，具体方案如下：

核心思路 #

Bootstrap的垂直进度条是从底部向上填充高度的，所以我们需要给外层容器加上相对定位，然后用绝对定位的元素来做标记线——标记线的垂直位置可以通过目标产量占最大值的比例来计算，确保和进度条的刻度对齐。

完整改造代码 #

// 假设你已经定义了 targetYield（目标产量）变量
<div className="w-25 m-1" style={{ position: 'relative' }}>
  <div className="progress progress-bar-vertical ">
    <div 
      className="progress-bar" 
      role="progressbar" 
      aria-valuenow={yieldInKG} 
      aria-valuemin="0" 
      aria-valuemax={maxValue} 
      style={{ height: `${barHeight}%` }}
    >
      <span>{percentage}%</span>
    </div>
  </div>
  
  {/* 1. 目标产量水平标记线 */}
  <div 
    style={{
      position: 'absolute',
      top: `${100 - (targetYield / maxValue) * 100}%`,
      left: 0,
      width: '100%',
      height: '2px',
      backgroundColor: '#dc3545', // 用Bootstrap危险色，醒目易识别
      zIndex: 10, // 确保标记线在进度条上方显示
    }}
    aria-label="目标产量标记线"
  />
  
  {/* 2. 可选：添加目标值标签（放在进度条右侧） */}
  <div
    style={{
      position: 'absolute',
      top: `${100 - (targetYield / maxValue) * 100}%`,
      left: '105%',
      transform: 'translateY(-50%)', // 让标签和标记线垂直居中对齐
      fontSize: '0.875rem',
      color: '#dc3545',
      fontWeight: 500,
    }}
  >
    目标: {targetYield}KG
  </div>
</div>

关键细节解释 #

• 相对定位容器：给最外层的w-25 m-1容器加上position: relative，这样内部的绝对定位元素会以它为基准计算位置，不会乱跑。
• 标记线位置计算：top: ${100 - (targetYield / maxValue) * 100}%——因为垂直进度条的高度是从底部往上算的，所以目标值对应的位置需要用100%减去目标值占最大值的百分比，比如目标产量是最大值的80%，那标记线的top就是20%（从顶部往下20%的位置，正好对应底部往上80%的刻度）。
• 样式自定义：你可以根据需求调整标记线的颜色、粗细（比如改成虚线border-top: 2px dashed #ffc107），或者调整z-index让它在进度条下方显示。
• 无障碍优化：给标记线加上aria-label，方便屏幕阅读器识别这是目标产量标记。

特殊场景适配 #

如果你的进度条有边框或者padding，标记线可能无法完全覆盖进度条宽度，可以把标记线的样式改成：

left: -2px;
width: calc(100% + 4px);

这样就能覆盖边框区域啦！

内容的提问来源于stack exchange，提问作者Boris K