我的另外一个博客echarts实现关系网络图,单个节点可无限扩散,方便实用易懂 就是通过下方这个改的,所以这个是最原版的代码。大家可以参考一下,其实意思很明了,主人公张三是中心点,第二层就是展示他的朋友,第三层是朋友的朋友,第四层循环下去。。。看看图吧。
废话我就不多说,直接上代码。
var myGraphData = [
{ "parentNode":"张三", "childNodes":["小明", "小华", "小杰", "小婷","小妍","小飞"]},
{ "parentNode":"小明", "childNodes":[ "小王", "小赵", "小钱" ] },
{ "parentNode":"小华", "childNodes":[ "小孙", "小李", "小周" ] },
{ "parentNode":"小杰", "childNodes":[ "小吴", "小郑" ] },
{ "parentNode":"小婷", "childNodes":[ "小谢", "小潘" ] },
{ "parentNode":"小妍", "childNodes":[ "小苏", "小陈" ] },
{ "parentNode":"小飞", "childNodes":[ "小郭", "小彭" ] },
{ "parentNode":"小王", "childNodes":[ "小a", "小b" ] },
{ "parentNode":"小孙", "childNodes":[ "小c", "小d" ] },
{ "parentNode":"小吴", "childNodes":[ "小e", "小f" ] },
];
function getNodes(parentNode,childNodes,nodes){
var pnode;
for(var i=0; i<nodes.length; i++){
if(parentNode == nodes[i].nodename){
pnode = nodes[i];
}
}
for(i=0; i<childNodes.length; i++){
nodes.push({
nodename : childNodes[i],
nodelevel: pnode.nodelevel+1,
parentnode: parentNode,
});
}
}
function setNodeData(nodes,listdata) {
var size = 33;
for(var i=0; i<nodes.length; i++){
listdata.push({
category: nodes[i].nodelevel,
name: nodes[i].nodename,
symbolSize: size,
draggable: "true"
});
}
}
function setLinkData(childList, parentnode, links) {
for(var i=0; i<childList.length; i++){
links.push({
// links根据节点名称建立,只适用于节点名称不一样的情况
"source": childList[i],
"target": parentnode,
lineStyle: {
normal: {
color: 'source',
}
}
});
}
}
var listdata = [];
var linksdata = [];
var nodes =[{
"nodename":"张三",
"nodelevel":0,
"parentnode":0
}];
for(var i=0; i < myGraphData.length; i++){
getNodes(myGraphData[i].parentNode,myGraphData[i].childNodes,nodes);
setLinkData( myGraphData[i].childNodes, myGraphData[i].parentNode, linksdata);
}
setNodeData(nodes,listdata);
var levels = 0;
var legend_data = [];
var series_categories = [];
var temp = ["一","二","三","四","五"];
for(var i=0; i < nodes.length; i++){
levels = Math.max(levels, nodes[i].nodelevel);
}
for(var i=0; i<=levels; i++){
legend_data.push({
name : i===0?'父节点':'层级'+temp[i],
icon : 'rect'
});
series_categories.push({
name : i===0?'父节点':'层级'+temp[i],
symbol : 'rect'
});
}
option = {
title: {
text: "张三的朋友们进阶版",
top: "top",
left: "left",
textStyle: {
color: '#292421'
}
},
tooltip: {
formatter: '{b}'
},
backgroundColor: '#FFFFFF',
legend: {
show : true,
data : legend_data,
textStyle: {
color: '#292421'
},
icon: 'circle',
type: 'scroll',
orient: 'horizontal',
left: 10,
top: 20,
bottom: 20,
itemWidth: 10,
itemHeight: 10
},
animationDuration: 0,
animationEasingUpdate: 'quinticInOut',
series: [{
name: '关系图',
type: 'graph',
layout: 'force',
force: {
repulsion: 300,
gravity: 0.1,
edgeLength: 15,
layoutAnimation: true,
},
data: listdata,
links: linksdata,
categories: series_categories,
roam: true,
label: {
normal: {
show: true,
position: 'bottom',
formatter: '{b}',
fontSize: 10,
fontStyle: '600',
}
},
lineStyle: {
normal: {
opacity: 0.9,
width: 0.5,
curveness: 0
}
}
}]
};
如果你简单了解echarts的话应该可以看懂的,但是,如果看不懂没关系,翻翻我的博客,会有一些工作中遇到的问题,可以找找看是否可以解决你的疑问。如果还是有问题,可以+q: 983469079 交流。