Apache ECharts 桑基图：流量数据可视化利器
项目地址: https://gitcode.com/gh_mirrors/echarts16/echarts 桑基图（Sankey Diagram）是一种展示数据流动和能量转换的可视化图表，通过节点和流量线直观呈现资源、信息或能量的转移过程。在 Apache ECharts 中，桑基图已成为分析用户行为路径、能源消耗、资金流向等场景的核心工具。本文将从基础配置到高级应用，带您掌握这一数据可视化利器。
桑基图核心价值与应用场景
桑基图最显著的优势在于流量占比可视化和路径追踪能力。其典型应用场景包括：
- 用户行为分析：电商平台用户从浏览到购买的转化路径
- 能源消耗监控：电力系统中各类能源的转换与损耗
- 供应链管理：原材料到成品的价值流转过程
- 财务审计：资金在不同部门间的分配与使用情况
ECharts 桑基图实现代码位于 test/sankey.html，通过自定义节点样式、流向动画和交互效果，可快速构建专业级可视化图表。
快速上手：3 分钟实现基础桑基图
数据格式规范
桑基图需要两种核心数据：节点（nodes）和链接（links）。以能源消耗数据 test/data/energy.json 为例：
{
"nodes": [
{"name": "Agricultural 'waste'"},
{"name": "Bio-conversion"},
{"name": "Liquid"}
],
"links": [
{"source": "Agricultural 'waste'", "target": "Bio-conversion", "value": 124.729},
{"source": "Bio-conversion", "target": "Liquid", "value": 0.597}
]
}
- nodes：包含所有参与流转的实体，每个节点需指定唯一
name - links：定义流量关系，
source和target对应节点名称，value表示流量大小
基础配置代码
以下是水平布局桑基图的核心配置（摘自 test/sankey.html 第 56-73 行）：
var option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'sankey',
focusNodeAdjacency: true, // 鼠标悬停时高亮相邻节点
data: data.nodes,
links: data.links,
lineStyle: {
color: 'gradient', // 流量线使用渐变色
curveness: 0.5 // 线条弯曲度
}
}
]
};
通过 type: 'sankey' 指定图表类型，基础配置仅需 15 行代码即可实现交互式桑基图。
核心配置项解析
布局方向控制
ECharts 支持水平/垂直两种布局方向，通过 orient 属性设置：
// 垂直布局配置（摘自 test/sankey.html 第 114 行）
{
orient: 'vertical', // 垂直流向
type: 'sankey',
// ...其他配置
}
两种布局效果对比：
- 水平布局：适合展示横向流程（如时间序列）
- 垂直布局：适合层级较多的纵向数据（如组织架构）
交互体验优化
- 节点高亮：
focusNodeAdjacency: true实现鼠标悬停时高亮关联节点及流量 - 轨迹追踪：通过
emphasis: { focus: 'trajectory' }突出显示流量完整路径 - 动态提示：自定义 tooltip 显示流量详情（test/sankey.html 第 57-60 行）
样式自定义
ECharts 提供丰富的样式定制选项：
- 节点样式：通过
itemStyle设置节点颜色、边框（test/sankey.html 第 50-54 行） - 流量线样式：支持纯色、渐变、虚线等多种线条类型
- 标签配置：通过
label属性调整节点文本样式与位置
高级应用技巧
多图联动展示
在 test/sankey.html 中，通过创建多个图表实例实现布局对比：
// 创建水平布局图表
var chart0 = echarts.init(document.getElementById('main0'));
chart0.setOption(option0);
// 创建垂直布局图表
var chart1 = echarts.init(document.getElementById('main1'));
chart1.setOption(option1);
通过多图联动，可直观对比不同参数对可视化效果的影响。
大数据量优化策略
当处理超过 1000 条流量数据时，建议开启以下优化：
- 启用渐进式渲染：
progressive: 200 - 关闭动画效果：
animation: false - 简化节点样式：减少复杂边框和阴影效果
实战案例：能源消耗可视化
以 test/data/energy.json 中的能源数据为例，桑基图清晰展示了：
- 能源从原始资源（如 Coal reserves）到最终消耗（如 Road transport）的完整链条
- 各环节能量损耗比例（Losses 节点累计值）
- 不同能源类型（固体、液体、气体）的占比分布
通过动态交互，可快速定位关键流转路径和瓶颈节点，为能源优化提供数据支持。
常见问题解决方案
节点重叠问题
当节点数量过多时，可通过以下配置调整：
series: [{
// ...
nodeWidth: 20, // 节点宽度
nodeGap: 8, // 节点间距
layoutIterations: 32 // 布局迭代次数，值越大布局越规整
}]
流量线颜色配置
除默认渐变色外，可自定义流量线颜色映射：
lineStyle: {
color: function(params) {
// 根据源节点名称返回不同颜色
return params.source === 'Coal' ? '#ff4444' : '#4488ff';
}
}
总结与扩展学习
通过本文介绍，您已掌握 ECharts 桑基图的核心用法。更多高级功能可参考：
- 官方测试用例：test/sankey.html
- 主题样式定制：theme/ 目录下的预设主题
- 交互事件处理：ECharts 事件 API 文档
桑基图作为流量分析的利器，正广泛应用于数据运营、系统监控和科学研究等领域。合理运用这一工具，将为您的数据分析工作带来全新视角。
点赞收藏本文，关注后续《ECharts 地理数据可视化》专题教程！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
