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

ConnectionGraph 连接图

节点 + 边的关系图，节点未指定坐标时自动均匀放置在圆周上。

基础用法

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

背景

<script setup lang="ts">
import { CfConnectionGraph } from '@chufix-design/vue';
const nodes = [
  { id: 'web', label: 'Web' },
  { id: 'api', label: 'API' },
  { id: 'auth', label: 'Auth' },
  { id: 'db', label: 'DB' },
  { id: 'cache', label: 'Cache' },
  { id: 'queue', label: 'Queue' },
];
const edges = [
  { source: 'web', target: 'api', weight: 4 },
  { source: 'api', target: 'auth', weight: 2 },
  { source: 'api', target: 'db', weight: 5 },
  { source: 'api', target: 'cache', weight: 3 },
  { source: 'api', target: 'queue', weight: 1.5 },
  { source: 'queue', target: 'db', weight: 1 },
];
</script>

<template>
  <CfConnectionGraph :nodes="nodes" :edges="edges" />
</template>

<CfConnectionGraph ... />

微服务拓扑

7 个服务、7 条连线，展示典型 gateway 分发模式。

背景

<script setup lang="ts">
import { CfConnectionGraph } from '@chufix-design/vue';
const nodes = [
  { id: 'gateway', label: 'Gateway', size: 12, colorIndex: 0 },
  { id: 'auth', label: 'Auth', size: 8, colorIndex: 1 },
  { id: 'users', label: 'Users', size: 10, colorIndex: 2 },
  { id: 'orders', label: 'Orders', size: 11, colorIndex: 3 },
  { id: 'payments', label: 'Payments', size: 10, colorIndex: 4 },
  { id: 'inventory', label: 'Inventory', size: 9, colorIndex: 5 },
  { id: 'notif', label: 'Notify', size: 7, colorIndex: 6 },
];
const edges = [
  { source: 'gateway', target: 'auth', weight: 4 },
  { source: 'gateway', target: 'users', weight: 5 },
  { source: 'gateway', target: 'orders', weight: 6 },
  { source: 'orders', target: 'payments', weight: 4 },
  { source: 'orders', target: 'inventory', weight: 3 },
  { source: 'payments', target: 'notif', weight: 2 },
  { source: 'orders', target: 'notif', weight: 2 },
];
</script>

<template>
  <CfConnectionGraph :nodes="nodes" :edges="edges" :height="320" />
</template>

<CfConnectionGraph nodes={nodes} edges={edges} />

API

属性	类型	默认值	说明
`nodes`	`GraphNode[]`	`—`	{ id, label, x?, y?, colorIndex?, size? }[]
`edges`	`GraphEdge[]`	`—`	{ source, target, weight?, colorIndex? }[]
`showLabels`	`boolean`	`true`