Echarts数据可视化 第4章 Echarts可视化图 4.12 桑基图

Echarts数据可视化

Echarts数据可视化：入门、实战与进阶

第4章 Echarts可视化图

4.12 桑基图

桑基图又叫能量分流图，也叫桑基能量平衡图，举个栗子

option = {
  series: {
    type: 'sankey',
    data: [
      {
        name: '输入1'
      },
      {
        name: '输入2'
      },
      {
        name: '输出1'
      },
      {
        name: '输出2'
      },
      {
        name: '中间层'
      },
      {
        name: '输出3'
      }
    ],
    links: [
      {
        source: '输入1',
        target: '输出2',
        value: 4
      },
      {
        source: '输入2',
        target: '中间层',
        value: 6
      },
      {
        source: '输入1',
        target: '中间层',
        value: 2
      },
      {
        source: '中间层',
        target: '输出1',
        value: 3
      },
      {
        source: '中间层',
        target: '输出3',
        value: 2
      }
    ]
  }
};

渲染效果

简单解释一下，图中延伸的分支宽度(粗细) 代表能量的大小，桑基图的特征就是首末端的能量相等，所以在图中表现出的宽度总和是相同的。

桑基图的series 中的type 参数值为 sankey，在data 中定义所有节点，在links 中定义能量的起点和终点以及能量流的大小。

当鼠标悬停在可视化图的能量流上时，该条能量流会加深显示，还可以拖动节点的位置