1、準備工作
下載三個js文件和一個數據文件，js文件分別爲jquery.js、echarts.js、dataTool.js，數據文件爲les-miserables.gexf；
注意：官網裏可以找到前兩個js文件，第三個js和數據文件不好找，爲節省大家時間，在此提供我的js和數據文件：
百度網盤鏈 接:https://pan.baidu.com/s/1i5adq7N 密碼: jje6
2、將echart文件變成jsp文件（代碼分段解析）
1）寫上jsp的開頭代碼（編碼格式、路徑、網頁大小等）
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html style="height: 100%" lang="zh">
2）在網頁的〈head〉中加載所需的js文件（路徑非常重要，建議放在系統的js文件下，最好採用絕對路徑，以免出錯）
<head>
<meta charset="utf-8">
<title>ECharts關係圖</title>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="${pageContext.request.contextPath }/assets/js/echart/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/assets/js/echart/echarts.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/assets/js/echart/dataTool.js"></script>
</head>
3）在網頁的〈body〉中 爲echarts 準備一個具有高和寬的容器dom並初始化
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
4）添加echarts關係圖代碼
myChart.showLoading();
//加載數據及其處理函數
$.get('${pageContext.request.contextPath }/assets/data/les-miserables.gexf', function (xml) {
//數據路徑太重要，必須正確，爲避免錯誤，建議採用絕對路徑（如上）
myChart.hideLoading();//關閉loading
var graph = echarts.dataTool.gexf.parse(xml);
var categories = [];
for (var i = 0; i < 9; i++) {
categories[i] = {
name: '類目' + i
};
}
graph.nodes.forEach(function (node) {
node.itemStyle = null;
node.value = node.symbolSize;
node.symbolSize /= 1.5;
node.label = {
normal: {
show: node.symbolSize > 30
}
};
node.category = node.attributes.modularity_class;
});
option = {
title: {
text: 'Les Miserables',
subtext: 'Default layout',
top: 'bottom',
left: 'right'
},
tooltip: {},
legend: [{
// selectedMode: 'single',
data: categories.map(function (a) {
return a.name;
})
}],
animationDuration: 1500,
animationEasingUpdate: 'quinticInOut',
series : [
{
name: 'Les Miserables',
type: 'graph',
layout: 'none',
data: graph.nodes,
links: graph.links,
categories: categories,
roam: true,
label: {
normal: {
position: 'right',
formatter: '{b}'
}
},
lineStyle: {
normal: {
color: 'source',
curveness: 0.3
}
}
}
]
};
myChart.setOption(option);
}, 'xml');
5)寫上jsp的尾代碼（保證也頁面代碼的完整性）
</script>
</body>
</html>
3、ssm框架下編寫controller文件
詳見本人另一篇博客：http://blog.csdn.net/qq_37321253/article/details/76512241