这是servlet
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.ServletRequestAttributeEvent;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.jsonFormatVisitors.JsonArrayFormatVisitor;
import jdk.nashorn.internal.runtime.linker.LinkerCallSite;
import net.sf.json.JSONArray;
/**
* Servlet implementation class Process
*/
@WebServlet("/Process")
public class Process extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public Process() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//response.getWriter().append("Served at: ").append(request.getContextPath());
//doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//doGet(request, response);
List<test> list = new ArrayList<test>();
list.add(new test( 20,1 ));
list.add(new test( 10,2 ));
list.add(new test( 30,3 ));
list.add(new test( 25,4 ));
list.add(new test( 50,5 ));
list.add(new test( 5,6 ));
list.add(new test( 15,7 ));
// ObjectMapper mapper = new ObjectMapper();//提供java-json相互转换的类
// String json = mapper.writeValueAsString(list);
// System.out.println(json);
JSONArray jsonArray = JSONArray.fromObject(list);
response.getWriter().println(jsonArray);
}
}
这是前端
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jquery-3.5.1.js"></script>
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为echarts准备一个具备大小的容器 -->
<div id="graph" style="width: 600px; height:400px;"></div>
<script type="text/javascript">
//基于准备好的dom,初始化ecahrts实例
var myChart = echarts.init(document.getElementById("graph"));
//指定图标的配置项和数据
myChart.setOption = {
title:{
text:"数据可视化"
},
tooltip: {},
legend: {
left:"right",
data:["浓度"]
},
xAxis:{
data:[]
},
yAxis:{ },
series:[{
name:'浓度',
data:[]
}]
};
var XX = [];//x轴坐标值
var YY = [];//y轴坐标值
//Ajax发起数据请求
$.ajax({
type:'post',
async:true,//异步请求
url:"Process",
data:{},
dataType: "json",
//请求成功后接受接收数据xtime+yppm两组数据;
success : function (result) {
alert("asdsad")
//result为服务器返回的json对象
if(result){
//取出数据存放数组
for(var i=0;i<result.length;i++)
XX.push(result[i].x);
for(var i=0;i<result.length;i++)
YY.push(result[i].y);
//覆盖操作根据数据加载数据表
myChart.setOption({
xAxis: {data: XX},
series:[{
//name:"浓度",
date:YY
}]
});
}
},
error : function(errorMsg){
//请求失败时执行该函数
alert("图标数据请求失败");
myChart.hideloading();
}
})
</script>
</body>
</html>
标题