console
window.onload = function() {
const colors = [
'#63C4C7',
'#B2A3DA',
'#70AFEA',
'#F4BC89',
'#CB7F82',
'#8F97B1',
'#E1D047',
'#9CB45F',
'#90716E',
'#CE70A7',
'#49A0A3',
'#9680CC',
'#648BCF',
'#E89D5C',
'#B25754',
'#5C6689',
'#C4AC38',
'#88AE37',
'#6B5654',
'#B34987'
]
let data = {
"categories": [
{
"name": "中心词"
},
{
"name": "关系"
},
{
"name": "英文名称",
"symbol": "circle",
"symbolSize": 28
},
{
"name": "UMLS",
"symbol": "circle",
"symbolSize": 28
},
{
"name": "ICD-10",
"symbol": "circle",
"symbolSize": 28
},
{
"name": "临床症状及体征",
"symbol": "circle",
"symbolSize": 28
},
{
"name": "所属科室",
"symbol": "circle",
"symbolSize": 28
},
{
"name": "实验室检查",
"symbol": "circle",
"symbolSize": 28
},
{
"name": "并发症",
"symbol": "circle",
"symbolSize": 28
},
{
"name": "辅助检查",
"symbol": "circle",
"symbolSize": 28
},
{
"name": "发病部位",
"symbol": "circle",
"symbolSize": 28
},
{
"name": "治疗方案",
"symbol": "circle",
"symbolSize": 28
},
{
"name": "检查",
"symbol": "circle",
"symbolSize": 28
},
{
"name": "病因",
"symbol": "circle",
"symbolSize": 28
}
],
"link": [
{
"source": 0,
"target": 1,
"value": "英文名称"
},
{
"source": 1,
"target": 2,
"value": ""
},
{
"source": 0,
"target": 3,
"value": "UMLS"
},
{
"source": 3,
"target": 4,
"value": ""
},
{
"source": 0,
"target": 5,
"value": "ICD-10"
},
{
"source": 5,
"target": 6,
"value": ""
},
{
"source": 0,
"target": 7,
"value": "临床症状及体征"
},
{
"source": 7,
"target": 8,
"value": ""
},
{
"source": 7,
"target": 9,
"value": ""
},
{
"source": 7,
"target": 10,
"value": ""
},
{
"source": 7,
"target": 11,
"value": ""
},
{
"source": 7,
"target": 12,
"value": ""
},
{
"source": 7,
"target": 13,
"value": ""
},
{
"source": 7,
"target": 14,
"value": ""
},
{
"source": 7,
"target": 15,
"value": ""
},
{
"source": 7,
"target": 16,
"value": ""
},
{
"source": 7,
"target": 17,
"value": ""
},
{
"source": 7,
"target": 18,
"value": ""
},
{
"source": 0,
"target": 19,
"value": "所属科室"
},
{
"source": 19,
"target": 20,
"value": ""
},
{
"source": 19,
"target": 21,
"value": ""
},
{
"source": 0,
"target": 22,
"value": "实验室检查"
},
{
"source": 22,
"target": 23,
"value": ""
},
{
"source": 0,
"target": 24,
"value": "并发症"
},
{
"source": 24,
"target": 25,
"value": ""
},
{
"source": 24,
"target": 26,
"value": ""
},
{
"source": 24,
"target": 27,
"value": ""
},
{
"source": 24,
"target": 28,
"value": ""
},
{
"source": 0,
"target": 29,
"value": "辅助检查"
},
{
"source": 29,
"target": 30,
"value": ""
},
{
"source": 0,
"target": 31,
"value": "发病部位"
},
{
"source": 31,
"target": 32,
"value": ""
},
{
"source": 0,
"target": 33,
"value": "治疗方案"
},
{
"source": 33,
"target": 34,
"value": ""
},
{
"source": 33,
"target": 35,
"value": ""
},
{
"source": 33,
"target": 36,
"value": ""
},
{
"source": 33,
"target": 37,
"value": ""
},
{
"source": 33,
"target": 38,
"value": ""
},
{
"source": 33,
"target": 39,
"value": ""
},
{
"source": 33,
"target": 40,
"value": ""
},
{
"source": 33,
"target": 41,
"value": ""
},
{
"source": 33,
"target": 42,
"value": ""
},
{
"source": 0,
"target": 43,
"value": "检查"
},
{
"source": 43,
"target": 44,
"value": ""
},
{
"source": 0,
"target": 45,
"value": "病因"
},
{
"source": 45,
"target": 46,
"value": ""
},
{
"source": 45,
"target": 47,
"value": ""
}
],
"name": "复发性风湿症",
"node": [
{
"category": 0,
"label": "复发性风湿症",
"name": 0,
"symbolSize": 50
},
{
"category": 1,
"label": "",
"name": 1,
"symbol": "diamond",
"symbolSize": 10
},
{
"category": 2,
"label": "palindromic rheumatism",
"name": 2,
"symbol": "rect",
"symbolSize": 28
},
{
"category": 1,
"label": "",
"name": 3,
"symbol": "diamond",
"symbolSize": 10
},
{
"category": 3,
"label": "http://linkedlifedata.com/resource/umls/id/C0085574",
"name": 4,
"symbolSize": 28
},
{
"category": 1,
"label": "",
"name": 5,
"symbol": "diamond",
"symbolSize": 10
},
{
"category": 4,
"label": "M12.3",
"name": 6,
"symbol": "rect",
"symbolSize": 28
},
{
"category": 1,
"label": "",
"name": 7,
"symbol": "diamond",
"symbolSize": 10
},
{
"category": 5,
"label": "低热",
"name": 8,
"symbol": "rect",
"symbolSize": 28
},
{
"category": 5,
"label": "低热等",
"name": 9,
"symbol": "rect",
"symbolSize": 28
},
{
"category": 5,
"label": "痛风",
"name": 10,
"symbolSize": 28
},
{
"category": 5,
"label": "僵硬",
"name": 11,
"symbol": "rect",
"symbolSize": 28
},
{
"category": 5,
"label": "疼痛",
"name": 12,
"symbolSize": 28
},
{
"category": 5,
"label": "指垫",
"name": 13,
"symbol": "rect",
"symbolSize": 28
},
{
"category": 5,
"label": "关节疼痛常十分明显",
"name": 14,
"symbol": "rect",
"symbolSize": 28
},
{
"category": 5,
"label": "足跟和其他软组织可发生水肿和疼痛",
"name": 15,
"symbol": "rect",
"symbolSize": 28
},
{
"category": 5,
"label": "肿胀",
"name": 16,
"symbol": "rect",
"symbolSize": 28
},
{
"category": 5,
"label": "关节疼痛",
"name": 17,
"symbolSize": 28
},
{
"category": 5,
"label": "水肿",
"name": 18,
"symbolSize": 28
},
{
"category": 1,
"label": "",
"name": 19,
"symbol": "diamond",
"symbolSize": 10
},
{
"category": 6,
"label": "风湿免疫科",
"name": 20,
"symbol": "rect",
"symbolSize": 28
},
{
"category": 6,
"label": "风湿科",
"name": 21,
"symbol": "rect",
"symbolSize": 28
},
{
"category": 1,
"label": "",
"name": 22,
"symbol": "diamond",
"symbolSize": 10
},
{
"category": 7,
"label": "红细胞沉降率",
"name": 23,
"symbolSize": 28
},
{
"category": 1,
"label": "",
"name": 24,
"symbol": "diamond",
"symbolSize": 10
},
{
"category": 8,
"label": "水肿",
"name": 25,
"symbolSize": 28
},
{
"category": 8,
"label": "疼痛",
"name": 26,
"symbolSize": 28
},
{
"category": 8,
"label": "本病可并发指垫",
"name": 27,
"symbol": "rect",
"symbolSize": 28
},
{
"category": 8,
"label": "足跟和其他软组织发生",
"name": 28,
"symbol": "rect",
"symbolSize": 28
},
{
"category": 1,
"label": "",
"name": 29,
"symbol": "diamond",
"symbolSize": 10
},
{
"category": 9,
"label": "X线检查",
"name": 30,
"symbol": "rect",
"symbolSize": 28
},
{
"category": 1,
"label": "",
"name": 31,
"symbol": "diamond",
"symbolSize": 10
},
{
"category": 10,
"label": "多见于30～60岁人群",
"name": 32,
"symbol": "rect",
"symbolSize": 28
},
{
"category": 1,
"label": "",
"name": 33,
"symbol": "diamond",
"symbolSize": 10
},
{
"category": 11,
"label": "泼尼松",
"name": 34,
"symbolSize": 28
},
{
"category": 11,
"label": "青霉素",
"name": 35,
"symbolSize": 28
},
{
"category": 11,
"label": "硫代苹果酸金钠",
"name": 36,
"symbolSize": 28
},
{
"category": 11,
"label": "西医治疗",
"name": 37,
"symbol": "rect",
"symbolSize": 28
},
{
"category": 11,
"label": "葡萄糖",
"name": 38,
"symbolSize": 28
},
{
"category": 11,
"label": "秋水仙碱",
"name": 39,
"symbolSize": 28
},
{
"category": 11,
"label": "青霉胺",
"name": 40,
"symbolSize": 28
},
{
"category": 11,
"label": "中医治疗",
"name": 41,
"symbol": "rect",
"symbolSize": 28
},
{
"category": 11,
"label": "金硫葡糖",
"name": 42,
"symbolSize": 28
},
{
"category": 1,
"label": "",
"name": 43,
"symbol": "diamond",
"symbolSize": 10
},
{
"category": 12,
"label": "实验室检查",
"name": 44,
"symbol": "rect",
"symbolSize": 28
},
{
"category": 1,
"label": "",
"name": 45,
"symbol": "diamond",
"symbolSize": 10
},
{
"category": 13,
"label": "有人认为免疫过程可能参与",
"name": 46,
"symbol": "rect",
"symbolSize": 28
},
{
"category": 13,
"label": "目前有关本病的病因所知不多",
"name": 47,
"symbol": "rect",
"symbolSize": 28
}
],
"tree_type": "疾病"
}
let nodes = data.node
let links = data.link
let categories = data.categories
let legends = categories.slice(2, categories.length)
let option = {
color: colors,
tooltip: {
formatter: function (x) {
return x.data.label
}
},
// toolbox: {
// show: true,
// feature: {
// myBack: {
// show: true,
// title: '后退',
// // icon: back_icon,
// onclick: function () {
// let word = visitQue.pop()
// if (visitQue.length > 0) {
// word = visitQue.pop()
// }
// showKnowledgeGraph(word, 'graph', 4)
// }
// },
// restore: {
// show: true
// },
// saveAsImage: {
// show: true
// }
// }
// },
legend: {
type: 'scroll',
bottom: 0,
icon: 'circle',
data: legends.map(function (a) {
return a.name
})
},
series: [
{
type: 'graph',
layout: 'force',
categories: categories,
roam: 'move',
focusNodeAdjacency: true,
edgeSymbol: ['none', 'arrow'],
edgeSymbolSize: [1, 5],
force: {
repulsion: 500,
gravity: 0.8,
edgeLength: [4, 7],
layoutAnimation: true
},
hoverAnimation: false,
// draggable: false,
// legendHoverLink: false,
lineStyle: {
normal: {
width: 2,
color: 'target',
curveness: 0,
opacity: 1
}
},
edgeLabel: {
normal: {
show: true,
formatter: '{c}'
}
},
label: {
normal: {
show: true,
formatter: function (x) {
var tmp = x.data.label
if (tmp.length >= 8) {
tmp = tmp.substring(0, 3)
tmp = tmp + '...'
}
return tmp
},
textStyle: {
color: '#000'
}
}
},
nodes: nodes,
links: links
}
]
}
var myChart = echarts.init(document.getElementById('chart'))
myChart.setOption(option)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>echarts 知识图谱关系图</title>
</head>
<body>
<div id="chart"></div>
</body>
</html>
#chart {
height: 95vh
}