关系图绘制详解

由于项目中需要使用关系图，一般官方网站都是用自己的json文件，而且关系图一般都包含很多的数据，修改起来很不方便，所以从网上找到一个详细关系图详细的博客，所以在此分享一下

代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
 <div id="container" style="height:500%"></div>
  <script type="text/javascript" src="js/echarts.js"></script>
    <script type="text/javascript" src="js/dataTools.js"></script>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
     <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
myChart.showLoading();
var webkitDep = {
"type": "force",
"categories": [//关系网类别，可以写多组
    {
        "name": "人物关系",//关系网名称
        "keyword": {},
        "base": "人物关系"
    }
],
"nodes": [//展示的节点
    {
        "name": "刘烨",//节点名称
        "value": 3,
        "category": 0//与关系网类别索引对应，此处只有一个关系网所以这里写0
    },
    {
        "name": "霓娜",
        "value": 1,
        "category": 0
    },
    {
        "name": "诺一",
        "value": 1,
        "category": 0
    }
],
"links": [//节点之间连接
    {
        "source": 0,//起始节点，0表示第一个节点
        "target": 1 //目标节点，1表示与索引为1的节点进行连接
    },
    {
        "source": 0,
        "target": 2
    }
]
};
myChart.hideLoading();

option = {
    legend: {
        data: ['人物关系']//此处的数据必须和关系网类别中name相对应
    },
    series: [{
        type: 'graph',
        layout: 'force',
        animation: false,
        label: {
            normal: {
                show:true,
                position: 'right'
            }
        },
        draggable: true,
        data: webkitDep.nodes.map(function (node, idx) {
            node.id = idx;
            return node;
        }),
        categories: webkitDep.categories,
        force: {
            edgeLength: 101,//连线的长度
            repulsion: 100  //子节点之间的间距
        },
        edges: webkitDep.links
    }]
};
myChart.setOption(option);

    </script>
</body>
</html>

 

 

 

 

 

 

参考地址：https://blog.csdn.net/qq_29384639/article/details/53322142?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

posted on 2020-03-21 07:23  一往无前！  阅读(1663)  评论(0)  编辑  收藏  举报