視覺化圖形制作之關係圖

ECharts是一款資料視覺化圖表庫，因為其擁有多種多樣的圖表樣式，炫酷的展示效果，並有個性化的定製的能力，所有有很多BI產品比如Smartbi會選擇整合Echart圖形以便進行視覺化圖表的製作。

 

 

今天我們給大傢俱體來講述一種Echarts圖形——關係圖的製作。

關係圖是什麼

關係圖是指使用圖形和連線表示節點與節點（人物或是事物）之間關係的一類圖。下圖是一個關係圖示例，展示人物之間的關係。每個節點的顏色表示他們的型別，圓圈大小表示每個人的聲望大小，圓圈越大，聲望越大。

 

 

關係圖怎麼做

下面我們就以上圖賈伯斯的人物關係圖為例來演示如何實現關係圖。

資料要求

一個關係線需要五個資料：連線的目標和源，用於標識目標和源的型別及大小，目標和源的關係。本示例採用了northwind資料來源內的t_gxt表，表的結構和資料如下圖：

 

實現步驟

1. 在Smartbi中開啟即席查詢選擇northwind資料來源內的t_gxt表，勾選需要的欄位。

2. 在即席查詢工具欄中選擇 圖形 選項。

 

3. 進入Echarts作圖介面，圖形型別選擇 關係圖。源節點選擇欄位"人物A"；目標節點選擇欄位"人物B"；關係名稱（是指節點之間的關係描述，比如父子）可以不選擇。

 

4. 分別點選源節點欄位和目標節點欄位後面的設定，則進行資料點分類和資料點數值的設定。

資料點分類：是根據此節點進行分類，作為圖例可顯示出來分類，以不同顏色標識。

資料點數值：用於顯示點的大小比例範圍。其數值大小以圖形大小為標識，資料越大表示越重要。

資料點人物A設定如下圖：

 

資料點人物B設定如下圖：

 

4、設定顯示圖例，圖例在圖形上方顯示。圖例是取分類的值。

 

5、設定圖形主題

 

6、切換到序列設定。

設定顯示方式為“力引導佈局”；連線曲率為0.5；斥力因子為600；勾選拖拽；勾選顯示資料項標籤；資料點大小為40；

 

 

7、點選確定，檢視效果：

 

 

最近Smartbi在麥粉社群舉辦了一個「資料視覺化作品大比拼」活動，不僅能夠秀出自己的資料視覺化能力，贏取千元大獎；還能和全國各地的資料分析師切磋交流，提升資料技能。感興趣的小夥伴都可以去參與一下，聽說，參賽就能獲得社群麥豆獎勵噢~
資料視覺化作品大比拼：