ECharts圖表製作關係圖

1.1 版本

1.2 應用場景

 本文將使用 ECharts 圖表引用範本資料集製作一個關係圖：

2.1 準備資料

1）點選設計器左上角「檔案>建立普通報表」。

2）準備資料：需準備一個節點表，和一個關係表。本範例使用 內建資料集 製作簡單測試資料，僅展示資料結構，具體可以自己實現。

• 節點表：ds1
  

CATEGORY 作為人員類別，值分別為 0,1,2 。0 為接待、1 為銷售、2 為客戶。

注：value 是關鍵字，等同於節點排序ID，一定要從 0 開始計數，方便後續陣列的關係線的定位。

• 關係表：ds2

SOURCE 為聯動線起點，TARGET為聯動線終點。

關係分兩層，第一層為 接待與銷售，第二層為 銷售與客戶。

3）插入圖表：選中A1儲存格，調整寬高。點選插入圖表，選擇「ECharts圖表」。

2.2 設定圖表

2.2.1 新增資料結構

1）選中圖表，點選右側「儲存格元素>配置」，新增一個「二維陣列結構」。

2）選擇資料集 ds1，計算方式選擇「明細計算」，將資料集中欄位全部勾選新增即可。

3）資料集 ds2 重複相同操作即可。

2.2.2 編輯程式碼

程式碼實現功能點：

• 支撐懸浮提示；

• 支援選中拖拉拽；

• 支援下載為圖片以及重新重新整理佈局；

• 其他參照 echars 程式碼註釋。

點選「程式碼編輯器」，輸入程式碼：

var TABLE_DATA = getData("data1");
var TABLE_DATA1 = getData("data2");
var columnValues = TABLE_DATA.slice(1);
var columnValues1 = TABLE_DATA1.slice(1);
var nodes = columnValues.map(function(item){
return   {  
    name: item[0],  
    VALUE: item[1],  
    category: item[2]  
  };
})
var links = columnValues1.map(function(item){
return   {  
    source: item[1],  
    target: item[0]  
  };
})
   
 var webkitDep = {
    "type": "force",
    "categories": [//關係網類別，可以寫多組
        {
            "name": "服務-接待" //關係網名稱
       
        },
		   {
            "name": "銷售-渠道" //關係網名稱
 
        },
		   {
            "name": "訂單-顧客" //關係網名稱

        }
    ],
   "nodes":  nodes,
    "links":  links
};
  
 
    option = {
	symbolSize: 50,
        legend: {
            data: ['服務-接待','銷售-渠道','訂單-顧客',]//此處的資料必須和關係網類別中name相對應
        },
		 title: {
            text: '人員關係圖譜'
        } ,
		    toolbox: {
            // 顯示工具箱
            show: true,
            feature: {
                mark: {
                    show: true
                },
                // 還原
                restore: {
                    show: true
                },
                // 儲存為圖片
                saveAsImage: {
                    show: true
                }
            }
        },
		    tooltip: {
        show: true, //預設值為true
        showContent: true, //是否顯示提示框浮層
        trigger: "item", //觸發類型，預設資料項觸發
        triggerOn: "mousemove", //提示觸發條件，mousemove滑鼠移至觸發，還有click點選觸發
        alwaysShowContent: false, //預設離開提示框區域隱藏，true為一直顯示
        showDelay: 0, //浮層顯示的延遲，單位為 ms，預設沒有延遲，也不建議設定。在 triggerOn 為 'mousemove' 時有效。
        hideDelay: 200, //浮層隱藏的延遲，單位為 ms，在 alwaysShowContent 為 true 的時候無效。
        enterable: false, //滑鼠是否可進入提示框浮層中，預設為false，如需詳情內交互，如新增連結，按鈕，可設定為 true。
        position: "right", //提示框浮層的位置，預設不設定時位置會跟隨滑鼠的位置。只在 trigger 為'item'的時候有效。
        confine: false, //是否將 tooltip 框限制在圖表的區域內。外層的 dom 被設定為 'overflow: hidden'，或者行動端窄屏，導致 tooltip 超出外界被截斷時，此配置比較有用。
        transitionDuration: 0.4, //提示框浮層的行動動畫過渡時間，單位是 s，設定為 0 的時候會緊跟着滑鼠行動。
        },
	 
        series: [{
            type: 'graph',
            layout: 'force',
            animation: false,
 
		  focusNodeAdjacency: true, // 是否在滑鼠移到節點上的時候突出顯示節點以及節點的邊和鄰接節點。
          // 線條樣式
          lineStyle: {
            width: 1,
            color: "#555555",
            curveness: 0, // 線條的曲執行緒度，從0到1 ---  不加弧度，兩節點互相指向時，線上的字會重疊
            emphasis: {
              //高亮狀態
              width: 8,
            },
          },
            label: {
                normal: {
                    show:true,
                    position: 'right',formatter: '{b}'
                }
            },
            draggable: true,
            data: webkitDep.nodes.map(function (node, idx) {
                node.id = idx;
                return node;
            }),
            categories: webkitDep.categories,
            force: {
                edgeLength: 105,//遠端的長度
                repulsion: 100  //子節點之間的間距
            },
            edges: webkitDep.links
        }]
    };

效果如下圖所示：

點選下載範本：ECharts关系图谱示例.cpt