echarts在java中与后台交互

最新推荐文章于 2024-08-08 07:46:24 发布

diamonds-

最新推荐文章于 2024-08-08 07:46:24 发布

阅读量6.9k

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/qq_38698632/article/details/79589377

版权

本文展示了如何使用Java后端与Echarts前端结合，实现股票数据的获取和柱状图、折线图展示。通过jsp页面发送ajax post请求到Java后台，后台连接数据库获取股票信息，然后传递给Echarts进行图表绘制。

摘要由CSDN通过智能技术生成

完整流程：

python爬取股票信息-------将信息保存到数据库----------通过ajax发送post请求到java后台-----java后台连接数据库获取到数据库信息-------通过echarts进行展示（柱状图、折线图）

python爬取股票信息就不贴代码了，主要是后面的。

jsp

1、通过ajax发送post请求到后台获取数据进行展示

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName()
+ ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello ECharts</title>

<script src="echarts.js"></script>
<script src="jquery.min.js"></script>
</head>
<body>

<div id="myDiv" style="height: 750px;width:1000px;"></div>
<script type="text/javascript">
function loadData(option) {
$.ajax({
type : 'post', //传输类型
async : false, //同步执行
url : 'bar.do', //web.xml中注册的Servlet的url-pattern
data : {},
dataType : 'json', //返回数据形式为json
success : function(result) {
if (result) {
//初始化xAxis[0]的data
option.xAxis[0].data = [];
for (var i=0; i<result.length; i++) {
option.xAxis[0].data.push(result[i].day);

}

//因为我是进行了3个数据方面进行的展示，所以写了三个,下面的命名请原谅

//初始化series[0]的data
option.series[0].data = [];
for (var i=0; i<result.length; i++) {
option.series[0].data.push(result[i].kaipan);
//option.series[0].data.push(result[i].shoupan);
}
//初始化series[1]的data
option.series[1].data = [];
for (var i=0; i<result.length; i++) {
option.series[1].data.push(result[i].kaipan);