桑基图和流程图

概述

ECharts 中的桑基图通过 'sankey' 系列类型实现。它们显示节点之间的定向流动，其中每个链接的宽度与它代表的流量成正比。这些图特别适用于可视化能源、材料或成本在不同系统或流程之间的转移。

来源：src/chart/sankey/SankeyView.ts20-34 test/sankey.html57-74

核心组件

ECharts 中的桑基图实现由几个关键组件组成，它们协同工作以创建可视化。

来源：src/chart/sankey/SankeyView.ts35-102 src/chart/sankey/SankeyView.ts103-350

SankeyView

SankeyView 类是桑基图的主要渲染器。它继承自基类 ChartView，并负责处理

处理来自系列模型的节点和链接数据
为节点（矩形）和链接（路径）创建图形元素
应用视觉样式并处理状态更改
设置交互，如节点拖动和邻近焦点

来源：src/chart/sankey/SankeyView.ts103-350

SankeyPath

SankeyPath 类是桑基图中链接的自定义路径渲染器。它继承自基础的 graphic.Path 类，用于创建连接节点的贝塞尔曲线。主要特点包括：

用于弯曲流动路径的自定义形状定义
支持水平和垂直方向
处理高亮和弱化状态的方法
内置支持根据流量值调整链接宽度

来源：src/chart/sankey/SankeyView.ts56-101

数据结构

桑基图需要两个主要的数据数组：nodes 和 links。

节点

节点代表资源流动的实体。基本节点格式是：

{
    name: string,   // Node name for display and identification
    depth?: number, // Optional depth for manual layout positioning
    itemStyle?: {   // Visual styling for the node
        // Style properties
    },
    label?: {       // Label configuration
        // Label properties
    }
}

链接

链接代表节点之间的流动。基本链接格式是：

{
    source: string, // Name of source node
    target: string, // Name of target node
    value: number   // Flow value, determines the width of the link
}

示例数据配置

来源：test/sankey.html57-74 test/sankey-depth.html47-104 test/sankey-labelValue.html45-61

布局配置

ECharts 中的桑基图支持水平和垂直方向，可以通过 orient 选项进行配置。

水平布局（默认）

在水平布局中，节点从左到右排列，链接在它们之间水平流动。

垂直布局

在垂直布局中，节点从上到下排列，链接在它们之间垂直流动。

可以使用以下选项控制布局行为：

选项	描述
`orient`	指定方向：`'horizontal'`（默认）或 `'vertical'`
`nodeWidth`	节点矩形的宽度
`nodeGap`	相同深度的节点之间的间隙
`layout`	通过 `depth` 指定使用预定义节点位置或手动设置坐标，来指定 `'none'`