echarts实现关系网络图,单个节点可无限扩散,方便实用易懂

最新推荐文章于 2025-05-21 09:25:17 发布

小栋哟

最新推荐文章于 2025-05-21 09:25:17 发布

阅读量1.2w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： echarts 文章标签： echarts js 图谱 javascript graph

本文链接：https://blog.youkuaiyun.com/Xiaodongge521/article/details/97375087

echarts 专栏收录该内容

2 篇文章

订阅专栏

应该是至少半年了，从18年年底到现在接触的项目基本都是图谱项目，图谱项目就是尽可能的用图的形式来展示数据，所以关于echarts这个东西，也算是接触的不少了，早就想记录一些工作中关于echarts遇到的问题和笔记，方便自己也方便大家，时间问题拖到现在，所以就赶紧写一写吧。

这个博客主要记录一个比较完整的关系网络图，如果同学你也是在做这种图就可以继续往下看吧，如果不是需要这样的，也可以看一些属性啊记录，希望对大家也有所帮助；

先来一张效果图

这个图呢就是中间一个点，扩散出去，扩散出去的每个点可以继续扩散；示例数据如下：

var myGraphData = [
        { "parentNode":"张三", "childNodes":["小明", "小华", "小杰", "小婷"]},
        { "parentNode":"小明", "childNodes":[ "小王", "小赵", "小钱" ] },
        { "parentNode":"小华", "childNodes":[ "小孙", "小李"] },
        { "parentNode":"小华", "childNodes":[  "小周"] },
        { "parentNode":"小杰", "childNodes":[ "小吴", "小郑" ] },
        { "parentNode":"小婷", "childNodes":[ "小谢" ] },
        { "parentNode":"小婷", "childNodes":[ "小潘" ] },
   //数据格式是这样的,parentNode是souce出发点，childNodes就是parentNode所扩散出的点,也就是目标点也叫子节点；只要把数据造成这样就ok直接使用了；
    ];

实际后台数据如下：后台没有按规则来进行返回，所以就在页面中处理了；from是出发点id+name，to是目标点id+name；

开始代码

html页面

     <div id="personKeywordsYearListGraphDiv"
        style="width: 100%; height: 500px">
     </div>

js画图代码

