echarts人员关系网络图,张三朋友的朋友扩散图

 我的另外一个博客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  交流。