React实现买卖双值对比条形UI组件开发方法

核心实现逻辑 #

这个组件属于典型的对称双向条形图（也叫蝴蝶图），不管用什么技术栈，核心逻辑都是一致的：

• 逐行处理单个交易所的数据：先计算单交易所总成交量 = 卖出（Sold）数值 + 买入（Bought）数值
• 宽度占比计算：左右两侧条形的宽度，按各自数值占总成交量的比例分配，以中间交易所名称为对称轴左右延伸
• 视觉区分：卖出侧用红色系、买入侧用绿色系，数值标签贴在条形靠近中间对称轴的位置，方便对照阅读

可选实现路径 #

根据项目现有技术栈选就行，没必要为了这个组件强行引入重依赖：

• 零依赖原生实现：用HTML+CSS Flex布局就能写，JS只需要做宽度比例计算，打包体积不到1KB，适合轻量场景
• 框架封装：如果是React/Vue项目，可以直接封装成通用组件，props接收交易所数组即可，内部自动计算渲染，还能扩展hover提示、点击事件等交互
• 现有图表库复用：如果项目已经引入了可视化库，直接用内置的双向条形图配置即可，不需要自己写样式：
  • ECharts：将x轴零点设置在容器中间，左侧x轴反向对应卖出数据，右侧x轴正向对应买入数据，y轴填充交易所名称，自带动画、tooltip效果
  • AntV G2：内置对称条形图模板，配置项更精简，适合toB类数据展示场景

核心代码示例（原生Flex方案，无依赖） #

DOM结构（以单条数据为例）：

<div class="trade-bar-container">
  <!-- 左侧卖出条 -->
  <div class="trade-bar bar-sold" style="width: 32%">
    <span class="bar-num">1234.56</span>
  </div>
  <!-- 中间交易所名称 -->
  <div class="exchange-label">Binance</div>
  <!-- 右侧买入条 -->
  <div class="trade-bar bar-bought" style="width: 41%">
    <span class="bar-num">1567.89</span>
  </div>
</div>

对应CSS：

.trade-bar-container {
  display: flex;
  align-items: center;
  width: 100%;
  height: 34px;
  margin: 6px 0;
}
.trade-bar {
  height: 100%;
  display: flex;
  align-items: center;
  border-radius: 4px;
}
.bar-sold {
  background: #f54646;
  margin-left: auto;
  justify-content: flex-end;
  color: #fff;
}
.bar-bought {
  background: #29c75c;
  margin-right: auto;
  justify-content: flex-start;
  color: #fff;
}
.exchange-label {
  width: 110px;
  flex-shrink: 0;
  text-align: center;
  font-size: 14px;
  padding: 0 10px;
}
.bar-num {
  padding: 0 8px;
  font-size: 12px;
}

宽度计算逻辑（JS）：

// 入参为交易所列表，每个元素包含name、sold、bought字段
function calcBarWidth(exchangeList) {
  return exchangeList.map(item => {
    const total = item.sold + item.bought
    // 乘50是因为左右两侧最多各占容器去掉中间标签后一半的宽度，保证对称
    const soldPercent = total === 0 ? 0 : (item.sold / total) * 50
    const boughtPercent = total === 0 ? 0 : (item.bought / total) * 50
    return {
      ...item,
      soldPercent,
      boughtPercent
    }
  })
}

注意细节 #

• 边界处理：如果某交易所买卖值总和为0，直接给两侧宽度设为0，避免出现NaN导致样式错乱
• 可读性优化：可以给条形设置最小宽度（比如24px），避免数值太小的时候条形过窄，内部的数值标签显示不全
• 响应式适配：移动端场景下可以把中间标签的固定宽度改成自适应，或者调整布局为标签在上、条形在下的结构

内容的提问来源于stack exchange，提问作者Husnain Mehmood