版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012535605/article/details/80328174
在分析工作中需要做流量分发，桑基图可以很好的展示流量分发的过程，数据展示如下图
code如下：
<!DOCTYPE html>
<html>
<head>
<title>Sankey</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="viewport" content="width=device-width, initial-scale=2" />
<script src="js/jquery-1.11.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.5.3/echarts.min.js"></script>
</head>
<body>
<div class="container"></div>
<div class="line"></div>
<div id="main" style="width: 400px;height:600px;"></div>
<script type="text/javascript">
var data = [
{name: 'aa',value: 10},
{name: 'bb',value: 20},
{name: 'cc', value: 20},
{name: 'dd',value: 10},
{name: 'ee',value: 20},
{name: 'ff',value: 20}
];
var links = [
{source: 'aa',target: 'cc',value:3},
{source: 'aa',target: 'ff',value:4},
{source: 'aa', target: 'dd',value:3},
{source: 'bb',target: 'cc',value:8},
{source: 'bb',target: 'dd',value:9},
{source: 'bb',target: 'ff',value:3},
{source: 'ee',target: 'ff',value:3},
{source: 'ee',target: 'cc',value:3},
{source: 'ee',target: 'dd',value:3},
] ;
var myChart = echarts.init(document.getElementById('main'));
var option =
{ title: { text: 'Sankey Diagram' },
tooltip: { trigger: 'item',
triggerOn: 'mousemove' },
color : [ '#60C0DD','#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'],
series: [ { type: 'sankey',
//layout: 'none',
data: data,
links: links,
itemStyle: { normal: { borderWidth: 2,
borderColor: '#aaa',
//label:{
// show: true,
// position:'insideLeft|insideRight'}
}
},
lineStyle: { normal: { color: 'source', curveness: 0.6 } } }
]
}
myChart.setOption(option);
</script>
</body>
</html>