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

SankeyDiagram 流向图

节点 + 加权边的流向图，节点高度 = 流量。

基础用法

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

背景

<script setup lang="ts">
import { CfSankeyDiagram } from '@chufix-design/vue';
const nodes = [
  { id: 'organic', name: 'Organic', layer: 0 },
  { id: 'paid', name: 'Paid', layer: 0 },
  { id: 'referral', name: 'Referral', layer: 0 },
  { id: 'web', name: 'Web', layer: 1 },
  { id: 'mobile', name: 'Mobile', layer: 1 },
  { id: 'success', name: '2xx', layer: 2 },
  { id: 'redirect', name: '3xx', layer: 2 },
  { id: 'error', name: '4xx/5xx', layer: 2 },
];
const links = [
  { source: 'organic', target: 'web', value: 50 },
  { source: 'organic', target: 'mobile', value: 30 },
  { source: 'paid', target: 'web', value: 20 },
  { source: 'paid', target: 'mobile', value: 25 },
  { source: 'referral', target: 'web', value: 10 },
  { source: 'referral', target: 'mobile', value: 5 },
  { source: 'web', target: 'success', value: 60 },
  { source: 'web', target: 'redirect', value: 12 },
  { source: 'web', target: 'error', value: 8 },
  { source: 'mobile', target: 'success', value: 45 },
  { source: 'mobile', target: 'redirect', value: 8 },
  { source: 'mobile', target: 'error', value: 7 },
];
</script>

<template>
  <CfSankeyDiagram :nodes="nodes" :links="links" />
</template>

<script setup>
import { CfSankeyDiagram } from '@chufix-design/vue';
const nodes = [
  { id: 'organic', name: 'Organic', layer: 0 },
  { id: 'paid', name: 'Paid', layer: 0 },
  { id: 'referral', name: 'Referral', layer: 0 },
  { id: 'web', name: 'Web', layer: 1 },
  { id: 'mobile', name: 'Mobile', layer: 1 },
  { id: 'success', name: '2xx', layer: 2 },
  { id: 'redirect', name: '3xx', layer: 2 },
  { id: 'error', name: '4xx/5xx', layer: 2 },
];
const links = [
  { source: 'organic', target: 'web', value: 50 },
  { source: 'organic', target: 'mobile', value: 30 },
  { source: 'paid', target: 'web', value: 20 },
  { source: 'paid', target: 'mobile', value: 25 },
  { source: 'referral', target: 'web', value: 10 },
  { source: 'referral', target: 'mobile', value: 5 },
  { source: 'web', target: 'success', value: 60 },
  { source: 'web', target: 'redirect', value: 12 },
  { source: 'web', target: 'error', value: 8 },
  { source: 'mobile', target: 'success', value: 45 },
  { source: 'mobile', target: 'redirect', value: 8 },
  { source: 'mobile', target: 'error', value: 7 },
];
</script>

<template>
  <CfSankeyDiagram :nodes="nodes" :links="links" />
</template>

<CfSankeyDiagram ... />

<CfSankeyDiagram ... />

购物路径 3 层

搜索引擎 / 直接访问 → 产品列表 / 详情 → 加购 / 支付三层流向。

背景

<script setup lang="ts">
import { CfSankeyDiagram } from '@chufix-design/vue';
const nodes = [
  { id: 'a', name: '搜索引擎', layer: 0 },
  { id: 'b', name: '直接访问', layer: 0 },
  { id: 'c', name: '产品列表', layer: 1 },
  { id: 'd', name: '产品详情', layer: 1 },
  { id: 'e', name: '加入购物车', layer: 2 },
  { id: 'f', name: '完成支付', layer: 2 },
];
const links = [
  { source: 'a', target: 'c', value: 60 },
  { source: 'a', target: 'd', value: 25 },
  { source: 'b', target: 'c', value: 30 },
  { source: 'b', target: 'd', value: 40 },
  { source: 'c', target: 'e', value: 20 },
  { source: 'd', target: 'e', value: 18 },
  { source: 'e', target: 'f', value: 24 },
];
</script>

<template>
  <CfSankeyDiagram :nodes="nodes" :links="links" :height="220" />
</template>

<script setup>
import { CfSankeyDiagram } from '@chufix-design/vue';
const nodes = [
  { id: 'a', name: '搜索引擎', layer: 0 },
  { id: 'b', name: '直接访问', layer: 0 },
  { id: 'c', name: '产品列表', layer: 1 },
  { id: 'd', name: '产品详情', layer: 1 },
  { id: 'e', name: '加入购物车', layer: 2 },
  { id: 'f', name: '完成支付', layer: 2 },
];
const links = [
  { source: 'a', target: 'c', value: 60 },
  { source: 'a', target: 'd', value: 25 },
  { source: 'b', target: 'c', value: 30 },
  { source: 'b', target: 'd', value: 40 },
  { source: 'c', target: 'e', value: 20 },
  { source: 'd', target: 'e', value: 18 },
  { source: 'e', target: 'f', value: 24 },
];
</script>

<template>
  <CfSankeyDiagram :nodes="nodes" :links="links" :height="220" />
</template>

<CfSankeyDiagram nodes={n} links={l} />

<CfSankeyDiagram nodes={n} links={l} />

API

属性	类型	默认值	说明
`nodes`	`SankeyNode[]`	`—`	{ id, name, layer?, colorIndex? }[]
`links`	`SankeyLink[]`	`—`	{ source, target, value }[]
`nodeWidth`	`number`	`12`	节点条宽