桑基图绘制——使用Echarts
桑基图(Sankey diagram),即桑基能量分流图,也叫桑基能量平衡图。它是一种特定类型的流程图,图中延伸的分支的宽度对应数据流量的大小,通常应用于能源、材料成分、金融等数据的可视化分析。
数据要求: 桑基图理论上只支持有向无环图(DAG, Directed Acyclic Graph),所以要确保可视化数据中的边是无环的。
本篇以北京、上海的移民统计为例,参照Echarts官方提供的示例代码,介绍如何定制自己风格的桑基图。
一、节点和边设置统一风格
第一种样式主要是统一对节点和边进行了风格设置,城市节点统一为深蓝色#1b6199
,边为一个渐变效果,效果如下图:
1、数据格式
数据包括城市节点和两城市间的移民统计:
var citylist = [
{
name: '北京'},
{
name: '上海'},
{
name: '广州'},
{
name: '深圳'},
{
name: '香港'}
];
var population=[
{
source: "广州", target: "北京", value: 4567},
{
source: "广州", target: "上海", value: 2060},
{
source: "深圳", target: "北京", value: 1234},
{
source: "深圳", target: "上海", value: 124},
{
source: "香港", target: "北京", value: 3714},
{
source: "香港", target: "上海", value: 3234}
];
2、样式配置
系列列表series
中itemStyle
用来设置节点的样式,lineStyle
用来设置边的样式。注意:在series
中设置的样式应用于所有数据的渲染。具体代码如下:
itemStyle: {
borderWidth: 1, //设置节点的边界宽度
color:'#1b6199', //设置节点颜色
borderColor: '#fff' //设置节点的边界颜色色
},
lineStyle: {
//线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比
color:new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
//设置边为水平方向渐变
offset: 0,
color: '#136bff'
},{
offset: 1,
color