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

网上的很多例子都是基于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排。