一、背景
项目需要展示人车的关联关系，车使用车牌号标识，人使用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>