由於項目中需要使用關系圖，一般官方網站都是用自己的json文件，而且關系圖一般都包含很多的數據，修改起來很不方便，所以從網上找到一個詳細關系圖詳細的博客，所以在此分享一下
代碼：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <div id="container" style="height:500%"></div> <script type="text/javascript" src="js/echarts.js"></script> <script type="text/javascript" src="js/dataTools.js"></script> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null; myChart.showLoading(); var webkitDep = { "type": "force", "categories": [//關系網類別，可以寫多組 { "name": "人物關系",//關系網名稱 "keyword": {}, "base": "人物關系" } ], "nodes": [//展示的節點 { "name": "劉燁",//節點名稱 "value": 3, "category": 0//與關系網類別索引對應，此處只有一個關系網所以這里寫0 }, { "name": "霓娜", "value": 1, "category": 0 }, { "name": "諾一", "value": 1, "category": 0 } ], "links": [//節點之間連接 { "source": 0,//起始節點，0表示第一個節點 "target": 1 //目標節點，1表示與索引為1的節點進行連接 }, { "source": 0, "target": 2 } ] }; myChart.hideLoading(); option = { legend: { data: ['人物關系']//此處的數據必須和關系網類別中name相對應 }, series: [{ type: 'graph', layout: 'force', animation: false, label: { normal: { show:true, position: 'right' } }, draggable: true, data: webkitDep.nodes.map(function (node, idx) { node.id = idx; return node; }), categories: webkitDep.categories, force: { edgeLength: 101,//連線的長度 repulsion: 100 //子節點之間的間距 }, edges: webkitDep.links }] }; myChart.setOption(option); </script> </body> </html>
參考地址：https://blog.csdn.net/qq_29384639/article/details/53322142?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task