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