桑基图简介
相信大部分的前端工程师都知道echarts.js这个库吧，今天我们来讲解一下Echarts里面的桑基图(sankey)。 百度百科对sankey图的解释是：桑基图，即桑基能量分流图，也叫桑基能量平衡图。它是一种特定类型的流程图。 知道了桑基图的释义，我们还需要知道桑基图的构成，桑基图由节点（nodes）、连接（links）构成。其中连接 （links）： 源节点至目标节点之间的关系，每个连接包括三个元素：
- source： 源节点
- target： 目标节点
- value： 数据 知道了桑基图的释义和构成之后我们就要开始绘制桑基图（使用Echarts.js 绘制）
- 通过npm install echarts --save 安装（或自己去下载js包）
- 引入echarts
const echarts = require('echarts');
3.绘制图表
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
title: {
text: 'sankey'
},
series: [{
name: 'sankey',
type: 'sankey',
data: [{name:'a'},{name:'b'},{name:'c'}],
links:[
{source:'a', target:'b', value:10},
{source:'b', target:'c', value:10},
]
}]
});
通过以上步骤我们可以实现一个简易版的桑基图。
桑基图遇到的问题
当links变成这样
links:[
{source:'a', target:'b', value:10},
{source:'b', target:'a', value:10},
]
我们会发现canvas的绘制区没有任何绘制，打开控制台看到了：Error: Sankey is a DAG, the original data has cycle!
错误翻译过来就是“桑基图是一个有向无环图，原始数据有环”，从错误中我们可以看出桑基图是一个有向无环的图，简单点来理解就是数据不能回流。一般这种情况我们前端工程师肯定会比较高兴的告诉后端这个报错的锅我不背，是你们的数据有问题，你们快改。但是这种情况只是一般情况下，因为在做桑基图之前我们已经有两个图（看下图）共用这个数据接口了。
所以说让后端解决这个问题他们肯定也不愿意去多出一个接口，而且就算后端大拿愿意帮你解决这个问题还要等后端的排期。所以求人不如求己，还不如我们自己来解决一下这个问题。
问题解决思路
通过报错咱们也看出了错误是数据出现了回流，所以解决错误的方法也很简单，删除回流的数据关系！ 接下来我说一下我的解决问题的思路，当然也不一定是最优思路：
1.算出每一个节点的层级以节点的名称为key保存到一个json里面。
注：保存到json的原因是json的key不会重复
算层级的代码：
2.比较关系（links）里面的source和target
如果source > target || source = target(这种情况应该不会出现) 时，数据就是回流了
3.删除links里面回流关系对应的数据
问题总结
通过以上问题可以看出Echarts表面用起来比较简单，容易上手。但是我们也要了解Echarts里面每个图的含义，比如说桑基图是分流图，分流的话是不能数据回流的。只有我们了解了每个图的特性遇到问题才能快速找到解决问题的方法。
