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>

  

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