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