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

缺乏、安全感 2021-11-23 08:54 933阅读 0赞

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

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

先来一张效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hpYW9kb25nZ2U1MjE_size_16_color_FFFFFF_t_70][]

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

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；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hpYW9kb25nZ2U1MjE_size_16_color_FFFFFF_t_70 1][]

开始代码

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>  和任何科研人员都没有过合作。</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> 与 <span style="font-size: larger; color: #ac2925">' + cooNum + '</span> 个科研人员有合作关系；';
                            analyseResultContent += '与 <span style="font-size: larger; color: #843534">' + maxPersonName + '</span> 关系最为紧密，合作关系数量为 <span style="font-size: larger; color: #ac2925">' + maxPersonNum + '</span>；';
                            analyseResultContent += '与 <span style="font-size: larger; color: #02c66c">' + minPersonName + '</span> 关系最为稀疏，合作关系数量为 <span style="font-size: larger; color: #ac2925">' + minPersonNum + '</span>；</p>';
                            analyseResultContent += '<p>鼠标放在节点上可查看该人员参与分析的科研人员数量，放在连线上可查看两个人员的关系数量值。</p>';
                        }
                        analyseResultContent += '</div></div>';
                        $('#personNetworkAnalyseContent').html(analyseResultContent);
    
                    }
    
    
    }

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hpYW9kb25nZ2U1MjE_size_16_color_FFFFFF_t_70]: /images/20211122/72be6bbce6424ff6980d24ed90724a1f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hpYW9kb25nZ2U1MjE_size_16_color_FFFFFF_t_70 1]: /images/20211122/61bd3eec02494d92b586bbc704144261.png

发表评论取消回复

表情：

评论列表（有 0 条评论，933人围观）

还没有评论，来说两句吧...

相关阅读

相关 ECharts实现数据可视化入门

ECharts是什么? 一个纯JavaScript图表库。ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表...

谁借莪１个温暖的怀抱￠/ 2024年04月17日 21:07/ 0 赞/ 31 阅读

相关 Echarts数据可视化第4章 Echarts可视化图 4.16 关系图

Echarts数据可视化文章目录 Echarts数据可视化第4章 Echarts可视化图 4

以你之姓@/ 2024年03月25日 20:18/ 0 赞/ 91 阅读

相关双代号网络图节点编号原则_网络绘图进行的节点编号时原则

网络绘图进行的节点编号时原则； 1 ，从起始节点开始，由左向右顺序编排，一个节点一个号。不要重复。 2 ，一条箭线其船头节点的编号，大于尾节点的编号。 3 ，可

╰半夏微凉°/ 2023年01月01日 05:59/ 0 赞/ 1681 阅读

相关人物关系图谱:ECharts 实现

目录 1、什么是ECharts 2、开始简单配置关系图 3、完整代码 1、什么是ECharts ECharts是百度开源的纯 Javascrip

布满荆棘的人生/ 2022年11月05日 06:28/ 0 赞/ 139 阅读

相关关系链的特点之读扩散和写扩散

[微博后台架构浅析——读扩散pull、写扩散push、混合模式(push+pull)——相关cache(redis，memcache)][pull_push_push_pul

Love The Way You Lie/ 2022年08月06日 00:29/ 0 赞/ 240 阅读

相关【Python】Matplotlib画图（十）——基于networkx画关系网络图

前言昨天才开始接触，鼓捣了一个下午，接下来会持续更新，如果哪里有错误的地方，望各位大佬指出，谢谢！数据描述两个文件，一个文件包含了网络图的节点，节点存在类别

╰+攻爆jí腚メ/ 2022年06月07日 05:41/ 0 赞/ 425 阅读

相关收集 | 方便实用的在线网站

以下都是我收藏的在线网站。 [USER.ME][] > UZER 是一个无需下载安装，就可以在浏览器中使用各种企业级大型软件（比如Office 系列，

港控/mmm°/ 2022年05月30日 10:45/ 0 赞/ 224 阅读

相关 git合并单个节点

有两个分支 git branch -a branchA branchB A分支合并B分支单个节点 git log com

╰半夏微凉°/ 2022年05月10日 03:22/ 0 赞/ 135 阅读

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

应该是至少半年了，从18年年底到现在接触的项目基本都是图谱项目，图谱项目就是尽可能的用图的形式来展示数据，所以关于echarts这个东西，也算是接触的不少了，早就想记录一些工作

缺乏、安全感/ 2021年11月23日 08:54/ 0 赞/ 934 阅读

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

我的另外一个博客[echarts实现关系网络图,单个节点可无限扩散,方便实用易懂][echarts] 就是通过下方这个改的，所以这个是最原版的代码。大家可以参考一下，其实意思

喜欢ヅ旅行/ 2021年11月22日 03:28/ 0 赞/ 359 阅读