只会折线图、条形图、饼图？

现在非常流行可视化数据，那么今天咱就来讲讲桑基图[1]。

Sankey图通常用于科学领域，特别是物理领域。它们被用来表示能量输入，有用的输出和浪费的输出。

下边这个图非常典型，是从欧盟官网[2]扒拉下来的。它展示了2016年欧盟国家能量流动的趋势，不同的颜色代表不同领域的消耗。我加上了svg描边动画stroke-dashoffet以及stroke-dasharray，做出了动态效果。

来，横屏开始。可以点击这个桑基图的任意区域，会有惊喜哦~

好，转回来。

下面呢，就是我根据桑基图是思想改造的一个图，数据来源于 WTO 2016年世界贸易量[3]，我选取了中国大陆、美国、日本、中国台湾地区的出口量关系，旨在通过展现这些国家/地区的贸易量来探究中国的国际形势。

然后接着横屏吧，记住哦，中国大陆、美国、日本、中国台湾。（憋说你找不到他们在哪里）

从上图我们可以看到中国目前的局势啦，具体的后边我会再跟大家分享，会用到上边这张图噢。

1.入门版

国外有些人开发了一些网站，免费制作桑基图，操作简单，但是外观不是特别好看。

https://sankey.csaladen.es/

http://sankeymatic.com/build/（推荐）

2.我没用过版

很多啦，但是我都没有试过。

3.程序员版

最漂亮的就是用 js 库调用，包括百度的 echarts.js 、非常著名的 d3.js 。

https://github.com/d3/d3/wiki/Gallery

当然我们不需要完全自己做，现在很多网站展示的都是svg，我们可以直接拷贝代码下来，放进Ai进行二次操作、美化，难度也不大，非常推荐。