前端
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script type="text/javascript" src="echarts.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
$.getJSON("dataServlet").done(function (data) {
myChart.setOption({
title: {
text: '異步數據加載示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: data.categories
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: data.data
}]
});
});
</script>
</body>
</html>
後臺
package Servlet;
import java.io.IOException;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONObject;
public class DataServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
//super.doGet(req, resp);
;
ArrayList<String> categories = new ArrayList<String>();
categories.add("s1");
categories.add("s2");
categories.add("s3");
categories.add("s4");
categories.add("s5");
categories.add("s6");
ArrayList<Integer> data = new ArrayList<Integer>();
data.add(5);
data.add(20);
data.add(36);
data.add(10);
data.add(10);
data.add(20);
JSONObject jsonObj = new JSONObject();
jsonObj.put("categories", categories);
jsonObj.put("data", data);
resp.getWriter().write(jsonObj.toString());
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
super.doPost(req, resp);
}
}