开发预览 更新于 2026-05-10

LatencyHeatmap 延迟热力图

二维矩阵热力图,绿→黄→红 OKLCH 色相 lerp。

基础用法

数据通过 props 传入,纯 SVG 渲染,无第三方图表库依赖。 配色取自 --viz-1..8 token,色盲友好。

SunMonTueWedThuFriSat0h4h8h12h16h20h
<CfLatencyHeatmap ... />
<CfLatencyHeatmap ... />

一周 × 24 小时

行 = 周一到周日,列 = 小时。颜色映射到 oklch(70% 0.16 H) 中 H 从 152(绿)→ 78(黄)→ 22(红)。

MonTueWedThuFriSatSun0h4h8h12h16h20h
<CfLatencyHeatmap :data="data" :row-labels="days" :col-labels="hours" />
<CfLatencyHeatmap data={data} rowLabels={days} colLabels={hours} />

API

属性类型默认值说明
datanumber[][]rows × cols 数值矩阵
rowLabels / colLabelsstring[]
min / maxnumber自动颜色映射区间

反馈与讨论

LatencyHeatmap 延迟热力图 的讨论

0
0 / 600
一键发送
正在加载评论...