建站
咨詢
售后
建站咨詢
新聞中心
桑基圖
本章介紹 ECharts 系列的?；鶊D（series[i]-sankey）。我們也稱桑基圖為?；芰科胶鈭D，具有特殊類型的流程圖，它主要用來表示原材料、能量等如何從初始形式經(jīng)過中間過程的加工、轉化到達最終形式。以下是使用?；鶊D的一個實例，您可以參考它。
成都創(chuàng)新互聯(lián)從2013年創(chuàng)立，先為東山等服務建站，東山等地企業(yè)，進行企業(yè)商務咨詢服務。為東山企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。
示例：
點擊編輯實例 》》
桑基圖可視編碼
?；鶊D將原數(shù)據(jù)中的每個節(jié)點（node）編碼成一個小矩形，不同的節(jié)點盡量用不同的顏色展示，小矩形旁邊的 label 編碼的是節(jié)點的名稱。
此外，圖中每兩個小矩形之間的邊編碼的是原數(shù)據(jù)中的 link，邊的粗細編碼的是 link 中的 value。
排序： 如果想指定結果的縱向順序，那么可以把 layoutIterations 設為 0，此時縱向的順序依照數(shù)據(jù)在 links 中出現(xiàn)的順序。
桑基圖屬性
typeECharts?；鶊D的 type 設置為 sankey。
zlevel所有圖形的 zlevel 值，默認為 0。
zlevel 用于 Canvas 分層，不同 zlevel 值的圖形會放置在不同的 Canvas 中，Canvas 分層是一種常見的優(yōu)化手段。我們可以把一些圖形變化頻繁（例如有動畫）的組件設置成一個單獨的zlevel。需要注意的是過多的 Canvas 會引起內存開銷的增大，在手機端上需要謹慎使用以防崩潰。
zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面。
z組件的所有圖形的 z 值，默認值為 2?？刂茍D形的前后順序。z 值小的圖形會被 z 值大的圖形覆蓋。
z 相比 zlevel 優(yōu)先級更低，而且不會創(chuàng)建新的 Canvas。
leftsankey 組件離容器左側的距離，默認為 5%。
left 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比，也可以是 'left', 'center', 'right'。
如果 left 的值為'left', 'center', 'right'，組件會根據(jù)相應的位置自動對齊。
topsankey組件離容器上側的距離，默認為 5%。
top 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比，也可以是 'top', 'middle', 'bottom'。
如果 top 的值為'top', 'middle', 'bottom'，組件會根據(jù)相應的位置自動對齊。
rightsankey組件離容器右側的距離，默認為 20%。
right 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比。
bottomsankey組件離容器下側的距離，默認為 5%。
bottom 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比。
width設置 sankey 組件的寬度。
height設置 sankey 組件的高度。
nodeWidth圖中每個矩形節(jié)點的寬度，默認為 20。
nodeGap?；鶊D中每一列任意兩個矩形節(jié)點之間的間隔，默認間隔為 8。
layoutIterations布局的迭代次數(shù)，用來不斷優(yōu)化圖中節(jié)點的位置，以減少節(jié)點和邊之間的相互遮蓋。
默認布局迭代次數(shù)：32。
經(jīng)測試，布局迭代次數(shù)不要低于默認值。
labellabel 描述了每個矩形節(jié)點中文本標簽的樣式。
itemStyle?；鶊D節(jié)點矩形的樣式。
lineStyle桑基圖邊的樣式，其中 lineStyle.normal.color 支持設置為'source'或者'target'特殊值，此時邊會自動取源節(jié)點或目標節(jié)點的顏色作為自己的顏色。
data[i]桑基圖中的數(shù)據(jù)內容數(shù)組。數(shù)組項可以為單個數(shù)值，如：
[12, 34, 56, 10, 23]如果需要在數(shù)據(jù)中加入其它維度給 visualMap 組件用來映射到顏色等其它圖形屬性。每個數(shù)據(jù)項也可以是數(shù)組，如：
[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]這時候可以將每項數(shù)組中的第二個值指定給 visualMap 組件。
更多時候我們需要指定每個數(shù)據(jù)項的名稱，這時候需要每個項為一個對象：
[{
// 數(shù)據(jù)項的名稱
name: '數(shù)據(jù)1',
// 數(shù)據(jù)項值8
value: 10
}, {
name: '數(shù)據(jù)2',
value: 20
}]需要對個別內容指定進行個性化定義時：
[{
name: '數(shù)據(jù)1',
value: 10
}, {
// 數(shù)據(jù)項名稱
name: '數(shù)據(jù)2',
value : 56,
//自定義特殊 tooltip，僅對該數(shù)據(jù)項有效
tooltip:{},
//自定義特殊itemStyle，僅對該item有效
itemStyle:{}
}]nodes同上述的 data。
links[i]節(jié)點間的關系數(shù)據(jù)。示例：
links: [{
source: 'n1',
target: 'n2'
}, {
source: 'n2',
target: 'n3'
}]edges同上述的 links 所述。
silent圖形是否不響應和觸發(fā)鼠標事件，默認為 false，即響應和觸發(fā)鼠標事件。
animation是否開啟動畫，默認值為 true，即開啟動畫。
animationThreshold是否開啟動畫的閾值，默認的閾值為 2000，當單個系列顯示的圖形數(shù)量大于這個閾值時會關閉動畫。
animationDuration初始動畫的時長（默認 1000），支持回調函數(shù)，可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的初始動畫效果：
animationDuration: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}animationEasing初始動畫的緩動效果，默認為 linear。不同的緩動效果可以參考 緩動示例。
animationDelay初始動畫的延遲，支持回調函數(shù)，可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的初始動畫效果。
如下示例：
animationDelay: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}也可以看該示例
animationDurationUpdate數(shù)據(jù)更新動畫的時長（默認為 300）。
支持回調函數(shù)，可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的更新動畫效果：
animationDurationUpdate: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}animationEasingUpdate數(shù)據(jù)更新動畫的緩動效果，默認效果為 cubicOut。
animationDelayUpdate數(shù)據(jù)更新動畫的延遲，支持回調函數(shù)，可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的更新動畫效果。
如下示例：
animationDelayUpdate: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}也可以看該示例
當前文章：創(chuàng)新互聯(lián)ECharts教程：ECharts系列：桑基圖的使用
網(wǎng)頁URL：http://m.fisionsoft.com.cn/article/cogeici.html
