<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="#" οnclick="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" οnclick="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>
路径一定要找好,否则会没有效果