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

ChordDiagram 弦图

环形多节点关系/流量可视化，节点占弧长 = 总流量，弦 = 双向流量。

基础用法

传入 N×N 的方阵：matrix[i][j] 表示 i → j 的流量。每个节点的弧长按它的总流量（出 + 入）分配，弦的弧长按 i↔j 双向流量分配。

背景视口

src/App.vue

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

const labels = ['北美', '欧洲', '亚洲', '南美', '非洲', '大洋洲'];
const matrix = [
  [0, 1200, 1800, 320, 220, 180],
  [1100, 0, 1400, 240, 380, 120],
  [1700, 1500, 0, 410, 460, 280],
  [310, 220, 380, 0, 130, 60],
  [200, 360, 420, 110, 0, 40],
  [160, 100, 240, 70, 50, 0],
];
</script>
<template>
  <CfChordDiagram :matrix="matrix" :labels="labels" :width="500" :height="500" />
</template>

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

const labels = ['北美', '欧洲', '亚洲', '南美', '非洲', '大洋洲'];
const matrix = [
  [0, 1200, 1800, 320, 220, 180],
  [1100, 0, 1400, 240, 380, 120],
  [1700, 1500, 0, 410, 460, 280],
  [310, 220, 380, 0, 130, 60],
  [200, 360, 420, 110, 0, 40],
  [160, 100, 240, 70, 50, 0],
];
</script>
<template>
  <CfChordDiagram :matrix="matrix" :labels="labels" :width="500" :height="500" />
</template>

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

export default function Demo() {
  const matrix = [
    [0, 1200, 1800, 320, 220, 180],
    [1100, 0, 1400, 240, 380, 120],
    [1700, 1500, 0, 410, 460, 280],
    [310, 220, 380, 0, 130, 60],
    [200, 360, 420, 110, 0, 40],
    [160, 100, 240, 70, 50, 0],
  ];
  const labels = ['北美', '欧洲', '亚洲', '南美', '非洲', '大洋洲'];
  return (
    <>
      <CfChordDiagram matrix={matrix} labels={labels} />
    </>
  );
}

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

export default function Demo() {
  const matrix = [
    [0, 1200, 1800, 320, 220, 180],
    [1100, 0, 1400, 240, 380, 120],
    [1700, 1500, 0, 410, 460, 280],
    [310, 220, 380, 0, 130, 60],
    [200, 360, 420, 110, 0, 40],
    [160, 100, 240, 70, 50, 0],
  ];
  const labels = ['北美', '欧洲', '亚洲', '南美', '非洲', '大洋洲'];
  return (
    <>
      <CfChordDiagram matrix={matrix} labels={labels} />
    </>
  );
}

适用场景

国际贸易、人口迁徙、跨服务调用矩阵
与 SankeyDiagram 的对比：Sankey 适合分层有向流（A → B → C），Chord 适合两两双向关系。

API

属性	类型	默认值	说明
`matrix`	`number[][]`	`—`	N×N 方阵，row-major
`labels`	`string[]`	`—`	节点标签
`width` / `height`	`number`	`460`	—
`padAngle`	`number`	`2`	节点之间的角度间距（度）
`innerRadius`	`number`	自动	弦内圈半径
`outerRadius`	`number`	自动	节点弧外圈半径

Events

Vue	React	载荷
`ribbon-enter` / `ribbon-leave`	`onRibbonEnter` / `onRibbonLeave`	`{ source, target, value }`