直线关系图echarts graph配置项内容和展示
配置项如下
var res = {
"data": [{
"draggable": "true",
"symbolSize": 90,
"name": "真武汤",
"id": "n19433",
"text": "真武汤:方剂",
"category": 0,
"class": 0
}, {
"draggable": "true",
"symbolSize": 20,
"name": "中医理论",
"text": "中医理论",
"id": "1",
"category": 1,
"class": 1
}, {
"draggable": "true",
"symbolSize": 60,
"name": "阴阳水火气血论",
"id": "n103631",
"text": "阴阳水火气血论:中医理论",
"category": 1,
"class": 2
}, {
"draggable": "true",
"symbolSize": 20,
"name": "病证",
"text": "病证",
"id": "2",
"category": 2,
"class": 1
}, {
"draggable": "true",
"symbolSize": 60,
"name": "咳血",
"id": "n6212",
"text": "咳血:病证",
"category": 2,
"class": 2
}, {
"draggable": "true",
"symbolSize": 60,
"name": "伤寒汗多亡阳",
"id": "n42310",
"text": "伤寒汗多亡阳:病证",
"category": 2,
"class": 2
}, {
"draggable": "true",
"symbolSize": 60,
"name": "眩晕",
"id": "n6326",
"text": "眩晕:病证",
"category": 2,
"class": 2
}, {
"draggable": "true",
"symbolSize": 60,
"name": "腹痛",
"id": "n7158",
"text": "腹痛:病证",
"category": 2,
"class": 2
}, {
"draggable": "true",
"symbolSize": 20,
"name": "方名",
"text": "方名",
"id": "3",
"category": 3,
"class": 1
}, {
"draggable": "true",
"symbolSize": 60,
"name": "真武汤",
"id": "n42315",
"text": "真武汤:方名",
"category": 3,
"class": 2
}, {
"draggable": "true",
"symbolSize": 20,
"name": "功用主治",
"text": "功用主治",
"id": "4",
"category": 4,
"class": 1
}, {
"draggable": "true",
"symbolSize": 60,
"name": "肾经...能镇水",
"id": "n104593",
"text": "肾经阳虚不能镇水:功用主治",
"category": 4,
"class": 2
}, {
"draggable": "true",
"symbolSize": 60,
"name": "伤寒...方主之",
"id": "n42317",
"text": "伤寒发汗过多，其人心下悸，头眩身瞤，振振欲擗地者，此方主之:功用主治",
"category": 4,
"class": 2
}, {
"draggable": "true",
"symbolSize": 20,
"name": "组成",
"text": "组成",
"id": "5",
"category": 5,
"class": 1
}, {
"draggable": "true",
"symbolSize": 60,
"name": "附子",
"id": "n128",
"text": "附子:药物",
"category": 5,
"class": 2
}, {
"draggable": "true",
"symbolSize": 60,
"name": "生姜",
"id": "n4998",
"text": "生姜:药物",
"category": 5,
"class": 2
}, {
"draggable": "true",
"symbolSize": 60,
"name": "白芍",
"id": "n3773",
"text": "白芍:药物",
"category": 5,
"class": 2
}, {
"draggable": "true",
"symbolSize": 60,
"name": "茯苓",
"id": "n8268",
"text": "茯苓:药物",
"category": 5,
"class": 2
}, {
"draggable": "true",
"symbolSize": 60,
"name": "白术",
"id": "n3777",
"text": "白术:药物",
"category": 5,
"class": 2
}, {
"draggable": "true",
"symbolSize": 60,
"name": "茯苓、甘草",
"id": "n41392",
"text": "茯苓、甘草:药物",
"category": 5,
"class": 2
}, {
"draggable": "true",
"symbolSize": 60,
"name": "熟附...、生姜",
"id": "n41320",
"text": "熟附子、白茯苓、白芍、甘草、生姜:药物",
"category": 5,
"class": 2
}, {
"draggable": "true",
"symbolSize": 60,
"name": "茯苓...枚，制",
"id": "n42316",
"text": "茯苓去皮 芍药炒 生姜各三两 白术二两，炒 附子一枚，制:药物",
"category": 5,
"class": 2
}, {
"draggable": "true",
"symbolSize": 20,
"name": "方解",
"text": "方解",
"id": "6",
"category": 6,
"class": 1
}, {
"draggable": "true",
"symbolSize": 60,
"name": "茯苓...生津液",
"id": "n42318",
"text": "茯苓、白术，补土利水之物也，可以伐肾而疗心悸；生姜、附子，益卫回阳之物也，可以壮火而祛虚邪；芍药之酸，收阴气也，可以和荣而生津液:方解",
"category": 6,
"class": 2
}, {
"draggable": "true",
"symbolSize": 60,
"name": "五味",
"id": "n6079",
"text": "五味:药物",
"category": 5,
"class": 2
}, {
"draggable": "true",
"symbolSize": 60,
"name": "干姜",
"id": "n15459",
"text": "干姜:药物",
"category": 5,
"class": 2
}, {
"draggable": "true",
"symbolSize": 60,
"name": "细辛",
"id": "n6967",
"text": "细辛:药物",
"category": 5,
"class": 2
}, {
"draggable": "true",
"symbolSize": 20,
"name": "释名",
"text": "释名",
"id": "7",
"category": 7,
"class": 1
}, {
"draggable": "true",
"symbolSize": 60,
"name": "真武...以主之",
"id": "n42319",
"text": "真武，北方之神，司水火者也。今肾气凌心，虚邪内动，有水火奔腾之象，故名此汤以主之:释名",
"category": 7,
"class": 2
}],
"links": [{
"source": "n19433",
"value": "",
"target": "1"
}, {
"source": "1",
"value": "",
"target": "n103631"
}, {
"source": "n19433",
"value": "",
"target": "2"
}, {
"source": "2",
"value": "",
"target": "n6212"
}, {
"source": "n19433",
"value": "",
"target": "2"
}, {
"source": "2",
"value": "",
"target": "n42310"
}, {
"source": "n19433",
"value": "",
"target": "2"
}, {
"source": "2",
"value": "",
"target": "n6326"
}, {
"source": "n19433",
"value": "",
"target": "2"
}, {
"source": "2",
"value": "",
"target": "n7158"
}, {
"source": "n19433",
"value": "",
"target": "3"
}, {
"source": "3",
"value": "",
"target": "n42315"
}, {
"source": "n19433",
"value": "",
"target": "4"
}, {
"source": "4",
"value": "",
"target": "n104593"
}, {
"source": "n19433",
"value": "",
"target": "4"
}, {
"source": "4",
"value": "",
"target": "n42317"
}, {
"source": "n19433",
"value": "",
"target": "5"
}, {
"source": "5",
"value": "",
"target": "n128"
}, {
"source": "n19433",
"value": "",
"target": "5"
}, {
"source": "5",
"value": "",
"target": "n4998"
}, {
"source": "n19433",
"value": "",
"target": "5"
}, {
"source": "5",
"value": "",
"target": "n3773"
}, {
"source": "n19433",
"value": "",
"target": "5"
}, {
"source": "5",
"value": "",
"target": "n8268"
}, {
"source": "n19433",
"value": "",
"target": "5"
}, {
"source": "5",
"value": "",
"target": "n3777"
}, {
"source": "n19433",
"value": "",
"target": "5"
}, {
"source": "5",
"value": "",
"target": "n3773"
}, {
"source": "n19433",
"value": "",
"target": "5"
}, {
"source": "5",
"value": "",
"target": "n3777"
}, {
"source": "n19433",
"value": "",
"target": "5"
}, {
"source": "5",
"value": "",
"target": "n128"
}, {
"source": "n19433",
"value": "",
"target": "5"
}, {
"source": "5",
"value": "",
"target": "n41392"
}, {
"source": "n19433",
"value": "",
"target": "5"
}, {
"source": "5",
"value": "",
"target": "n41320"
}, {
"source": "n19433",
"value": "",
"target": "5"
}, {
"source": "5",
"value": "",
"target": "n3777"
}, {
"source": "n19433",
"value": "",
"target": "5"
}, {
"source": "5",
"value": "",
"target": "n42316"
}, {
"source": "n19433",
"value": "",
"target": "6"
}, {
"source": "6",
"value": "",
"target": "n42318"
}, {
"source": "n19433",
"value": "",
"target": "5"
}, {
"source": "5",
"value": "",
"target": "n6079"
}, {
"source": "n19433",
"value": "",
"target": "5"
}, {
"source": "5",
"value": "",
"target": "n15459"
}, {
"source": "n19433",
"value": "",
"target": "5"
}, {
"source": "5",
"value": "",
"target": "n6967"
}, {
"source": "n19433",
"value": "",
"target": "7"
}, {
"source": "7",
"value": "",
"target": "n42319"
}],
"categories": [{
"name": "方剂"
}, {
"name": "中医理论"
}, {
"name": "病证"
}, {
"name": "方名"
}, {
"name": "功用主治"
}, {
"name": "药物"
}, {
"name": "方解"
}, {
"name": "释名"
}],
"message": "success",
"status": 200
}
let data = res.data;
let links = res.links;
let categories = res.categories;
option = {
color: [
'#ff7f50',
'#87cefa',
'#da70d6',
'#cd7033',
'#6495ed',
'#ff69b4',
'#ba55d3',
'#cd5c5c',
'#ff0d32',
'#40e0d0',
'#1e90ff',
'#ff6347',
'#7b68ee',
'#d0648a',
'#09b0ff',
'#6b8e23',
'#4ea397',
'#3cb371',
'#b8860b',
'#7bd9a5'
],
tooltip: {},
legend: [{
x: 'center',
y: 'top',
orient: 'horizontal',
data: categories.map(function(a) {
return a.name;
}),
}],
zoom: 2.0,
animation: true,
series: [{
data: data,
links: links,
categories: categories,
type: 'graph',
layout: 'force',
symbolSize: function(size) {
return size;
},
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
color: '#000',
normal: {
show: true,
textStyle: {
fontSize: 15
},
formatter: "{c}"
}
},
force: {
repulsion: 2500,
edgeLength: [10, 30]
},
focusNodeAdjacency: true,
roam: true,
label: {
normal: {
show: true,
textStyle: {
fontSize: 15,
fontWeight: 'bolder',
color: '#000',
},
}
},
force: {
repulsion: 1000,
edgeLength: 300
},
tooltip: {
formatter: function(node) { // 区分连线和节点，节点上额外显示其他数字
return node.data.text;
},
},
lineStyle: {
normal: {
opacity: 0.9,
width: 1,
color: '#000',
}
},
}]
};
截图如下
