別搞那些花裡胡哨的，直接用FineReport，內建圖表，一鍵搞定。

桑基圖 (Sankey Diagram)，是一種特定型別的流圖，用於描述一組值到另一組值的流向。

圖中延伸的分支的寬度對應資料流量的大小，通常應用於能源、材料成分、金融等資料的視覺化分析。

1.3 圖表特點

起始流量和結束流量相同，所有主支寬度的總和與所有分出去的分支寬度總和相等，保持能量的平衡。在內部，不同的線條代表了不同的流量分流情況，它的寬度成比例地顯示此分支佔有的流量。節點不同的寬度代表了特定狀態下的流量大小。桑基圖通常應用於能源、材料成分、金融等資料的視覺化分析。2. 示例

2.1 外掛安裝

2.2 插入圖表

外掛安裝後，新建決策報表，將圖表管理面板的桑基圖拖拽到 body 元件中，如下圖所示：

2.3 資料準備

新建內建資料集 Embedded1，如下圖所示：

2.4 資料繫結

2.5 樣式設定

桑基圖有 6 個樣式配置項，示例都採用預設設定，如下圖所示：

樣式對應的前端展示效果如下圖所示：

2.6 特效設定

桑基圖支援設定互動動畫，但是不支援條件顯示，示例採用預設設定，如下圖所示：

2.7 效果預覽

桑基圖（Sankey diagram），即桑基能量分流圖，也叫桑基能量平衡圖。它是一種特定型別的流程圖，圖中延伸的分支的寬度對應資料流量的大小，通常應用於能源、材料成分、金融等資料的視覺化分析。因1898年Matthew Henry Phineas Riall Sankey繪製的“蒸汽機的能源效率圖”而聞名，此後便以其名字命名為“桑基圖”。 現如今的視覺化軟體行業如此發達，製作此類桑基圖已絕非難事，從最高階的JS庫(D3、Echarts、highchart)到主流的資料科學程式設計工具（R、Python等）亦或者人人都能上手的自助式BI工具（PowerBI、Tableau等）都可以勝任此項工作。

什麼是桑基圖？它說白了就是一種特定型別的流程圖，圖中延伸的分支的寬度對應資料流量的大小，通常應用於能源、材料成分、金融等資料的視覺化分析。

桑基圖可以讓你一目瞭然的展現資料的流動，對於各大行業中資料的視覺化分析非常重要。作為程式設計師，專門為各行業提供軟體服務的開發人員，肯定會遇到各種資料分析，也不可避免的需要畫桑基圖。

在這裡，想要畫出漂亮的桑基圖，我給大家推薦兩個非常實用而且強大的開源專案，無需我們自己畫，只需要引入第三方庫或者外掛即可做出漂亮的桑基圖。

Echarts

Echarts 就不用多說了，做前端開發的肯定都知道，是百度開源的資料視覺化工具，是一個純 JS 的圖示庫，提供了各種豐富的圖表，功能強大。其中就包含了桑基圖。來，感受一下吧，如下圖：

這是程式設計師必知必備的一個開源的視覺化圖表工具啊，有了 Echarts 真的是各種圖表都不怕了，強烈推薦給大家。

highcharts

另外一個是 highcharts ，它跟 Echarts 差不多，一樣提供了豐富的視覺化的圖表。同理，各種各樣的圖表也都有，當然也包含了桑基圖。如下：

關於桑基圖中上面兩個工具外掛的使用方法，請自己去官方檢視，非常簡單，都帶有 demo 和使用的示例，如果是程式設計師，前端開發人員，一般都能看懂，按照官方示例一步一步的操作引入即可。

看完這個，是不是就知道如何畫出漂亮的桑基圖了吧？其實看似複雜的東西，別人都幫你封裝好和實現好了，輪子都已經早好了，我們只需要把現成的輪子拿來用即可。