echarts graph生成关系网络关系力向图

1.数据准备

开始进行力向图的数据准备，这一步需要对js中的数组和对象有所了解，如果数据格式不对图表是显示不出来的。echarts使用的数据是json格式，最外层用方括号[]表示，而里面的对象用大括号{}表示，对象内的映射用冒号：表示，并列数据用逗号分隔，我一般将其理解为对象数组。

//创建数据
//node id 主键id，category 类别分类，name 名称，lable tooltip显示的文字，symbolSize 节点大小 越大显示越大
//links source 起始节点id，target 目的节点id，lable tooltip显示连接关系的文字
var categories=[{name:"核心人物"},{name:"家人"},{name:"朋友"}]
var nodes=[
    {id:1,name: '乔布斯',lable:'史蒂夫·乔布斯,美国发明家、企业家、美国苹果公司联合创办人。', symbolSize: 30},
    {id:2,category:1,name: '丽萨-乔布斯', lable:'史蒂夫·乔布斯的女儿',symbolSize: 20},
    {id:3,category:1,name: '保罗-乔布斯',lable:'史蒂夫·乔布斯的父亲', symbolSize: 20},
    {id:4,category:1,name: '克拉拉-乔布斯',lable:'史蒂夫·乔布斯的母亲', symbolSize: 20},
    {id:5,category:2,name: '劳伦-鲍威尔', symbolSize: 15},
    {id:6,category:2,name: '史蒂夫-沃兹尼艾克', lable:'苹果公司合伙人',symbolSize: 15},
    {id:7,category:2,name: '奥巴马', lable:'美国总统', symbolSize: 15},
    {id:8,category:2,name: '比尔-盖茨', lable:'比尔·盖茨,企业家、软件工程师、慈善家、微软公司创始人。',symbolSize: 15},
    {id:9,category:0,name: '乔纳森-艾夫',  symbolSize: 15},
    {id:10,category:0,name: '蒂姆-库克',lable:'蒂姆-库克,现任苹果公司首席执行官',symbolSize: 15},
    {id:11,category:0,name: '龙-韦恩',  symbolSize: 15}
];
var links=[
    {source : '2', target : '1', lable: '女儿'},
    {source : '3', target : '2', lable: '父亲'},
    {source : '4', target : '1', lable: '母亲'},
    {source : '5', target : '1', },
    {source : '6', target : '1', lable: '合伙人'},
    {source : '7', target : '1'},
    {source : '8', target : '1',  lable: '竞争对手'},
    {source : '9', target : '1',  lable: '爱将'},
    {source : '10', target : '1'},
    {source : '11', target : '1'},
    {source : '5', target : '3'},
    {source : '7', target : '3'},
    {source : '7', target : '4'},
    {source : '7', target : '5'},
    {source : '7', target : '6'},
    {source : '8', target : '7'},
    {source : '8', target : '4'},
    {source : '10', target : '7'}
]
jsondata={"title":"人物关系图","categories":categories,"nodes":nodes,"links":links}

2.数据解析

//设置option样式
option = {
    title: {
        text: title,//标题
        top: 'top',//相对在y轴上的位置
        left: 'center'//相对在x轴上的位置
    },
    tooltip : {//提示框，鼠标悬浮交互时的信息提示
        trigger: 'item',//数据触发类型
        formatter: function(params){//触发之后返回的参数，这个函数是关键
            if (params.data.category !=undefined) {//如果触发节点
                return params.data.lable;//返回标签
            }else {//如果触发边
                if(params.data.lable == undefined){
                    return "关系:未知"
                }else{
                    return '关系:'+params.data.lable;
                }
            }
        },
    },
    color : ['#EE6A50','#4F94CD','#B3EE3A','#DAA520','#f845f1', '#ad46f3','#5045f6','#4777f5','#44aff0','#45dbf7','#f6d54a','#ff4343','#fa827d','#3db18a','#ff5897','#372dc4','#c42d6d','#82c42d'],
    // color:['#EE6A50','#4F94CD','#B3EE3A','#DAA520'],
    //工具箱，每个图表最多仅有一个工具箱
    toolbox: {
        show : true,
        feature : {//启用功能
            //dataView数据视图，打开数据视图，可设置更多属性,readOnly 默认数据视图为只读(即值为true)，可指定readOnly为false打开编辑功能
            dataView: {show: true, readOnly: true},
            restore : {show: true},//restore，还原，复位原始图表
            saveAsImage : {show: true}//saveAsImage，保存图片
        }
    },
    legend: [{
        x: 'left',//图例位置
        data: categories.map(function (a) {
            return a.name;
        })
    }],
    animationEasingUpdate: "quinticInOut",
    animationDurationUpdate: 300,
    series : [
        {
            name: '人际关系网络图',
            type: 'graph',
            layout: 'force',
            draggable: true,//指示节点是否可以拖动
            focusNodeAdjacency: true, //当鼠标移动到节点上，突出显示节点以及节点的边和邻接节点
            roam: true,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
            symbol: 'circle',
            force : { //力引导图基本配置
                repulsion : 100,//节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
                gravity : 0.03,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
                edgeLength :[80,100],//边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
                layoutAnimation : true//因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。
            },
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        textStyle: {
                            color: '#333'
                        },
                        position: 'inside'
                    },
                    nodeStyle : {
                        brushType : 'both',
                        borderColor : 'rgba(255,215,0,0.4)',
                        borderWidth : 1
                    }
                }
            },
            // 关系边的公用线条样式
            lineStyle: {
                normal: {
                    show : true,
                    color: 'target',//决定边的颜色是与起点相同还是与终点相同
                    curveness: 0.3//边的曲度，支持从 0 到 1 的值，值越大曲度越大。
                }
            },
            emphasis: {
                lineStyle: {
                    width: 10
                }
            },
            data: nodes,
            links:links,
            categories: categories,
        }
    ]

3.代码下载

https://github.com/15190250058/graph/