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

LatencyHeatmap 延迟热力图

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

基础用法

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

背景

<script setup lang="ts">
import { CfLatencyHeatmap } from '@chufix-design/vue';
function row() { return Array.from({ length: 24 }, () => 50 + Math.random() * 400); }
const data = [row(), row(), row(), row(), row(), row(), row()];
const rowLabels = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
const colLabels = Array.from({ length: 24 }, (_, i) => i % 4 === 0 ? `${i}h` : '');
</script>

<template>
  <CfLatencyHeatmap :data="data" :row-labels="rowLabels" :col-labels="colLabels" />
</template>

<CfLatencyHeatmap ... />

一周 × 24 小时

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

背景

<script setup lang="ts">
import { CfLatencyHeatmap } from '@chufix-design/vue';
function row(peakHour: number) {
  return Array.from({ length: 24 }, (_, h) => {
    const dist = Math.abs(h - peakHour);
    return 80 + (24 - dist) * 12 + Math.random() * 60;
  });
}
const data = [row(15), row(15), row(15), row(16), row(15), row(13), row(13)];
const rowLabels = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];
const colLabels = Array.from({ length: 24 }, (_, i) => i % 4 === 0 ? `${i}h` : '');
</script>

<template>
  <CfLatencyHeatmap :data="data" :row-labels="rowLabels" :col-labels="colLabels" :height="220" />
</template>

<CfLatencyHeatmap data={data} rowLabels={days} colLabels={hours} />

API

属性	类型	默认值	说明
`data`	`number[][]`	`—`	rows × cols 数值矩阵
`rowLabels / colLabels`	`string[]`	`—`
`min / max`	`number`	`自动`	颜色映射区间