java&echarts 做的人物关系图

<pre name="code" class="java">import org.springframework.context.annotation.Scope;

import org.springframework.stereotype.Controller;

import org.springframework.ui.ModelMap;

import org.springframework.web.bind.annotation.RequestMapping;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;

import javax.servlet.http.HttpServletRequest;


@Controller
@Scope("prototype")
public class EchartsController {
    String Driver = "com.mysql.jdbc.Driver";
    String URL = "jdbc:mysql://192.168.0.240:3306/ims";
    String Username = "user";
    String Password = "password";

    @RequestMapping("/echarts/show")
    public String showecharts(ModelMap modelMap, HttpServletRequest request)
        throws SQLException, ClassNotFoundException {
        String category = "1";
        String nodes = "";
        String links = "";
        String owner = "";
        String ownername = "";
        Class.forName(Driver);

        Connection conn = DriverManager.getConnection(URL, Username, Password);
        String num = request.getParameter("num");
        String sqlString = "select count(*) from t_phone_book where friendnum='" +
            num + "'";
        ResultSet resultSet = conn.createStatement().executeQuery(sqlString);
        resultSet.next();

        long size = resultSet.getLong(1);

        if (size > 0) {
            resultSet = conn.createStatement()
                            .executeQuery("select * from t_phone_book where num='" +
                    num + "'");

            while (resultSet.next()) {
                ownername = resultSet.getString("name");
                owner = "{category:" + category + ", name: '" + ownername +
                    "',value : 4,draggable: true},";
            }

            resultSet = conn.createStatement()
                            .executeQuery("select * from t_phone_book where friendnum='" +
                    num + "'");

            while (resultSet.next()) {
                String othername = resultSet.getString("name");
                num = resultSet.getString("num");
                nodes += ("{category:" + category + ", name: '" + othername +
                "',value : 5,label:'" + num + "'}\n,");
                links += ("{source : '" + ownername + "', target : '" +
                othername + "', weight : 2}\n,");
            }
        } else {
            if (num == null) {
                resultSet = conn.createStatement()
                                .executeQuery("select * from t_phone_book where num='92323535654111'");

                while (resultSet.next()) {
                    ownername = resultSet.getString("name");
                    owner = "{category:" + category + ", name: '" + ownername +
                        "',value : 4,draggable: true},";
                }

                resultSet = conn.createStatement()
                                .executeQuery("select * from t_phone_book where friendnum='92323535654111'");

                while (resultSet.next()) {
                    String othername = resultSet.getString("name");
                    num = resultSet.getString("num");
                    nodes += ("{category:" + category + ", name: '" +
                    othername + "',value :6,label:'" + num + "'}\n,");
                    links += ("{source : '" + ownername + "', target : '" +
                    othername + "', weight : 6}\n,");
                }
            } else {
                resultSet = conn.createStatement()
                                .executeQuery("select * from t_phone_book where num='" +
                        num + "'");

                while (resultSet.next()) {
                    ownername = resultSet.getString("name");

                    String othername = resultSet.getString("name");
                    owner = "{category:1, name: '" + ownername +
                        "',value : 140},";
                    nodes += ("{category:" + category + ", name: '" +
                    othername + "',value :6,label:'" + num + "'}\n,");
                    links += ("{source : '" + ownername + "', target : '" +
                    othername + "', weight : 6}\n,");
                }

                request.getSession()
                       .setAttribute("config", "minRadius : 50,maxRadius : 100,");
                request.getSession().setAttribute("nodes", nodes);
                request.getSession().setAttribute("links", links);
                request.getSession().setAttribute("owner", owner);

                return "/force.jsp";
            }
        }

        if ((nodes != null) && !nodes.equals("")) {
            request.getSession()
                   .setAttribute("config", "minRadius : 15,maxRadius : 20,");
            nodes = nodes.substring(0, nodes.length() - 1);
            links = links.substring(0, links.length() - 1);
            request.getSession().setAttribute("nodes", nodes);
            request.getSession().setAttribute("links", links);
        }

        request.getSession().setAttribute("owner", owner);

        return "/force.jsp";
    }
}

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts · Example</title>
    <link rel="shortcut icon" href="asset/ico/favicon.png">
    <link href="asset/css/bootstrap.css" rel="stylesheet">
    <link href="asset/css/carousel.css" rel="stylesheet">
    <link href="asset/css/echartsHome.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="www/js/echarts.js"></script>
    <script src="asset/js/codemirror.js"></script>
    <script src="asset/js/javascript.js"></script>
    <link href="asset/css/codemirror.css" rel="stylesheet">
    <link href="asset/css/monokai.css" rel="stylesheet">
