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

LatencyHeatmap 延迟热力图

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

基础用法

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

背景视口

src/App.vue

<script setup lang="ts">
import { CfLatencyHeatmap } from '@chufix-design/vue';
function row(day: number) {
  return Array.from({ length: 24 }, (_, hour) => 80 + ((day * 47 + hour * 31) % 320));
}
const data = Array.from({ length: 7 }, (_, day) => row(day));
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>

<script setup>
import { CfLatencyHeatmap } from '@chufix-design/vue';
function row(day) {
  return Array.from({ length: 24 }, (_, hour) => 80 + ((day * 47 + hour * 31) % 320));
}
const data = Array.from({ length: 7 }, (_, day) => row(day));
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>

import { CfLatencyHeatmap } from '@chufix-design/react';

export default function Demo() {
  function row(day: number) {
    return Array.from({ length: 24 }, (_, hour) => 80 + ((day * 47 + hour * 31) % 320));
  }
  const data = Array.from({ length: 7 }, (_, day) => row(day));
  const rowLabels = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
  const colLabels = Array.from({ length: 24 }, (_, i) => i % 4 === 0 ? `${i}h` : '');
  return (
    <>
      <CfLatencyHeatmap data={data} rowLabels={rowLabels} colLabels={colLabels} />
    </>
  );
}

import { CfLatencyHeatmap } from '@chufix-design/react';

export default function Demo() {
  function row(day) {
    return Array.from({ length: 24 }, (_, hour) => 80 + ((day * 47 + hour * 31) % 320));
  }
  const data = Array.from({ length: 7 }, (_, day) => row(day));
  const rowLabels = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
  const colLabels = Array.from({ length: 24 }, (_, i) => i % 4 === 0 ? `${i}h` : '');
  return (
    <>
      <CfLatencyHeatmap data={data} rowLabels={rowLabels} colLabels={colLabels} />
    </>
  );
}

一周 × 24 小时

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

背景视口

src/App.vue

<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 + ((h * 17 + peakHour * 11) % 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>

<script setup>
import { CfLatencyHeatmap } from '@chufix-design/vue';
function row(peakHour) {
  return Array.from({ length: 24 }, (_, h) => {
    const dist = Math.abs(h - peakHour);
    return 80 + (24 - dist) * 12 + ((h * 17 + peakHour * 11) % 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>

import { CfLatencyHeatmap } from '@chufix-design/react';

export default function Demo() {
  function row(peakHour: number) {
    return Array.from({ length: 24 }, (_, h) => {
      const dist = Math.abs(h - peakHour);
      return 80 + (24 - dist) * 12 + ((h * 17 + peakHour * 11) % 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` : '');
  return (
    <>
      <CfLatencyHeatmap data={data} rowLabels={rowLabels} colLabels={colLabels} height={220} />
    </>
  );
}

import { CfLatencyHeatmap } from '@chufix-design/react';

export default function Demo() {
  function row(peakHour) {
    return Array.from({ length: 24 }, (_, h) => {
      const dist = Math.abs(h - peakHour);
      return 80 + (24 - dist) * 12 + ((h * 17 + peakHour * 11) % 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` : '');
  return (
    <>
      <CfLatencyHeatmap data={data} rowLabels={rowLabels} colLabels={colLabels} height={220} />
    </>
  );
}

API

属性	类型	默认值	说明
`data`	`number[][]`	`—`	rows × cols 数值矩阵
`rowLabels / colLabels`	`string[]`	`—`
`min / max`	`number`	自动	颜色映射区间
`width`	`number`	`480`	SVG 宽度
`height`	`number`	`240`	SVG 高度
`ariaLabel`	`string`	`—`	透传给根 `<svg>` 的 `aria-label`

Events

Vue 事件	React 回调	载荷类型	说明
`item-enter`	`onItemEnter`	`LatencyHeatmapInteractionPayload`	鼠标进入某格时触发
`item-leave`	`onItemLeave`	`LatencyHeatmapInteractionPayload`	鼠标离开某格时触发

类型

interface LatencyHeatmapInteractionPayload {
  row: number;
  col: number;
  value: number;
  rowLabel?: string;
  colLabel?: string;
  nativeEvent?: PointerEvent;
}