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

た入场券 2024-03-25 20:18 48阅读 0赞

#### Echarts数据可视化 ####

#### 文章目录 ####

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

> 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
          }
        ]
      }
    };

渲染效果

![在这里插入图片描述][eb70d3df24e44e2fb5647b7d9c904413.png_pic_center]

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

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

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

![在这里插入图片描述][b8bafabfbb3d4480a9d112ee29811ff7.gif_pic_center]

[eb70d3df24e44e2fb5647b7d9c904413.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/d103d2e48e53432c87d6825b8149653b.png
[b8bafabfbb3d4480a9d112ee29811ff7.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/850fd155e10341abbe5f447c7493666f.png