echarts實現group關系圖案例

官網案例：https://www.echartsjs.com/examples/zh/editor.html?c=graph-simple

  

 

自己在項目中實現了兩個group圖：

1.先看實現效果，兩個數據量不同，代碼基本上相同

   

    

 

 

 2.實現代碼

2.1.后台代碼的實現，主要實現節點和關系線的封裝，注意：nodes.name不能重復，圖形中顯示的是nodes.value值

group圖的數據結構如下：

{
"nodes":[
　　{
　　"name":"1210089292475469826",
　　"value":"網狀結果指標"
}
],
"links":[
　　{
　　"dec":"權重：0.1",
　　"source":"1210089292991369218",
　　"target":"1210089292857151490"
　　}
]
}

2.2.后台實現封裝，通過map和list集合完成數據封裝，根據自己的業務獲取數據即可

Map<String, Object> map = new HashMap<>();

List<Map<String, Object>> nodes = new ArrayList<>();
List<Map<String, Object>> links = new ArrayList<>();

Map<String, Object> sf = new HashMap<>();
sf.put("value","value值" );
sf.put("name", "name值");
sf.put("category", 3);
nodes.add(sf);
Map<String, Object> sflink = new HashMap<>();
sflink.put("source", mx.get("name"));
sflink.put("target", sf.get("name"));
sflink.put("weight", 1);
links.add(sflink);

       map.put("nodes", nodes);
       map.put("links", links);
       return map;

2.3.js部分代碼（第二個圖為例）

var nodes = result.nodes;
var links = result.links;
var myChart = echarts.init(document.getElementById('main'));

var categoryArray = [{name: "對象"}, {name: "任務"}, {name: "方案"}, {name: "模型"}, {name: "數據集"}]
var graph = {"categories": categoryArray, "nodes": nodes, "links": links}

// 基於准備好的容器(這里的容器是id為chart1的div)，初始化echarts實例
var myChart = echarts.init(document.getElementById("main"));

var option = {
    title: {
        //text: dxm + "的關聯分析",//標題
        top: 'top',//相對在y軸上的位置
        left: 'center'//相對在x軸上的位置
    },
    tooltip: {//提示框，鼠標懸浮交互時的信息提示
        trigger: 'item',//數據觸發類型
        formatter: function (params) {//觸發之后返回的參數，這個函數是關鍵
            if (params.data.dec != undefined) {//如果觸發節點
                return params.data.dec;//返回標簽
            } else {//如果觸發邊value
                // return '關系:'+params.data.dec;
            }
        },
    },
    //工具箱，每個圖表最多僅有一個工具箱
    toolbox: {
        show: true,
        feature: {//啟用功能
            //dataView數據視圖，打開數據視圖，可設置更多屬性,readOnly 默認數據視圖為只讀(即值為true)，可指定readOnly為false打開編輯功能
            // dataView: {show: true, readOnly: true},
            restore: {show: true},//restore，還原，復位原始圖表
            saveAsImage: {show: true}//saveAsImage，保存圖片
        }
    },
    //全局顏色，圖例、節點、邊的顏色都是從這里取，按照之前划分的種類依序選取
    color: ['#EE6A50', '#4F94CD', '#B3EE3A', '#DAA520', '#DA41CE'],
    //圖例，每個圖表最多僅有一個圖例
    legend: [{
        x: 'left',//圖例位置
        orient: 'vertical',  //垂直顯示
        //圖例的名稱，這里返回短名稱，即不包含第一個，當然你也可以包含第一個，這樣就可以在圖例中選擇主干人物
        data: categoryArray.map(function (a) {
            return a.name;
        })
    }],
    //sereis的數據: 用於設置圖表數據之用
    series: [
        {
            //name: dxm + "的關聯分析",//系列名稱
            type: 'graph',//圖表類型
            layout: 'force',//echarts3的變化，force是力向圖，circular是和弦圖
            draggable: true,//指示節點是否可以拖動
            data: nodes,//節點數據
            links: links,//邊、聯系數據
            categories: categoryArray,//節點種類

　　　　　　　edgeSymbol: ['circle', 'arrow'],//線上箭頭，第一個圖的            focusNodeAdjacency: true,//當鼠標移動到節點上，突出顯示節點以及節點的邊和鄰接節點            roam: true,//是否開啟鼠標縮放和平移漫游。默認不開啟。如果只想要開啟縮放或者平移，可以設置成 'scale' 或者 'move'。設置成 true 為都開啟

 label: {//圖形上的文本標簽，可用於說明圖形的一些數據信息
 normal: {
 show: true,//顯示
 position: 'right',//相對於節點標簽的位置
 //回調函數，你期望節點標簽上顯示什么
 formatter: function (params) {
 return params.data.value;
 },
 }
 },
 //節點的style
 itemStyle: {
 normal: {
 opacity: 0.9,//設置透明度為0.8，為0時不繪制
 },
 },
 // 關系邊的公用線條樣式
 lineStyle: {
 normal: {
 show: true,
 color: 'target',//決定邊的顏色是與起點相同還是與終點相同
 curveness: 0.3//邊的曲度，支持從 0 到 1 的值，值越大曲度越大。
 }
 },
 force: {
 edgeLength: [100, 200],//線的長度，這個距離也會受 repulsion，支持設置成數組表達邊長的范圍
 repulsion: 100//節點之間的斥力因子。值越大則斥力越大
 }
 }
 ]
};
myChart.setOption(option);

2.4 html部分代碼，一個div指定id即可

 <div id="main"
         style="width:100%; height: 100%; top: 0px; position: absolute;"></div>
</div>