桑基图可以很方便的展示相邻的两个维度的数据关系。
事实上，还可以通过分线的功能，来进行维度穿透，将非相邻的维度间的某些关系进行可视化。
如下图：员工的“性别”与“小组”，两个维度不相邻，但是我们依然可以看出各小组的性别占比。
示意代码如下
<!--
此示例下载自：明点小助手
本页面主要代码来自：https://echarts.apache.org/examples/zh/editor.html
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var option = {
"toolbox": {
"feature": {
"saveAsImage": {
"show": true
},
"dataView": {
"show": true
},
"restore": {
"show": true
}
}
},
"title": {
"text": ""
},
"tooltip": {
"trigger": "item"
},
"series": {
"type": "sankey",
"layout": "none",
"layoutIterations": 50,
"focusNodeAdjacency": "allEdges",
"data": [{
"name": "性别-男",
"value": 24,
"depth": 0
},
{
"name": "性别-女",
"value": 12,
"depth": 0
},
{
"name": "招聘来源-社招",
"value": 21,
"depth": 1
},
{
"name": "招聘来源-校招",
"value": 15,
"depth": 1
},
{
"name": "部门-研发六部",
"value": 36,
"depth": 2
},
{
"name": "小组-二组",
"value": 9,
"depth": 3
},
{
"name": "小组-一组",
"value": 7,
"depth": 3
},
{
"name": "小组-四组",
"value": 7,
"depth": 3
},
{
"name": "小组-三组",
"value": 6,
"depth": 3
},
{
"name": "小组-五组",
"value": 6,
"depth": 3
},
{
"name": "小组-空值",
"value": 1,
"depth": 3
}],
"links": [{
"source": "性别-女",
"target": "招聘来源-校招",
"value": 5,
"_linebyFieldValue": "女",
"lineStyle": {
"color": "#F00"
},
"tooltip": {
"formatter": "性别-女--招聘来源-校招【女】; <b>5</b>"
}
},
{
"source": "性别-男",
"target": "招聘来源-校招",
"value": 10,
"_linebyFieldValue": "男",
"lineStyle": {
"color": "#00F"
},
"tooltip": {
"formatter": "性别-男--招聘来源-校招【男】; <b>10</b>"
}
},
{
"source": "性别-女",
"target": "招聘来源-社招",
"value": 7,
"_linebyFieldValue": "女",
"lineStyle": {
"color": "#F00"
},
"tooltip": {
"formatter": "性别-女--招聘来源-社招【女】; <b>7</b>"
}
},
{
"source": "性别-男",
"target": "招聘来源-社招",
"value": 14,
"_linebyFieldValue": "男",
"lineStyle": {
"color": "#00F"
},
"tooltip": {
"formatter": "性别-男--招聘来源-社招【男】; <b>14</b>"
}
},
{
"source": "招聘来源-校招",
"target": "部门-研发六部",
"value": 10,
"_linebyFieldValue": "男",
"lineStyle": {
"color": "#00F"
},
"tooltip": {
"formatter": "招聘来源-校招--部门-研发六部【男】; <b>10</b>"
}
},
{
"source": "招聘来源-校招",
"target": "部门-研发六部",
"value": 5,
"_linebyFieldValue": "女",
"lineStyle": {
"color": "#F00"
},
"tooltip": {
"formatter": "招聘来源-校招--部门-研发六部【女】; <b>5</b>"
}
},
{
"source": "招聘来源-社招",
"target": "部门-研发六部",
"value": 14,
"_linebyFieldValue": "男",
"lineStyle": {
"color": "#00F"
},
"tooltip": {
"formatter": "招聘来源-社招--部门-研发六部【男】; <b>14</b>"
}
},
{
"source": "招聘来源-社招",
"target": "部门-研发六部",
"value": 7,
"_linebyFieldValue": "女",
"lineStyle": {
"color": "#F00"
},
"tooltip": {
"formatter": "招聘来源-社招--部门-研发六部【女】; <b>7</b>"
}
},
{
"source": "部门-研发六部",
"target": "小组-三组",
"value": 4,
"_linebyFieldValue": "男",
"lineStyle": {
"color": "#00F"
},
"tooltip": {
"formatter": "部门-研发六部--小组-三组【男】; <b>4</b>"
}
},
{
"source": "部门-研发六部",
"target": "小组-四组",
"value": 4,
"_linebyFieldValue": "男",
"lineStyle": {
"color": "#00F"
},
"tooltip": {
"formatter": "部门-研发六部--小组-四组【男】; <b>4</b>"
}
},
{
"source": "部门-研发六部",
"target": "小组-一组",
"value": 4,
"_linebyFieldValue": "男",
"lineStyle": {
"color": "#00F"
},
"tooltip": {
"formatter": "部门-研发六部--小组-一组【男】; <b>4</b>"
}
},
{
"source": "部门-研发六部",
"target": "小组-二组",
"value": 6,
"_linebyFieldValue": "男",
"lineStyle": {
"color": "#00F"
},
"tooltip": {
"formatter": "部门-研发六部--小组-二组【男】; <b>6</b>"
}
},
{
"source": "部门-研发六部",
"target": "小组-空值",
"value": 1,
"_linebyFieldValue": "男",
"lineStyle": {
"color": "#00F"
},
"tooltip": {
"formatter": "部门-研发六部--小组-空值【男】; <b>1</b>"
}
},
{
"source": "部门-研发六部",
"target": "小组-五组",
"value": 5,
"_linebyFieldValue": "男",
"lineStyle": {
"color": "#00F"
},
"tooltip": {
"formatter": "部门-研发六部--小组-五组【男】; <b>5</b>"
}
},
{
"source": "部门-研发六部",
"target": "小组-一组",
"value": 3,
"_linebyFieldValue": "女",
"lineStyle": {
"color": "#F00"
},
"tooltip": {
"formatter": "部门-研发六部--小组-一组【女】; <b>3</b>"
}
},
{
"source": "部门-研发六部",
"target": "小组-二组",
"value": 3,
"_linebyFieldValue": "女",
"lineStyle": {
"color": "#F00"
},
"tooltip": {
"formatter": "部门-研发六部--小组-二组【女】; <b>3</b>"
}
},
{
"source": "部门-研发六部",
"target": "小组-五组",
"value": 1,
"_linebyFieldValue": "女",
"lineStyle": {
"color": "#F00"
},
"tooltip": {
"formatter": "部门-研发六部--小组-五组【女】; <b>1</b>"
}
},
{
"source": "部门-研发六部",
"target": "小组-四组",
"value": 3,
"_linebyFieldValue": "女",
"lineStyle": {
"color": "#F00"
},
"tooltip": {
"formatter": "部门-研发六部--小组-四组【女】; <b>3</b>"
}
},
{
"source": "部门-研发六部",
"target": "小组-三组",
"value": 2,
"_linebyFieldValue": "女",
"lineStyle": {
"color": "#F00"
},
"tooltip": {
"formatter": "部门-研发六部--小组-三组【女】; <b>2</b>"
}
}]
}
};
myChart.setOption(option);
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>
