LatencyHeatmap 延迟热力图
二维矩阵热力图,绿→黄→红 OKLCH 色相 lerp。
基础用法
数据通过 props 传入,纯 SVG 渲染,无第三方图表库依赖。
配色取自 --viz-1..8 token,色盲友好。
<CfLatencyHeatmap ... /> <CfLatencyHeatmap ... /> 一周 × 24 小时
行 = 周一到周日,列 = 小时。颜色映射到 oklch(70% 0.16 H) 中 H 从 152(绿)→ 78(黄)→ 22(红)。
<CfLatencyHeatmap :data="data" :row-labels="days" :col-labels="hours" /> <CfLatencyHeatmap data={data} rowLabels={days} colLabels={hours} /> API
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
data | number[][] | — | rows × cols 数值矩阵 |
rowLabels / colLabels | string[] | — | |
min / max | number | 自动 | 颜色映射区间 |
反馈与讨论
LatencyHeatmap 延迟热力图 的讨论