Spring MVC框架下，HTML網頁讀取資料庫資料填充Echarts
阿新 • • 發佈：2018-12-30
一、背景
專案需要展示人車的關聯關係，車使用車牌號標識，人使用ID來標識。Unity中嵌入了一個web視窗來呼叫後臺html頁面然後顯示。html需要以Echarts中力導向圖的形式顯示出人車關聯關係。如下圖Echarts示例中一樣。下面分為幾個步驟實現：
1. 編寫一個html頁面，同時引入echart.js外掛和jquery外掛。實現echarts官網上的如下關係圖
2.使用jquery封裝的ajax請求MVC的controller介面。然後將資料填充給具體的echarts圖表
二、HTML頁面
網際網路環境下，src如下，如果是離線情況下，直接寫js所在的包即可。 使用echart3
將如下的html網頁命名為relation.html，然後放在Java Web專案的webapp/views目錄下。echart.js放在webapp/js目錄下。在瀏覽器訪問 http://localhost:8080/cityGurd/views/relation.html即可顯示關係圖。
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.js"></script>。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.js"></script> </head> <body> <!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); var option={ title: { text:"echarts關係圖demo" }, series: [{ itemStyle: { normal: { label: { position: 'top', show: true, textStyle: { color: '#333' } }, nodeStyle: { brushType: 'both', borderColor: 'rgba(255,215,0,0.4)', borderWidth: 1 }, linkStyle: { normal: { color: 'source', curveness: 0, type: "solid" } } }, }, force:{ initLayout: 'circular',//初始佈局 repulsion:100,//斥力大小 }, animation: false, name:"", type: 'graph',//關係圖型別 layout: 'force',//引力佈局 roam: true,//可以拖動 // legendHoverLink: true,//是否啟用圖例 hover(懸停) 時的聯動高亮。 // hoverAnimation: false,//是否開啟滑鼠懸停節點的顯示動畫 // coordinateSystem: null,//座標系可選 // xAxisIndex: 0, //x軸座標 有多種座標系軸座標選項 // yAxisIndex: 0, //y軸座標 // ribbonType: true, useWorker: false, minRadius: 15, maxRadius: 25, gravity: 1.1, scaling: 1.1, nodes: [{ "id": 0, "category": 0, "name": "深水稻【60D】", "label": "深水稻【60D】", "symbolSize": 40, "ignore": false, "flag": true }, { "id": "1", "category": 1, "name": "Deep減water rice", "label": "Deep減water rice", "symbolSize": 20, "ignore": true, "flag": true }, { "id": "r", "category": 1, "name": "D浮稻", "label": "D浮稻", "symbolSize": 20, "ignore": true, "flag": true }, { "id": "f", "category": 1, "name": "D澱稻", "label": "D澱稻", "symbolSize": 20, "ignore": true, "flag": true }, { "id": "k", "category": 1, "name": "S1水稻", "label": "S1水稻", "symbolSize": 20, "ignore": true, "flag": true }, { "id": 5, "category": 2, "name": "S2不育系 ", "label": "S2不育系 ", "symbolSize": 20, "ignore": true, "flag": true }, { "id": 6, "category": 2, "name": "S2不育系", "label": "S2不育系", "symbolSize": 20, "ignore": true, "flag": true }, { "id": 7, "category": 2, "name": "S2人為土", "label": "S2人為土", "symbolSize": 20, "ignore": true, "flag": true }, { "id": 8, "category": 2, "name": "S2 土壤型別(人為）", "label": "S2 土壤型別(人為）", "symbolSize": 20, "ignore": true, "flag": true }, { "id": 9, "category": 2, "name": "S2稻", "label": "S2稻", "symbolSize": 20, "ignore": true, "flag": true } ],//資料內容 //接收格式均為json物件陣列 [{ "source": 1, "target": 0, "name": "EnglishName" }, { "source": 2, "target": 0, "name": "equipment" }, { "source": 3, "target": 0, "name": "equipment" }, { "source": 5, "target": "k", "name": "superClass" }, { "source": 6, "target": 4, "name": "superClass" }, { "source": 7, "target": 4, "name": "superClass" }, { "source": 8, "target": 4, "name": "superClass" }, { "source": 9, "target": 4, "name": "superClass" }, { "source": 4, "target": 0, "name": "superClass" } ]//關係對應 } ] } myChart.setOption(option);//將option新增到mychart中 </script> </body> </html>
三、HTMl頁面加入ajax
（1）ajax 常用格式
$.ajax的一般格式 $.ajax({ type: 'POST', url: url , data: data , success: success , dataType: dataType }); 二、$.ajax的引數描述 引數 描述 url 必需。規定把請求傳送到哪個 URL。 data 可選。對映或字串值。規定連同請求傳送到伺服器的資料。 success(data, textStatus, jqXHR) 可選。請求成功時執行的回撥函式。 dataType 可選。規定預期的伺服器響應的資料型別。 預設執行智慧判斷（xml、json、script 或 html）。 三、$.ajax需要注意的一些地方： 1.data主要方式有三種，html拼接的，json陣列，form表單經serialize()序列化的；通過dataType指定，不指定智慧判斷。 2.$.ajax只提交form以文字方式，如果非同步提交包含<file>上傳是傳過不過去,需要使用jquery.form.js的$.ajaxSubmit
（2）ajax data常用格式
<script type="text/javascript">
//第一種寫法（拼接URL）
function getFormInfo(){
var name='wen';
var user='chen';
$.ajax({
url: "/login/authenticate?name="+name+"&user="+user,
type: "POST",
data:{},
dataType: "json",
success: function(data){
},
error:function(err){
console.log(err.statusText);
console.log('異常');
}
});
}
//第二種寫法（表單序列化為json資料）
function getFormInfo(){
var params=$('#login').serializeJSON();
console.log(params);
$.ajax({
url: "http://192.168.10.32:6833/login/authenticate",
type: "POST",
data:params,
cache:false,
dataType: "json",
success: function(data){
},
error:function(err){
}
});
}
// 第三種寫法（表單序列化為字串）
function getFormInfo(){
var params=$('#login').serialize();
console.log(params);
$.ajax({
url: "http://192.168.10.32:6833/login/authenticate",
type: "POST",
data:params,
cache:false,
dataType: "json",
success: function(data){
},
error:function(err){
}
});
}
//第四種寫法（帶json資料）
function getFormInfo(){
$.ajax({
url: "http://192.168.10.32:6833/login/authenticate",
type: "POST",
data:{
name:'chem',
user:'wen'
},
cache:false,
dataType: "json",
success: function(data){
},
error:function(err){
}
});
}
//第五種寫法（拼接data）
function getFormInfo(){
var name='chen';
var user='wen';
$.ajax({
url: "http://192.168.10.32:6833/login/authenticate",
type: "POST",
data:'name='+name+'&user='+user,
cache:false,
dataType: "json",
success: function(data){
},
error:function(err){
}
});
}
//第六種寫法（既有全部直接獲取表單中的資料又有單獨出來的資料）
function getFormInfo(){
var params=$('#login').serializeJSON();
console.log(params);
params.height='20';
$.ajax({
url: "http://192.168.10.32:6833/login/authenticate",
type: "POST",
data:params,
cache:false,
dataType: "json",
success: function(data){
},
error:function(err){
}
});
}
</script>（3）通過url將引數傳遞到html，然後js獲取url中的引數，傳給MVC的controller介面去查詢指定資料
1、獲取Url引數部分
function GetUrlPara()
{
var url = document.location.toString();
var arrUrl = url.split("?");
var para = arrUrl[1];
return para;
}
呼叫方法：GetUrlPara()
舉例：假如當前 Url 是 http// www. liangshunet. com/pub/item.aspx?t=osw7，則擷取到的引數部分為：t=osw7。
2、獲取當前相對路徑的方法
首先獲取 Url，然後把 Url 通過 // 截成兩部分，再從後一部分中擷取相對路徑。如果擷取到的相對路徑中有引數，則把引數去掉。
function GetUrlRelativePath()
{
var url = document.location.toString();
var arrUrl = url.split("//");
var start = arrUrl[1].indexOf("/");
var relUrl = arrUrl[1].substring(start);//stop省略，擷取從start開始到結尾的所有字元
if(relUrl.indexOf("?") != -1){
relUrl = relUrl.split("?")[0];
}
return relUrl;
}
呼叫方法：GetUrlRelativePath();
舉例：假如當前 Url 是 http// www. liangshunet. com/pub/item.aspx?t=osw7，則擷取到的相對路徑為：/pub/item.aspx。
3、獲取當前Url的4種方法
var url = window.location.href;
var url = self.location.href;
var url = document.URL;
var url = document.location;
ie 位址列顯示的是什麼，獲取到的 url 就是什麼。
4、js獲取當前域名有2種方法
1、方法一
var domain = document.domain;
2、方法二
var domain = window.location.host;
3、注意問題
由於獲取到的當前域名不包括 http://，所以把獲取到的域名賦給 a 標籤的 href 時，別忘了加上 http://，否則單擊連結時導航會出錯。（4）如果url中的引數在js中讀取之後，編碼有問題。就使用decodeURI去解碼即可。
HTML中的$("form").serialize()函式，在submit按鈕點選時，將form表單中含有name的input整理成一個“name=aaa&pass=bbb”這樣的字串，使用get方法請求時會將此字串新增到請求url後面作為引數字尾，如果請求內容中存在漢字（即form表單中需要傳輸的input中有漢字），漢字將轉換為一種由“%”開頭的編碼。下面是常用的兩種編碼方式：
1.encodeURI編碼
定義和用法:： encodeURI() 函式可把字串作為 URI 進行編碼。
語 法： encodeURI(URIstring)
引數 描述： URIstring 必需。一個字串，含有 URI 或其他要編碼的文字。
返 回 值： URIstring 的副本，其中的某些字元將被十六進位制的轉義序列進行替換。
說 明： 該方法不會對 ASCII 字母和數字進行編碼，也不會對這些 ASCII 標點符號進行編碼： - _ . ! ~ * ' ( ) 。
該編碼方法的目的是對 URI 進行完整的編碼，因此對以下在 URI 中具有特殊含義的 ASCII 標點符號，encodeURI() 函式是不會進行轉義的：;/?:@&=+$,#
2.encodeURIComponent() 編碼
定義和用法： encodeURIComponent() 函式可把字串作為 URI 元件進行編碼。
語 法： encodeURIComponent(URIstring)
引數 描述： URIstring 必需。一個字串，含有 URI 元件或其他要編碼的文字。
返 回 值： URIstring 的副本，其中的某些字元將被十六進位制的轉義序列進行替換。
說 明： 該方法不會對 ASCII 字母和數字進行編碼，也不會對這些 ASCII 標點符號進行編碼： - _ . ! ~ * ' ( ) 。
其他字元（比如 ：;/?:@&=+$,# 這些用於分隔 URI 元件的標點符號），都是由一個或多個十六進位制的轉義序列替換 的。
解碼方式：
encodeURI()編碼的解碼函式為 decodeURI()
encodeURIComponent()編碼的解碼函式為 decodeURIComponent()，（5）對字串進行JSON格式化
什麼是json？
什麼是json,json是什麼,json如何使用
JSON是一種取代XML的資料結構,和xml相比,它更小巧但描述能力卻不差,由於它的小巧所以網路傳輸資料將減少更多流量從而加快速度,
那麼,JSON到底是什麼?
JSON就是一串字串 只不過元素會使用特定的符號標註。
{} 雙括號表示物件
[] 中括號表示陣列
"" 雙引號內是屬性或值
: 冒號表示後者是前者的值(這個值可以是字串、數字、也可以是另一個數組或物件)
所以 {"name": "Michael"} 可以理解為是一個包含name為Michael的物件
而[{"name": "Michael"},{"name": "Jerry"}]就表示包含兩個物件的陣列
當然了,你也可以使用{"name":["Michael","Jerry"]}來簡化上面一部,這是一個擁有一個name陣列的物件
ps:現在還有很多人存在一些誤區,為什麼{name:'json'}在檢驗時通過不了,
那是因為JSON官網最新規範規定
如果是字串,那不管是鍵或值最好都用雙引號引起來,所以上面的程式碼就是{"name":"json"}
不要反駁,官網就是這麼定義的。
JS字串轉換成JSON的四種方法：
1、jQuery外掛支援的轉換方式：
示例：
$.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以將json字串轉換成json物件
2、瀏覽器支援的轉換方式(Firefox，chrome，opera，safari，ie)等瀏覽器：
示例：
JSON.parse(jsonstr); //可以將json字串轉換成json物件
JSON.stringify(jsonobj); //可以將json物件轉換成json對符串
注：ie8(相容模式),ie7和ie6沒有JSON物件，推薦採用JSON官方的方式，引入json.js。
3、Javascript支援的轉換方式：
eval('(' + jsonstr + ')'); //可以將json字串轉換成json物件,注意需要在json字元外包裹一對小括號
注：ie8(相容模式),ie7和ie6也可以使用eval()將字串轉為JSON物件，但不推薦這些方式，這種方式不安全eval會執行json串中的表示式。
4、JSON官方的轉換方式：
http://www.json.org/提供了一個json.js,這樣ie8(相容模式),ie7和ie6就可以支援JSON物件以及其stringify()和parse()方法；
可以在https://github.com/douglascrockford/JSON-js上獲取到這個js，一般現在用json2.js。(5)經過上面的知識，就可以寫出如下的html程式碼，瀏覽器訪問：http://cityGurd/views/relation.html？car_number = ABC即可實現藉由MVC controller從資料庫查詢車牌號對應資料，然後填充到echarts的目的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="/cityGud/js/echarts.js"></script>
<script type="text/javascript" src="/cityGud/js/jquery-3.3.1.js"></script>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;margin:0 auto"></div>
<script type="text/javascript">
var url = document.location.toString();
var arrUrl = url.split("?");
var carParam = arrUrl[1];
var carParamArr = carParam.split("=");
var car_number =decodeURI(carParamArr[1]).toString();
//var param = "{\"args\":'{\"region\":\"1\",\"car_number\":"+car_number+"}'}";
var param = "{\"region\":\"1\",\"car_number\":"+ car_number +"}";
//var param = "{args:'{\"region\":\"1\",\"car_number\":\"雲H8H182\"}'}";
var myChart = echarts.init(document.getElementById('main'));
var master;
var option={
title: {
text:"echarts關係圖demo"
},
series: [{
itemStyle: {
normal: {
label: {
position: 'top',
show: true,
textStyle: {
color: '#333'
}
},
nodeStyle: {
brushType: 'both',
borderColor: 'rgba(255,215,0,0.4)',
borderWidth: 1
},
linkStyle: {
normal: {
color: 'source',
curveness: 0,
type: "solid"
}
}
},
},
force:{
initLayout: 'circular',//初始佈局
repulsion:100,//斥力大小
},
animation: false,
name:"",
type: 'graph',//關係圖型別
layout: 'force',//引力佈局
roam: true,//可以拖動
// legendHoverLink: true,//是否啟用圖例 hover(懸停) 時的聯動高亮。
// hoverAnimation: false,//是否開啟滑鼠懸停節點的顯示動畫
// coordinateSystem: null,//座標系可選
// xAxisIndex: 0, //x軸座標 有多種座標系軸座標選項
// yAxisIndex: 0, //y軸座標
// ribbonType: true,
useWorker: false,
minRadius: 15,
maxRadius: 25,
gravity: 1.1,
scaling: 1.1,
nodes: [],//資料內容
//接收格式均為json物件陣列
links:[]//關係對應
} ]
}
myChart.setOption(option);
//非同步獲取資料
$.ajax({
type:"POST",
url:"/cityGud/analysis_car/car_graph?args=" + param,
dataType:"json",
data:{},
success:function(data){
console.log(data.mas);
console.log(data.sec);
myChart.setOption({
series: [{
nodes:data.mas,
links:data.sec
}]
});//將option新增到mychart中
},
error:function(err){
console.log(param);
//console.log($.parseJSON(param));
}
});
</script>
</body>
</html>