桑基图实例(Echarts版）

以前有看过桑基图的实例，但是一直没有实践过，最近在搞用户行为分析，想看看用户访问路径，一直没有一个很好的工具来展现。之前手工在思维导图的搞过，但是太费事了，这次想起了这个桑基图，想看看能不能实现想要的效果。

网上的很多例子都是基于Tableau或者其他工具，感觉有点儿复杂，而且Tableau也没找到好的教程，就想着看看有没有基于Python或者开源的工具展示的。

找了下，基于Python、R都是可以做的，然后想ECharts、highcharts也都有现成的案例，这里就开始学习下。

ECharts

echarts官方实例有很多，先看个官方的例子

实现的思路很简单，我理解下来只需要两步：

• 标签（节点）
  就是图中的每一个节点，都需要提前声明下

• 关联关系和权重
  节点有了，我们还需要指定他们的流向，也就是顺序，echarts里有source和target来表示，还有一个就是权重值，也就是图中线条的宽度。

下面，我们来看一个简单的例子

option = {
    title: {
        text: '桑基图实例',
        x:'center'
    },
    series: {
        type: 'sankey',
        layout:'none',
        data: [{
            name: '进入'
        }, {
            name: '首页'
        }, {
            name: '个人中心'
        }, {
            name: '购物车'
        }],
        links: [{
            source: '进入',
            target: '首页',
            value: 5
        }, {
            source: '进入',
            target: '个人中心',
            value: 3
        }, {
            source: '进入',
            target: '购物车',
            value: 8
        }]
    }
};

这里我们只要构造自己的data和links就可以了，都是标准的json串

我这里主要是想实现个用户访问路径的可视化效果，简单试了下，可以是可以的，就是还有些问题要想清楚

这里有几个点注意下：

• 节点的名字不能重复
  这个想想也是对的，节点名字是唯一的

• 节点不能流向自己
  这个我感觉应该是可以的，我当时是希望可以实现的，因为页面之间跳转，最后又流转回来也是可以的，但是echarts中不行， 那就注意下吧，所以我目前的解决方式是，每一次浏览都加个前缀，所以会有1-，2-这样的内容出现。

• 节点数量不宜太多
  一开始我想把所有的页面都展示出来，但是发现，一个是不好看，一个是页面展示不了，这个也没问题，就是展示的时候，我们保留核心想表达的内容就好，毕竟，太多，也影响效果。

这个是做的一个两级的页面路径，但是有一个问题，就是没法控制它显示的位置，比如第一级页面和第二级页面

当然，因为我这里只显示了首页的下级页面，如果其他的也有的话，就没有问题了，但是末尾页面一定都是显示在最后1排。