ECharts系列：桑基圖的使用

?；鶊D

本章介紹 ECharts 系列的桑基圖（series[i]-sankey）。我們也稱?；鶊D為?；芰科胶鈭D，具有特殊類型的流程圖，它主要用來表示原材料、能量等如何從初始形式經(jīng)過中間過程的加工、轉(zhuǎn)化到達(dá)最終形式。以下是使用?；鶊D的一個(gè)實(shí)例，您可以參考它。

示例：

點(diǎn)擊編輯實(shí)例 》》

?；鶊D可視編碼

?；鶊D將原數(shù)據(jù)中的每個(gè)節(jié)點(diǎn)（node）編碼成一個(gè)小矩形，不同的節(jié)點(diǎn)盡量用不同的顏色展示，小矩形旁邊的 label 編碼的是節(jié)點(diǎn)的名稱。

此外，圖中每兩個(gè)小矩形之間的邊編碼的是原數(shù)據(jù)中的 link，邊的粗細(xì)編碼的是 link 中的 value。

排序： 如果想指定結(jié)果的縱向順序，那么可以把 layoutIterations 設(shè)為 0，此時(shí)縱向的順序依照數(shù)據(jù)在 links 中出現(xiàn)的順序。

?；鶊D屬性

type

ECharts?；鶊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。

left

sankey 組件離容器左側(cè)的距離，默認(rèn)為 5%。

left 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比，也可以是 'left', 'center', 'right'。

如果 left 的值為'left', 'center', 'right'，組件會(huì)根據(jù)相應(yīng)的位置自動(dòng)對(duì)齊。

top

sankey組件離容器上側(cè)的距離，默認(rèn)為 5%。

top 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比，也可以是 'top', 'middle', 'bottom'。

如果 top 的值為'top', 'middle', 'bottom'，組件會(huì)根據(jù)相應(yīng)的位置自動(dòng)對(duì)齊。

right

sankey組件離容器右側(cè)的距離，默認(rèn)為 20%。

right 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比。

bottom

sankey組件離容器下側(cè)的距離，默認(rèn)為 5%。

bottom 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比。

width

設(shè)置 sankey 組件的寬度。

height

設(shè)置 sankey 組件的高度。

nodeWidth

圖中每個(gè)矩形節(jié)點(diǎn)的寬度，默認(rèn)為 20。

nodeGap

桑基圖中每一列任意兩個(gè)矩形節(jié)點(diǎn)之間的間隔，默認(rèn)間隔為 8。

layoutIterations

布局的迭代次數(shù)，用來不斷優(yōu)化圖中節(jié)點(diǎn)的位置，以減少節(jié)點(diǎn)和邊之間的相互遮蓋。

默認(rèn)布局迭代次數(shù)：32。

經(jīng)測試，布局迭代次數(shù)不要低于默認(rèn)值。

label

label 描述了每個(gè)矩形節(jié)點(diǎn)中文本標(biāo)簽的樣式。

itemStyle

?；鶊D節(jié)點(diǎn)矩形的樣式。

lineStyle

桑基圖邊的樣式，其中 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í)長（默認(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í)長（默認(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;
}

也可以看該示例