function doPersonAnalyseNetwork(resData){
    var dataPre = resData.noeds;
    //判断数据是否存在,如果不存在则将div直接隐藏
    if(null ==dataPre || "" == dataPre || dataPre.length == 0 ){
        $("#hezuoPersonTuDiv").hide();
        return false;
    }
    var chart = document.getElementById('personKeywordsYearListGraphDiv');
    chart.removeAttribute("_echarts_instance_");//加上这句表示情况重复数据,二次加载清空原始数据
    myChart = echarts.init(chart);

    myChart.showLoading({
        text: '数据正在努力加载...',
        textStyle: { fontSize : 30 , color: '#444' },
        effectOption: {backgroundColor: 'rgba(0, 0, 0, 0)'}
    });
                if (dataPre.length === 0){}
                //alert('暂未检索到该科研人员的合作网络，请稍候再试。');
                else {
                    var arrr = [];
                    //数据格式：
                    // var myGraphData = [
                    //     { "parentNode":"张三", "childNodes":["小明", "小华", "小杰", "小婷","小妍","小飞"]},
                    //     { "parentNode":"小明", "childNodes":[ "小王", "小赵", "小钱" ] },
                    //     { "parentNode":"小华", "childNodes":[ "小孙", "小李", "小周" ] },
                    // ];
                    //创建dataNodes来存放数据
                    var dataNodes = {};
                    dataNodes.parentNode = {};
                    dataNodes.childNodes = [];
                    dataNodes.childNodesId = [];
                    //当前用户的name
                    var personName =resData.personInfo.personName;
                    dataNodes.parentNode  = personName;
                    for (var n = 0; n < dataPre.length; n++) {
                        if (dataPre[n].group == 0){
                            //group为0的是当前直接关系的节点
                            dataNodes.childNodes.push(dataPre[n].to.split('-')[1]);
                            //存放name和id的信息,中间用“-”进行分割；
                            dataNodes.childNodesId.push(dataPre[n].from.split('-')[0]+"-"+dataPre[n].to.split('-')[0]);

                        }
                    }
                    //以上代码为当前用户节点和直接关系节点的数据
                    arrr.push(dataNodes);
                    dataNodes = {};
                    dataNodes.parentNode = {};
                    dataNodes.childNodes = [];
                    dataNodes.childNodesId = [];

                    for (var n = 0; n < dataPre.length; n++) {
                        //开始处理group为1的数据，表示间接关系
                        if (dataPre[n].group == 1){
                            dataNodes.parentNode  = dataPre[n].from.split('-')[1];
                            //因数据有重复性,id又不可重复,所以此处采用循环中的n+name+id的方式来保证唯一  使用的时候在来进行分割获取
                            //这里保存的target目标的name和id
                            dataNodes.childNodes.push(n+"-"+dataPre[n].to.split('-')[1]+"-"+dataPre[n].to.split('-')[0]);
                            //本行代码与上行代码意思一直,重复是为了直接将当前的source和taeget的id进行保存,方便使用
                            dataNodes.childNodesId.push(dataPre[n].from.split('-')[0]+"-"+dataPre[n].to.split('-')[0]);
                            arrr.push(dataNodes);
                            dataNodes = {};
                            dataNodes.parentNode = {};
                            dataNodes.childNodes = [];
                            dataNodes.childNodesId = [];
                        }
                    }
                    var myGraphData =arrr;
                    var listdata = [];
                    var linksdata = [];
                    var nodes =[{
                        "nodename":personName,
                        "nodelevel":0,
                        "parentnode":0,
                        "nodeId":"",
                    }];
                    for(var i=0; i < myGraphData.length; i++){
                        getNodes(myGraphData[i].parentNode,myGraphData[i].childNodes,myGraphData[i].childNodesId,nodes);
                        //创建source和target 的信息
                        setLinkData( myGraphData[i].childNodes, myGraphData[i].parentNode,myGraphData[i].childNodesId, linksdata);
                    }
                    setNodeData(nodes,listdata);

                    var levels = 0;
                    var legend_data = [];
                    var series_categories = [];
                    var temp = ["","直接关系","间接关系"];//第一个为空,空的原因请看下方的for循环，这个是在初始化图例
                    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: personName+"人员合作网络",
                            top: "top",
                            left: "left",
                            textStyle: {
                                color: '#292421'
                            }
                        },
                        tooltip: {
                            formatter: '{b}'
                        },
                        backgroundColor: '#FFFFFF',
                        legend: {
                            show : true,
                            data : legend_data,
                            textStyle: {
                                color: '#292421'
                            },
                            type: 'scroll',
                            orient: 'vertical',
                            left: 'left',
                            top: '40px'

                        },
                        toolbox: {
                            show: true,
                            feature: {

                                saveAsImage: {show: true} //支持下载的按钮
                            }
                        },
                        animationDuration: 0,
                        animationEasingUpdate: 'quinticInOut',
                        series: [{
                            color: [
                                '#fc0','#36c' ,'#FF8C69'
                            ],
                            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:function(param){
                                        return param.data.trueName; //自定义节点的显示名称,默认是name
                                    },
                                    fontSize: 10,
                                    fontStyle: '600',
                                }
                            },
                            lineStyle: {
                                normal: {
                                    opacity: 0.9,
                                    width: 0.5,
                                    curveness: 0
                                }
                            }
                        }]
                    };
                    myChart.setOption(option, true);
                    myChart.hideLoading();
                    myChart.on('click', function (params) {
                        var nodeId1, nodeId2;
                        if(params.dataType === 'edge'){ //edge表示点击的是线
                            //在link中已经保存好source和target 包括target的id和targetId的id
                            nodeId1 = params.data.source;
                            if (params.data.target.split("-").length > 2){
                                nodeId2 = params.data.target.split("-")[1];
                            } else {
                                nodeId2 = params.data.target;
                            }
                            var  targetId = params.data.targetId;
                            var personCodeNumOne = personIDThis;
                            var queryJson = {
                                "queryStr":nodeId1 + '-' + nodeId2,
                                "queryStrCode":personCodeNumOne + '-' + targetId,
                                "coNum":2,
                                "pageNum":0,
                                "pageSize":5,
                                "queryType":"person"
                            };
                            $('#textDiv').html('<h5>' + nodeId1 + ' 与 ' + nodeId2 + ' 的合作情况：' + '</h5>');
                            getAllCData(queryJson);
                            $('#cooRDiv').css('display', 'block');
                        }
                        else if(params.dataType === 'node'){//node表示点击的是节点
                            if(params.data.group != '0'){
                                var win = window.open( "/baseQuery/personDetail/" + params.data.trueId );
                                if ( win == null )
                                    window.alert( "请不要启用弹出式窗口拦截" );
                            }
                        }
                    });

                    //获取group为0的信息,表示直接与中间点合作的人员
                    var groupFirst = [];
                    for (var c = 1; c < dataPre.length; c++) {
                        if (dataPre[c].group == 0){
                            groupFirst.push(dataPre[c]);
                        }
                    }
                    var cooNum = groupFirst.length;
                    var analyseResultContent = '<div class="row"><div class="col-md-12">';
                    if (groupFirst.length === 1) {
                        analyseResultContent += '<p><span style="font-size: larger; color: #2e6da4">' + $('#personName').val().split('，')[0] + '</span>&nbsp; 和任何科研人员都没有过合作。</p>';
                    }
                    else {
                        var maxPersonName = '';
                        var maxPersonNum = 0;
                        for (var m = 0; m < cooNum; m++) {
                            if (groupFirst[m].count >= maxPersonNum) {
                                maxPersonName = groupFirst[m].to.split("-")[1];
                                maxPersonNum = groupFirst[m].count;
                            }
                        }
                        var minPersonName = '';
                        var minPersonNum = 1;
                        for (m = 0; m < cooNum; m++) {
                            if (groupFirst[m].count <= minPersonNum) {
                                minPersonName = groupFirst[m].to.split("-")[1];
                                minPersonNum = groupFirst[m].count;
                            }
                        }
                        analyseResultContent += '<p><span style="font-size: larger; color: #2e6da4">' + personName + '</span>&nbsp;与&nbsp;<span style="font-size: larger; color: #ac2925">' + cooNum + '</span>&nbsp;个科研人员有合作关系；';
                        analyseResultContent += '与&nbsp;<span style="font-size: larger; color: #843534">' + maxPersonName + '</span>&nbsp;关系最为紧密，合作关系数量为&nbsp;<span style="font-size: larger; color: #ac2925">' + maxPersonNum + '</span>；';
                        analyseResultContent += '与&nbsp;<span style="font-size: larger; color: #02c66c">' + minPersonName + '</span>&nbsp;关系最为稀疏，合作关系数量为&nbsp;<span style="font-size: larger; color: #ac2925">' + minPersonNum + '</span>；</p>';
                        analyseResultContent += '<p>鼠标放在节点上可查看该人员参与分析的科研人员数量，放在连线上可查看两个人员的关系数量值。</p>';
                    }
                    analyseResultContent += '</div></div>';
                    $('#personNetworkAnalyseContent').html(analyseResultContent);

                }


}

好了，所有代码就是如上，如有问题还请留言，或者加qq：983469079进行探讨；

如果对您有帮助记得点个赞哟~