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

喜欢ヅ旅行 2021-11-22 03:28 401阅读 0赞

我的另外一个博客[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":"小王", "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  交流。**

[echarts]: https://blog.csdn.net/Xiaodongge521/article/details/97375087
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hpYW9kb25nZ2U1MjE_size_16_color_FFFFFF_t_70]: /images/20211122/b8821f0821394afd846dcff9c097f202.png

发表评论取消回复

表情：

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

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

相关阅读

相关朋友圈

一、前言问题来源LeetCode 547，难度：中等问题链接：[https://leetcode-cn.com/problems/friend-circles/][

约定不等于承诺〃/ 2023年02月20日 07:55/ 0 赞/ 22 阅读

相关朋友圈

1、题目描述班上有 N 名学生。其中有些人是朋友，有些则不是。他们的友谊具有是传递性。如果已知 A 是 B 的朋友，B 是 C 的朋友，那么我们可以认为 A 也是 C

雨点打透心脏的1/2处/ 2022年10月01日 06:47/ 0 赞/ 212 阅读

相关找女朋友

找女朋友 Time Limit: 15ms Memory limit: 65536K 有疑问？点这里^\_^ 题目描述山东理工大学有很多学生，当然也有很多美

拼搏现实的明天。/ 2022年08月10日 06:08/ 0 赞/ 213 阅读

相关找朋友

建议使用字符数组去建立矩阵，不要用int类型的，容易wrong answer Problem Description X，作为户外运动的忠实爱好者，总是不想呆在家里

向右看齐/ 2022年07月12日 07:50/ 0 赞/ 206 阅读

相关找朋友

建议使用字符数组去建立矩阵，不要用int类型的，容易wrong answer Problem Description X，作为户外运动的忠实爱好者，总是不想呆在家里

爱被打了一巴掌/ 2022年07月12日 07:50/ 0 赞/ 171 阅读

相关微信分享朋友，朋友圈，qq

<?php if (PublicFunHelper::isWeixin()): ?> <script src="http://res.wx.qq.com

亦凉/ 2022年06月05日 01:43/ 0 赞/ 385 阅读

相关趣图：恶搞一个朋友的程序

![1240][] [趣图：程序员的忍耐是有限度的！][Link 1] [趣图：说客户又要改求的时候……][Link 2] > 微信公众号：javafirst >

╰+攻爆jí腚メ/ 2022年04月14日 05:11/ 0 赞/ 199 阅读

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

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

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

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

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

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

相关 echarts 关系图graph

1、配置数据类型 data:[ { name:'节点名称', value:'节点值' x:节点坐标, 在

朴灿烈づ我的快乐病毒、/ 2021年07月25日 01:49/ 1 赞/ 1551 阅读