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

ArcDiagram 弧线图

节点排在一条轴上，边由半圆弧连接；适合显示线性序列的依赖关系。

基础用法

nodes 沿水平轴等距排列，group 控制节点颜色，size 控制节点半径。edges 的权重映射到弧线透明度。

背景视口

src/App.vue

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

const nodes = [
  { id: 'auth', label: 'auth', group: 'edge', size: 2 },
  { id: 'api', label: 'api', group: 'edge', size: 3 },
  { id: 'orders', label: 'orders', group: 'core', size: 2 },
  { id: 'users', label: 'users', group: 'core', size: 2.5 },
  { id: 'billing', label: 'billing', group: 'core', size: 2 },
  { id: 'cache', label: 'cache', group: 'data', size: 1.6 },
  { id: 'pg', label: 'pg', group: 'data', size: 2.2 },
  { id: 'queue', label: 'queue', group: 'data', size: 1.6 },
];

const edges = [
  { source: 'auth', target: 'api', weight: 3 },
  { source: 'api', target: 'orders', weight: 4 },
  { source: 'api', target: 'users', weight: 3 },
  { source: 'api', target: 'billing', weight: 2 },
  { source: 'orders', target: 'pg', weight: 4 },
  { source: 'users', target: 'pg', weight: 3 },
  { source: 'billing', target: 'pg', weight: 2 },
  { source: 'orders', target: 'cache', weight: 2 },
  { source: 'api', target: 'cache', weight: 3 },
  { source: 'billing', target: 'queue', weight: 1 },
  { source: 'orders', target: 'queue', weight: 2 },
];
</script>
<template>
  <CfArcDiagram :nodes="nodes" :edges="edges" :width="660" :height="280" />
</template>

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

const nodes = [
  { id: 'auth', label: 'auth', group: 'edge', size: 2 },
  { id: 'api', label: 'api', group: 'edge', size: 3 },
  { id: 'orders', label: 'orders', group: 'core', size: 2 },
  { id: 'users', label: 'users', group: 'core', size: 2.5 },
  { id: 'billing', label: 'billing', group: 'core', size: 2 },
  { id: 'cache', label: 'cache', group: 'data', size: 1.6 },
  { id: 'pg', label: 'pg', group: 'data', size: 2.2 },
  { id: 'queue', label: 'queue', group: 'data', size: 1.6 },
];

const edges = [
  { source: 'auth', target: 'api', weight: 3 },
  { source: 'api', target: 'orders', weight: 4 },
  { source: 'api', target: 'users', weight: 3 },
  { source: 'api', target: 'billing', weight: 2 },
  { source: 'orders', target: 'pg', weight: 4 },
  { source: 'users', target: 'pg', weight: 3 },
  { source: 'billing', target: 'pg', weight: 2 },
  { source: 'orders', target: 'cache', weight: 2 },
  { source: 'api', target: 'cache', weight: 3 },
  { source: 'billing', target: 'queue', weight: 1 },
  { source: 'orders', target: 'queue', weight: 2 },
];
</script>
<template>
  <CfArcDiagram :nodes="nodes" :edges="edges" :width="660" :height="280" />
</template>

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

export default function Demo() {
  const nodes = [
    { id: 'auth', label: 'auth', group: 'edge', size: 2 },
    { id: 'api', label: 'api', group: 'edge', size: 3 },
    { id: 'orders', label: 'orders', group: 'core', size: 2 },
    { id: 'users', label: 'users', group: 'core', size: 2.5 },
    { id: 'billing', label: 'billing', group: 'core', size: 2 },
    { id: 'cache', label: 'cache', group: 'data', size: 1.6 },
    { id: 'pg', label: 'pg', group: 'data', size: 2.2 },
    { id: 'queue', label: 'queue', group: 'data', size: 1.6 },
  ];
  const edges = [
    { source: 'auth', target: 'api', weight: 3 },
    { source: 'api', target: 'orders', weight: 4 },
    { source: 'api', target: 'users', weight: 3 },
    { source: 'api', target: 'billing', weight: 2 },
    { source: 'orders', target: 'pg', weight: 4 },
    { source: 'users', target: 'pg', weight: 3 },
    { source: 'billing', target: 'pg', weight: 2 },
    { source: 'orders', target: 'cache', weight: 2 },
    { source: 'api', target: 'cache', weight: 3 },
    { source: 'billing', target: 'queue', weight: 1 },
    { source: 'orders', target: 'queue', weight: 2 },
  ];
  return (
    <>
      <CfArcDiagram nodes={nodes} edges={edges} width={660} height={280} />
    </>
  );
}

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

export default function Demo() {
  const nodes = [
    { id: 'auth', label: 'auth', group: 'edge', size: 2 },
    { id: 'api', label: 'api', group: 'edge', size: 3 },
    { id: 'orders', label: 'orders', group: 'core', size: 2 },
    { id: 'users', label: 'users', group: 'core', size: 2.5 },
    { id: 'billing', label: 'billing', group: 'core', size: 2 },
    { id: 'cache', label: 'cache', group: 'data', size: 1.6 },
    { id: 'pg', label: 'pg', group: 'data', size: 2.2 },
    { id: 'queue', label: 'queue', group: 'data', size: 1.6 },
  ];
  const edges = [
    { source: 'auth', target: 'api', weight: 3 },
    { source: 'api', target: 'orders', weight: 4 },
    { source: 'api', target: 'users', weight: 3 },
    { source: 'api', target: 'billing', weight: 2 },
    { source: 'orders', target: 'pg', weight: 4 },
    { source: 'users', target: 'pg', weight: 3 },
    { source: 'billing', target: 'pg', weight: 2 },
    { source: 'orders', target: 'cache', weight: 2 },
    { source: 'api', target: 'cache', weight: 3 },
    { source: 'billing', target: 'queue', weight: 1 },
    { source: 'orders', target: 'queue', weight: 2 },
  ];
  return (
    <>
      <CfArcDiagram nodes={nodes} edges={edges} width={660} height={280} />
    </>
  );
}

适用场景

服务依赖图、词义共现网络、社交关系链
与 ConnectionGraph 的对比：ConnectionGraph 是力导向自由布局；ArcDiagram 强制 1D 排列以避免遮挡。

API

属性	类型	默认值	说明
`nodes`	`ArcNode[]`	`—`	`{ id, label?, group?, size? }[]`
`edges`	`ArcEdge[]`	`—`	`{ source, target, weight? }[]`
`width` / `height`	`number`	`640/280`	—
`arcSide`	`'top' \| 'bottom'`	`'top'`	弧线在轴的上方还是下方

Events

Vue	React	载荷
`edge-enter` / `edge-leave`	`onEdgeEnter` / `onEdgeLeave`	`{ edge }`