</head>
<body>

    <!-- Fixed navbar -->
    <div class="container-fluid">
        <div class="row-fluid example">
            <div id="sidebar-code" class="col-md-4" style="display:none;">
                <div class="well sidebar-nav">
                    <div class="nav-header"><a href="#" onclick="autoResize()" class="glyphicon glyphicon-resize-full" id ="icon-resize" ></a>option</div>
                    <textarea id="code" name="code">
				option = {
					title : {
						text: '人物关系：乔布斯',
						x:'right',
						y:'bottom'
					},
					tooltip : {
						trigger: 'item',
						formatter: '{a} : {b}'
					},
						toolbox: {
						show : true,
						feature : {
							restore : {show: true},
							magicType: {show: true, type: ['force', 'chord']},
							saveAsImage : {show: true}
						}
					},
					legend: {
						x: 'left',
						data:['家人','朋友']
					},
					   isShowScrollBar:false,
					
					series : [
						{
							type:'force',
							name : "人物关系",
							ribbonType: false,
							categories : [
								{
									name: '人物'
								},
								{
									name: '家人'
<!--									symbol: 'diamond'    形状  diamond 矩形   默认是圆形 -->   
								},
								{
									name:'朋友'
								}
							],
							itemStyle: {
								normal: {
									label: {
										show: true,
										textStyle: {
											color: '#333'
										}
									},
									nodeStyle : {
										brushType : 'both',
										borderColor : 'rgba(255,215,0,0.4)',
										borderWidth : 1
									}
								},
								emphasis: {
									label: {
										show: false
										// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
									},
									nodeStyle : {
										//r: 30
									},
									linkStyle : {}
								}
							},
							${config}
<%--							minRadius : 20, //圆圈最小半径--%>
<%--							maxRadius : 30,	//最大半径--%>
							gravity: 1,
							scaling: 2,  
							draggable: true,
							linkSymbol: 'arrow',
							steps: 10,
							coolDown: 0.9,
							density : 0.8,
							attractiveness: 0.8,
							//preventOverlap: true,
							nodes:[
								${owner}
								${nodes}
		
						],
							links : [
								${links}
							]
						}
					]
				};
				var ecConfig = require('echarts/config');
				function focus(param) {
				
			    var data = param.data;
			    var links = option.series[0].links;
			    var nodes = option.series[0].nodes;
			    if (
			        data.source !== undefined
			        && data.target !== undefined
			    ) { //点击的是边
			        var sourceNode = nodes[data.source];
			        var targetNode = nodes[data.target];
			        console.log("选中了边 " + sourceNode.name + ' -> ' + targetNode.name + ' (' + data.weight + ')');
			    } else { // 点击的是点
			    	$("#num").val(data.label);
			        console.log("选中了" + data.name + '(' + data.value + ')');
			    }
			    if(data.label!==undefined){
			    window.location.href="http://localhost:8080/Echats/?num="+URLencode(data.label)+"";
			    }
			}
				myChart.on(ecConfig.EVENT.CLICK, focus);
				myChart.on(ecConfig.EVENT.FORCE_LAYOUT_END, function () {
					console.log(myChart.chart.force.getPosition());
				});
				
				
				function URLencode(sStr) 
					{
					    return escape(sStr).replace(/\+/g, '%2B').replace(/\"/g,'%22').replace(/\'/g, '%27').replace(/\//g,'%2F');
					}
									
				</textarea>
                </div><!--/.well -->
            </div><!--/span-->
            <div id="graphic" class="col-md-8" style="width:100%;">
                <div id="main" class="main" style="width:100%;height:600px;"></div>
                <div>
                    <button type="button" class="btn btn-sm btn-success" onclick="refresh(true)">刷 新</button>
                    <span class="text-primary">切换主题</span>
                    <select id="theme-select"></select>
                    <span id='wrong-message' style="color:red"></span>
                </div>
            </div><!--/span-->
        </div><!--/row-->
    </div><!--/.fluid-container-->
    <script src="asset/js/jquery.min.js"></script>
    <script src="asset/js/echartsHome.js"></script>
    <script src="asset/js/bootstrap.min.js"></script>
    <script src="asset/js/echartsExample.js"></script>
</body>
</html>

  

路径一定要找好，否则会没有效果