ECharts 桑基图：绘制数据流动关系图
桑基图（Sankey Diagram）是一种用于展示流动关系的图表，特别适合于表现能量、资金或物质等的流向与数量关系。桑基图通过节点和连接线的粗细来直观地表达数据的流动情况，非常适合于分析复杂系统中的资源流动。本文将详细介绍如何使用 ECharts 绘制桑基图，并讲解其配置方法和样式设置。
一、桑基图的基础知识
桑基图的特点在于流动的方向和大小可以通过线条的宽度表示，线的粗细代表流动量的大小，而节点则表示流动的源头和去向。桑基图不仅能直观地展示流向关系，还能帮助识别流动的主要来源和去向。
二、安装 ECharts
在使用 ECharts 桑基图之前，首先确保在项目中引入 ECharts。可以通过 CDN 进行引入：
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
三、绘制基本的桑基图
1. 定义 HTML 结构
首先，定义一个用于展示桑基图的 <div> 容器：
<div id="sankeyChart" style="width: 800px; height: 600px;"></div>
2. 配置桑基图的 option
以下是一个绘制基本桑基图的配置示例：
var sankeyChart = echarts.init(document.getElementById('sankeyChart'));
var sankeyOption = {
title: {
text: '桑基图示例',
left: 'center',
textStyle: {
color: '#333',
fontSize: 20
}
},
tooltip: {
trigger: 'item',
formatter: '{b}: {c}'
},
series: {
type: 'sankey',
layout: 'orient',
data: [
{ name: '输入' },
{ name: '输出1' },
{ name: '输出2' },
{ name: '输出3' }
],
links: [
{ source: '输入', target: '输出1', value: 8 },
{ source: '输入', target: '输出2', value: 6 },
{ source: '输入', target: '输出3', value: 4 }
],
itemStyle: {
normal: {
borderColor: '#fff',
borderWidth: 1,
opacity: 0.8
}
},
lineStyle: {
normal: {
color: '#aaa',
opacity: 0.5,
curveness: 0.5
}
}
}
};
sankeyChart.setOption(sankeyOption);
3. 完整的 HTML 代码示例
以下是完整的 HTML 文件代码，包含桑基图的创建和渲染：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts 桑基图示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<h1>使用 ECharts 绘制桑基图</h1>
<div id="sankeyChart" style="width: 800px; height: 600px;"></div>
<script>
var sankeyChart = echarts.init(document.getElementById('sankeyChart'));
var sankeyOption = {
title: {
text: '桑基图示例',
left: 'center',
textStyle: {
color: '#333',
fontSize: 20
}
},
tooltip: {
trigger: 'item',
formatter: '{b}: {c}'
},
series: {
type: 'sankey',
layout: 'orient',
data: [
{ name: '输入' },
{ name: '输出1' },
{ name: '输出2' },
{ name: '输出3' }
],
links: [
{ source: '输入', target: '输出1', value: 8 },
{ source: '输入', target: '输出2', value: 6 },
{ source: '输入', target: '输出3', value: 4 }
],
itemStyle: {
normal: {
borderColor: '#fff',
borderWidth: 1,
opacity: 0.8
}
},
lineStyle: {
normal: {
color: '#aaa',
opacity: 0.5,
curveness: 0.5
}
}
}
};
sankeyChart.setOption(sankeyOption);
</script>
</body>
</html>
四、桑基图的配置详解
1. 节点和链接的配置
- data：节点数据，用于定义桑基图中的所有节点。每个节点可以有一个
name属性。 - links：链接数据，用于定义节点之间的流动关系。每个链接包含以下属性：
- source：流动的起始节点。
- target：流动的目标节点。
- value：流动的数量。
2. 节点样式配置
通过 itemStyle 属性可以自定义节点的样式：
itemStyle: {
normal: {
borderColor: '#fff',
borderWidth: 1,
opacity: 0.8
}
}
3. 链接样式配置
通过 lineStyle 属性可以自定义链接的样式：
lineStyle: {
normal: {
color: '#aaa',
opacity: 0.5,
curveness: 0.5
}
}
- color：链接的颜色。
- opacity：链接的透明度。
- curveness：链接的曲线度，值越大曲线越明显。
五、增加交互性和动态效果
1. 添加工具提示
工具提示可以通过 tooltip 属性配置，使用户在鼠标悬停时看到详细信息：
tooltip: {
trigger: 'item',
formatter: function (params) {
return `${params.data.source} → ${params.data.target}<br />流动量: ${params.data.value}`;
}
}
2. 动态更新数据
如果需要动态更新桑基图的数据，可以通过 setOption 方法重新设置新的数据。例如，增加一个新的输出节点：
sankeyChart.setOption({
series: {
data: [
{ name: '输入' },
{ name: '输出1' },
{ name: '输出2' },
{ name: '输出3' },
{ name: '输出4' } // 新增节点
],
links: [
{ source: '输入', target: '输出1', value: 8 },
{ source: '输入', target: '输出2', value: 6 },
{ source: '输入', target: '输出3', value: 4 },
{ source: '输入', target: '输出4', value: 5 } // 新增链接
]
}
});
六、总结
本文详细介绍了如何使用 ECharts 绘制桑基图，包括基本桑基图的创建、节点和链接的配置、样式设置及交互效果的增强。桑基图是一种直观、易于理解的数据可视化工具，适合于展示各种流动关系。希望这篇博客能够帮助您掌握 ECharts 中桑基图的使用！