将echart的官方实例关系图发布到Web工程上

本文链接：https://blog.csdn.net/qq_37321253/article/details/76653565

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>


<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');