代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>关系图</title>
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/echarts.js"></script>
</head>
<body>
<!-- 准备一个具备大小（宽高）的 DOM -->
<div id="graph" style="width: 80%;height:600px;margin: 0 10%"></div>
</body>
<script>
// 图标响应式大小
$(document).ready(function() {
$(window).resize(function() {
var _width = $("#graph").width();
myCharte.resize(_width);
console.log(_width);
});
});
// 注册
var myCharte = echarts.init(document.getElementById('graph'));
var data = [{
"node": "节点1",
"endpoint": [
"节点6",
"节点8"
],
"service": [
"1",
"11"
]
},
{
"node": "节点2",
"endpoint": [
"节点6",
"节点7"
],
"service": [
"2",
"22"
]
}, {
"node": "节点3",
"endpoint": [
"节点6"
],
"service": [
"3",
"33"
]
}, {
"node": "节点4",
"endpoint": [
"节点6"
],
"service": [
"4",
"44"
]
}, {
"node": "节点5",
"endpoint": [
"节点6"
],
"service": [
"5",
"55"
]
}, {
"node": "节点6",
"endpoint": [
"节点1",
"节点2",
"节点3",
"节点4",
"节点5",
"节点7",
"节点8"
],
"service": [
"6",
"66"
]
}, {
"node": "节点7",
"endpoint": [
"节点6",
"节点2"
],
"service": [
"7",
"77"
]
}, {
"node": "节点8",
"endpoint": [
"节点6",
"节点1"
],
"service": [
"8",
"88"
]
}, {
"node": "节点9",
"endpoint": [
"节点5",
"节点1"
],
"service": [
"9",
"99"
]
}
];
function get_nodes(data) {
var nodes = [];
var tmp_nodes = [];
for (var nodes_i in data) {
tmp_nodes.push(data[nodes_i].node);
nodes.push({
'name': data[nodes_i].node
});
}
return nodes;
}
function get_links(data) {
var links = [];
for (var nodes_i in data) {
var node = data[nodes_i].node;
var endpoint = data[nodes_i].endpoint;
var service = data[nodes_i].service;
// console.log(service);
for (var service_i in endpoint) {
links.push({
'source': node,//边的源节点名称的字符串，也支持使用数字表示源节点的索引。
'target': endpoint[service_i],//边的目标节点名称的字符串，也支持使用数字表示源节点的索引。
// 'value':'',//边的数值，可以在力引导布局中用于映射到边的长度。
//标签样式
'label': {
'normal': {
'show': false,
'textStyle': {
'fontSize': 5
},
'formatter': service
}
},
//关系边的线条样式
'lineStyle': {
'normal': {
'curveness': 0.1,//边的曲度，支持从 0 到 1 的值，值越大曲度越大。
}
}
})
}
}
for (var i = 0, len1 = links.length; i < len1; i++) {
for (var j = i, len2 = len1 - 1; j < len2; j++) {
if (links[i].source == links[j].target) {
links[j].lineStyle.normal.curveness = -0.1;
}
}
}
// console.log(links);
return links;
}
console.log(get_nodes(data));
console.log(get_links(data));
var option = {
title: {
text: '调用关系demo'
},
// tooltip: {
//formatter: '调用方法'
// },
animationDurationUpdate: 1500,
animationEasing: 'cubicOut',
animationEasingUpdate: 'quinticInOut',
series: [{
type: 'graph',
layout: 'circular',
// layout:'none',
focusNodeAdjacency: true,
legendHoverLink: true,
hoverAnimation: true,
symbolSize: 50,
//edgeSymbolSize: 50,
roam: true,
symbol: "roundRect",
label: {
normal: {
show: true,
}
},
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 15],
edgeLabel: {
normal: {
textStyle: {
fontSize: 20
}
}
},
data: get_nodes(data), //数据
links: get_links(data), //节点间的关系数据。示例：
// links: [{
// source: 'n1',
// target: 'n2'
// }, {
// source: 'n2',
// target: 'n3'
// }]
lineStyle: {
normal: {
opacity: 0.9,
width: 2,
curveness: 0,
type: 'dashed'
}
}
}, ]
};
//添加点击事件
myCharte.on('click', function(params) {
// 弹窗打印数据的名称
console.log(params);
if (params.dataType == "node") { console.log(params.name)
} else if (params.dataType == "edge") {
console.log(params.name);
}
});
// 使用刚指定的配置项和数据显示图表。
myCharte.setOption(option);
</script>
</html>