用 Node.js 做了一个实时交易量排行榜 Dashboard

12 个品种实时排序，每 3 秒刷新，带成本盈利磨损分析。纯原生前端，无框架依赖。

为什么做这个

做交易相关的东西时，最常见的需求就是"看排行"——谁交易量最大、谁涨了、谁亏了。市面上的终端要么太重，要么不直观，所以自己写了一个轻量版的 Web Dashboard，一个浏览器打开就能看。

长什么样

深色主题，类似专业交易终端：

• 顶部统计栏：总交易量、总盈利、总磨损、净收益，一眼看全局
• 排行榜主体：12 个品种按交易量实时排序，前三名有金银铜徽章
• 每行数据：排名、品种、交易量、当前价、成本价、盈利额、盈利率、磨损费用、净利润、迷你趋势条

数据每 3 秒更新一次，排名变化时行会平滑滑动到新位置（FLIP 动画），数值变化会高亮闪烁。

成本盈利磨损是什么

这是这个项目最核心的部分。光看交易量排行没太大意义，还得知道每个品种"赚不赚钱"。

每个品种的数据链：

盈利额 = (当前价 - 成本价) × 交易量
盈利率 = 盈利额 / (成本价 × 交易量) × 100%
磨损   = 手续费 + 滑点
         手续费 = 交易量 × 0.03
         滑点   = 手续费 × 0.5
净利润 = 盈利额 - 磨磨

磨损就是"看不见的成本"——手续费和滑点。很多时候只盯着盈利看，忘了这些隐性成本，算出来净利润其实没那么多。所以每行都把磨损单独列出来，净利润用颜色区分盈亏。

技术选型

刻意没用任何前端框架：

整个项目就 5 个文件：

trading-volume-ranking/
├── server.js           # 后端：Express + WebSocket + 模拟数据
├── package.json
├── public/
│   ├── index.html      # 页面结构
│   ├── style.css       # 深色主题样式
│   └── app.js          # 前端逻辑：WebSocket + FLIP + SVG
└── README.md

两个值得一提的细节

1. FLIP 排名动画

排名变化时，如果直接重新渲染 DOM，行会瞬间跳到新位置，体验很差。FLIP 的思路是：

1. First：记录每行的初始位置
2. Last：重新排序后的新位置
3. Invert：计算位移差，先把行反向偏移到旧位置（视觉上没变）
4. Play：移除偏移，加上 transition，行就平滑滑到新位置

纯 JS 实现，不需要任何动画库。

2. SVG 迷你趋势条

每个品种维护 24 个价格历史点，用 SVG <polyline> 画一条迷你折线。不引 ECharts/Chart.js 这种重库，几行代码：

const points = priceHistory.map((p, i) => 
  `${i * step},${height - normalize(p) * height}`
).join(' ');
// <polyline points="${points}" stroke="..." fill="none" />

怎么跑

git clone https://gitcode.com/gcw_glulAQEf/trading-volume-ranking.git
cd trading-volume-ranking
npm install
node server.js

数据说明

目前用的是模拟数据生成器——每 3 秒随机更新各品种的交易量和价格，模拟市场波动。如果要接真实行情数据，只需要改 server.js 里的数据更新逻辑，前端不用动。