一：三級關系圖知識圖譜

最近寫了個demo，主要功能是搜索實體，搜索結果顯示與該實體相關的公司、子公司、設備、位置、狀態、危害這六類，數據是通過我司的數據標注系統提供的。后端用到的技術棧是python3、java1.8、neo4j3.5和Django。前端通過Django獲取數據，做數據處理，搭配好echarts配置參數，比如data、links、categories、symbolSize。

二：先上效果圖：

三：data、links、category、symbolSize數據配置

3.1 data配置：想要展示三個層級，定義了三個node 每個node里都配置了name、draggable、category、id、symbolSize

3.2 links配置：數據指向

3.3 category：功能是每個狀態對應一個顏色

3.4 symbolSize：data節點的大小，一級的大小是全部二級的總和，二級是三級的總和（原始節點的大小是后臺返回來的，做的求和）

//echarts 數據var data = [];var links = [];var n2 = []//構造展示的數據var maxDisPlayNode = 50;var id = 0;var num = {}var num2 = ''var temp = [];for (var i = 0; id < maxDisPlayNode && i < searchResult.length; i++) {var newset1 = searchResult[i]['n1']['label']var newset2 = searchResult[i]['n2']['label']var newset3 = searchResult[i]['n3']['label']n2.push(newset1, newset2, newset3)for (var i = 0; i < n2.length; i++) {if (temp.indexOf(n2[i]) == -1) {temp.push(n2[i]);}}//獲取node1node1 = {};node1['name'] = searchResult[i]['n1']['title'];node1['draggable'] = true;var n2Category = searchResult[i]['n1']['label']if (n2Category == 'company') {node1['category'] = 0;} else if (n2Category == 'subsidiary') {node1['category'] = 1;} else if (n2Category == 'device') {node1['category'] = 2;} else if (n2Category == 'location') {node1['category'] = 3;} else if (n2Category == 'status') {node1['category'] = 4;} else if (n2Category == 'danger') {node1['category'] = 5;}var flag = 1;relationTarget = id.toString();for (var j = 0; j < data.length; j++) {if (data[j]['name'] === node1['name']) {flag = 0;relationTarget = data[j]['id'];break;}}node1['id'] = relationTarget;// num2 = parseInt(searchResult[i]['rel']['entity2_count'])// if (!num[node1['id']]) {// num[node1['id']] = num2 + 20// } else {// num[node1['id']] += num2// }node1['symbolSize'] = 1if (flag === 1) {id++;data.push(node1);}//獲取node2node2 = {};node2['name'] = searchResult[i]['n2']['title'];node2['draggable'] = true;var n2Category = searchResult[i]['n2']['label']if (n2Category == 'company') {node2['category'] = 0;} else if (n2Category == 'subsidiary') {node2['category'] = 1;} else if (n2Category == 'device') {node2['category'] = 2;} else if (n2Category == 'location') {node2['category'] = 3;} else if (n2Category == 'status') {node2['category'] = 4;} else if (n2Category == 'danger') {node2['category'] = 5;}flag = 1;relationTarget = id.toString();for (var j = 0; j < data.length; j++) {if (data[j]['name'] === node2['name']) {flag = 0;relationTarget = data[j]['id'];break;}}node2['id'] = relationTarget;num2 = parseInt(searchResult[i]['rel2']['entity2_count'])if(!num[node2['id']]){num[node2['id']] = num2 + 20} else {num[node2['id']] += num2}if (flag === 1) {id++;data.push(node2);}// 判斷有沒有node3 有的話push到data和linksif (searchResult[i]['n3']) {node3 = {};node3['name'] = searchResult[i]['n3']['title'];node3['draggable'] = true;var n2Category = searchResult[i]['n3']['label']if (n2Category == 'company') {node3['category'] = 0;} else if (n2Category == 'subsidiary') {node3['category'] = 1;} else if (n2Category == 'device') {node3['category'] = 2;} else if (n2Category == 'location') {node3['category'] = 3;} else if (n2Category == 'status') {node3['category'] = 4;} else if (n2Category == 'danger') {node3['category'] = 5;}flag = 1;// node3['level'] = 3;relationTarget = id.toString();for (var j = 0; j < data.length; j++) {if (data[j]['name'] === node3['name']) {flag = 0;relationTarget = data[j]['id'];break;}}node3['id'] = relationTarget;num2 = parseInt(searchResult[i]['rel2']['entity2_count'])if (!num[node3['id']]) {num[node3['id']] = num2 + 20} else {num[node3['id']] += num2}if (flag === 1) {id++;data.push(node3);}//獲取relation2relation2 = {}relation2['source'] = node2['id'];relation2['target'] = node3['id'];relation2['category'] = 0;flag = 1;for (var j = 0; j < links.length; j++) {if (links[j]['source'] == relation2['source'] && links[j]['target'] == relation2['target']) {links[j]['value'] = searchResult[i]['rel2']['type'];links[j]['entity2_count'] = searchResult[i]['rel2']['entity2_count']flag = 0;break;} }if (flag === 1) {relation2['value'] = searchResult[i]['rel2']['type'];relation2['symbolSize'] = 10;links.push(relation2);}}//獲取relation1relation = {}relation['source'] = node1['id'];relation['target'] = node2['id'];relation['category'] = 0;flag = 1;for (var j = 0; j < links.length; j++) {if (links[j]['source'] == relation['source'] && links[j]['target'] == relation['target']) {links[j]['value'] = searchResult[i]['rel']['type'];links[j]['entity2_count'] = searchResult[i]['rel']['entity2_count'];flag = 0;break;}}if (flag === 1) {relation['value'] = searchResult[i]['rel']['type'];relation['symbolSize'] = 10;links.push(relation);}}// 計算symbolSize大小for (var i = 0; i < data.length; i++){data[i]['symbolSize'] = num[data[i]['id']]} 復制代碼

四：option配置參數

option = {title: {text: ''},tooltip: {},animationDurationUpdate: 1500,animationEasingUpdate: 'quinticInOut',label: {normal: {show: true,textStyle: {fontSize: 12},}},legend: {x: "center",data: [{name: '公司',icon: 'rect' //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'},{name: '子公司',icon: 'triangle'}, {name: '設備',icon: 'circle'}, {name: '位置',icon: 'roundRect'}, {name: '狀態',icon: 'pin'}, {name: '危害',icon: 'diamond'}] },series: [{type: 'graph',layout: 'force',symbolSize: 45,focusNodeAdjacency: true,roam: true,edgeSymbol: ['none', 'arrow'],categories: [{name: '公司',icon: 'rect' //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'}, {name: '子公司',icon: 'triangle'}, {name: '設備',icon: 'circle'}, {name: '位置',icon: 'roundRect'}, {name: '狀態', icon: 'pin'}, {name: '危害',icon: 'diamond'}],label: {normal: {show: true,textStyle: {fontSize: 12,},}},force: {repulsion: 1000},edgeSymbolSize: [4, 50],edgeLabel: {normal: {show: true,textStyle: {fontSize: 10},formatter: "{c}"}},data: data, // data數據links: links, // links 主要是做數據箭頭連接lineStyle: {normal: {opacity: 1,width: 3,curveness: 0,color: 'source',}}}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option); 復制代碼

至此 完結！best regards！

總結

以上是生活随笔為你收集整理的知识图谱---echarts关系图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。