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

CorrelationMatrix 相关性矩阵

变量两两相关系数热图，正相关蓝、负相关橙，强度由饱和度表达。

基础用法

输入 N×N 相关系数矩阵（值域 −1..1）+ 标签数组。组件按强度自动选择文本对比色，单元格 ≥ 24×14 时显示数值文本。

背景视口

src/App.vue

<script setup lang="ts">
import { CfCorrelationMatrix } from '@chufix-design/vue';

const labels = ['CPU', 'MEM', 'RPS', 'P99', '错误率', '队列长度'];
const matrix = [
  [1.0, 0.62, 0.74, 0.58, 0.21, 0.39],
  [0.62, 1.0, 0.48, 0.41, 0.18, 0.34],
  [0.74, 0.48, 1.0, 0.71, 0.36, 0.66],
  [0.58, 0.41, 0.71, 1.0, 0.53, 0.81],
  [0.21, 0.18, 0.36, 0.53, 1.0, 0.45],
  [0.39, 0.34, 0.66, 0.81, 0.45, 1.0],
];
</script>
<template>
  <CfCorrelationMatrix :matrix="matrix" :labels="labels" :width="480" :height="480" />
</template>

<script setup>
import { CfCorrelationMatrix } from '@chufix-design/vue';

const labels = ['CPU', 'MEM', 'RPS', 'P99', '错误率', '队列长度'];
const matrix = [
  [1.0, 0.62, 0.74, 0.58, 0.21, 0.39],
  [0.62, 1.0, 0.48, 0.41, 0.18, 0.34],
  [0.74, 0.48, 1.0, 0.71, 0.36, 0.66],
  [0.58, 0.41, 0.71, 1.0, 0.53, 0.81],
  [0.21, 0.18, 0.36, 0.53, 1.0, 0.45],
  [0.39, 0.34, 0.66, 0.81, 0.45, 1.0],
];
</script>
<template>
  <CfCorrelationMatrix :matrix="matrix" :labels="labels" :width="480" :height="480" />
</template>

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

export default function Demo() {
  const matrix = [
    [1.0, 0.62, 0.74, 0.58, 0.21, 0.39],
    [0.62, 1.0, 0.48, 0.41, 0.18, 0.34],
    [0.74, 0.48, 1.0, 0.71, 0.36, 0.66],
    [0.58, 0.41, 0.71, 1.0, 0.53, 0.81],
    [0.21, 0.18, 0.36, 0.53, 1.0, 0.45],
    [0.39, 0.34, 0.66, 0.81, 0.45, 1.0],
  ];
  const labels = ['CPU', 'MEM', 'RPS', 'P99', '错误率', '队列长度'];
  return (
    <>
      <CfCorrelationMatrix matrix={matrix} labels={labels} />
    </>
  );
}

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

export default function Demo() {
  const matrix = [
    [1.0, 0.62, 0.74, 0.58, 0.21, 0.39],
    [0.62, 1.0, 0.48, 0.41, 0.18, 0.34],
    [0.74, 0.48, 1.0, 0.71, 0.36, 0.66],
    [0.58, 0.41, 0.71, 1.0, 0.53, 0.81],
    [0.21, 0.18, 0.36, 0.53, 1.0, 0.45],
    [0.39, 0.34, 0.66, 0.81, 0.45, 1.0],
  ];
  const labels = ['CPU', 'MEM', 'RPS', 'P99', '错误率', '队列长度'];
  return (
    <>
      <CfCorrelationMatrix matrix={matrix} labels={labels} />
    </>
  );
}

API

属性	类型	默认值	说明
`matrix`	`number[][]`	`—`	N×N，值域 −1..1
`labels`	`string[]`	`—`	变量名
`width` / `height`	`number`	`480`	—
`cellGap`	`number`	`2`	单元格间隙
`showText`	`boolean`	`true`	显示数值文本

Events

Vue	React	载荷
`cell-enter` / `cell-leave`	`onCellEnter` / `onCellLeave`	`{ row, col, value, rowLabel, colLabel }`