Echart是一款基于JavaScript的開源可視化庫，其中?；鶊D是Echart提供的一種圖表類型。?；鶊D用于展示兩個維度之間的關(guān)系，它將兩個維度之間的關(guān)系以梳理圖的形式形象地展示了出來。在Echart中，?；鶊D可以通過JSON數(shù)據(jù)進行展示。下面我們來看看如何使用JSON數(shù)據(jù)渲染Echart?；鶊D。

{
"tooltip": {
"trigger": "item",
"formatter": "{a}
 : {c}"
},
"series": [
{
"type": "sankey",
"layout": "none",
"data": [
{
"name": "A"
},
{
"name": "B"
},
{
"name": "C"
},
{
"name": "D"
},
{
"name": "E"
},
{
"name": "F"
}
],
"links": [
{
"source": "A",
"target": "B",
"value": 10
},
{
"source": "A",
"target": "C",
"value": 15
},
{
"source": "B",
"target": "D",
"value": 12
},
{
"source": "C",
"target": "D",
"value": 5
},
{
"source": "D",
"target": "E",
"value": 20
},
{
"source": "D",
"target": "F",
"value": 10
}
]
}
]
}

首先，我們需要使用Echart提供的“sankey”類型。然后用“l(fā)ayout”屬性設(shè)置?；鶊D的布局方式，這里我們選擇了“none”布局。然后通過“data”屬性設(shè)置節(jié)點的名稱，節(jié)點名稱可以自由指定。最后，通過“l(fā)inks”屬性設(shè)置節(jié)點之間的關(guān)系，其中“source”屬性表示節(jié)點的起始位置，而“target”屬性表示節(jié)點的結(jié)束位置，“value”屬性則表示節(jié)點之間的關(guān)系強度。

通過以上JSON數(shù)據(jù)，我們可以呈現(xiàn)出以下的桑基圖。