ECharts系列：?；鶊D的使用

?；鶊D

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

示例：

點擊編輯實例 》》

?；鶊D可視編碼

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

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

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

?；鶊D屬性

type

ECharts?；鶊D的 type 設(shè)置為 sankey。

zlevel

所有圖形的 zlevel 值，默認為 0。

zlevel 用于 Canvas 分層，不同 zlevel 值的圖形會放置在不同的 Canvas 中，Canvas 分層是一種常見的優(yōu)化手段。我們可以把一些圖形變化頻繁（例如有動畫）的組件設(shè)置成一個單獨的zlevel。需要注意的是過多的 Canvas 會引起內(nèi)存開銷的增大，在手機端上需要謹慎使用以防崩潰。

zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面。

z

組件的所有圖形的 z 值，默認值為 2?？刂茍D形的前后順序。z 值小的圖形會被 z 值大的圖形覆蓋。

z 相比 zlevel 優(yōu)先級更低，而且不會創(chuàng)建新的 Canvas。

left

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

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

如果 left 的值為'left', 'center', 'right'，組件會根據(jù)相應的位置自動對齊。

top

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

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

如果 top 的值為'top', 'middle', 'bottom'，組件會根據(jù)相應的位置自動對齊。

right

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

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

bottom

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

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

width

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

height

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

nodeWidth

圖中每個矩形節(jié)點的寬度，默認為 20。

nodeGap

?；鶊D中每一列任意兩個矩形節(jié)點之間的間隔，默認間隔為 8。

layoutIterations

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

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

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

label

label 描述了每個矩形節(jié)點中文本標簽的樣式。

itemStyle

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

lineStyle

?；鶊D邊的樣式，其中 lineStyle.normal.color 支持設(shè)置為'source'或者'target'特殊值，此時邊會自動取源節(jié)點或目標節(jié)點的顏色作為自己的顏色。

data[i]

?；鶊D中的數(shù)據(jù)內(nèi)容數(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
}]

需要對個別內(nèi)容指定進行個性化定義時：

[{
    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é)點間的關(guān)系數(shù)據(jù)。示例：

links: [{
    source: 'n1',
    target: 'n2'
}, {
    source: 'n2',
    target: 'n3'
}]

edges

同上述的 links 所述。

silent

圖形是否不響應和觸發(fā)鼠標事件，默認為 false，即響應和觸發(fā)鼠標事件。

animation

是否開啟動畫，默認值為 true，即開啟動畫。

animationThreshold

是否開啟動畫的閾值，默認的閾值為 2000，當單個系列顯示的圖形數(shù)量大于這個閾值時會關(guān)閉動畫。

animationDuration

初始動畫的時長（默認 1000），支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的初始動畫效果：

animationDuration: function (idx) {
    // 越往后的數(shù)據(jù)延遲越大
    return idx * 100;
}

animationEasing

初始動畫的緩動效果，默認為 linear。不同的緩動效果可以參考 緩動示例。

animationDelay

初始動畫的延遲，支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的初始動畫效果。

如下示例：

animationDelay: function (idx) {
    // 越往后的數(shù)據(jù)延遲越大
    return idx * 100;
}

也可以看該示例

animationDurationUpdate

數(shù)據(jù)更新動畫的時長（默認為 300）。

支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的更新動畫效果：

animationDurationUpdate: function (idx) {
    // 越往后的數(shù)據(jù)延遲越大
    return idx * 100;
}

animationEasingUpdate

數(shù)據(jù)更新動畫的緩動效果，默認效果為 cubicOut。

animationDelayUpdate

數(shù)據(jù)更新動畫的延遲，支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的更新動畫效果。

如下示例：

animationDelayUpdate: function (idx) {
    // 越往后的數(shù)據(jù)延遲越大
    return idx * 100;
}

也可以看該示例