有了上一篇简单的demo还是不能完成任务，虽然有一个大概的构思（就是读取数据然后处理成json格式传到前端，然后展示），大可以springMVC+spring+Mybatis这样跑起来，一次性完成。但是还是想慢慢来，就当是复习一下以前的知识（Java在框架的时代越来越精简，但是一些老伙计还是很有意思的，在一些开发历时不知道几年或者更久的传统项目里，看似过时的技术随处可见）。反正我是要慢慢来（这时候我不懒了），正如那句歌词“我小心翼翼地接近，怕你在梦中惊醒……”。于是就选用servlet来了，也是想进一步证实我的想法（其实是为了告诉身边一个“愚昧”的同事，我当时脑子里就是想这么干，不可以改变！）。
第一步，先在前端占个位置？错错错，应该先新建一个工程，嘿嘿嘿。然后还是占个位置？算了，还是先占个位置吧。下面是html的代码：
<head>
<title>demo1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入echarts.min.js -->
<script type="text/javascript" src="./js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
</body>
作为一个新手，我还是喜欢将所有代码都贴上来（如果不是代码不多，你会记得？你会有这样的积极？），所以还是要放出众所周知的web.xml出来和大家见见面：
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
<display-name></display-name>
<servlet>
<servlet-name>ServertAction</servlet-name>
<servlet-class>com.test.servlet.ServertAction</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ServertAction</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>
数据还是那个数据，于是根据数据创建一个jsonbean，它的名字就叫option：
public class Option {
private String text;
private String legendData;
private String[] xAxisDataList;
private String seriesName;
private String seriesType;
private int[] seriesData;
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getLegendData() {
return legendData;
}
public void setLegendData(String legendData) {
this.legendData = legendData;
}
public String[] getxAxisDataList() {
return xAxisDataList;
}
public void setxAxisDataList(String[] xAxisDataList) {
this.xAxisDataList = xAxisDataList;
}
public String getSeriesName() {
return seriesName;
}
public void setSeriesName(String seriesName) {
this.seriesName = seriesName;
}
public String getSeriesType() {
return seriesType;
}
public void setSeriesType(String seriesType) {
this.seriesType = seriesType;
}
public int[] getSeriesData() {
return seriesData;
}
public void setSeriesData(int[] seriesData) {
this.seriesData = seriesData;
}
}
当当当当，转弯的时候到了，servlet以bean为对象，将数据以option对象json的格式传回，当然这里需要引入jackson-annotation,jackson-core和jackson-databind三个jar包，根据web工程和maven工程有不同的引入方式：
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.test.entity.Option;
public class ServertAction extends HttpServlet {
private static final long serialVersionUID = -8790254687034601663L;
@Override
protected void service(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
String uri = request.getRequestURI();
String action = uri.substring(uri.lastIndexOf("/"), uri.lastIndexOf("."));
PrintWriter out = response.getWriter();
if("/chart".equals(action)){
Option option = new Option();
option.setLegendData("质量");
option.setText("cxkai");
String[] xAxisList = {"衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"};
option.setxAxisDataList(xAxisList);
option.setSeriesName("质量");
option.setSeriesType("bar");
int[] seriesData = {5, 20, 36, 10, 10, 20};
option.setSeriesData(seriesData);
String json = new ObjectMapper().writeValueAsString(option);
out.println(json);
}
}
}
记得学ajax的时候最喜欢喊他啊，贾克斯了，聊以安慰想念英雄联盟的心，每次这么喊的时候都能顺利的出来帮助我，好英雄啊，不过下次再跳我脸上还是要举报。
function chart() {
$.ajax({
url : "http://localhost:8080/echarts02/chart.do",
type : "POST",
dataType : "json",
success : function(obj) {
if (obj) {
console.log(obj);
var text = obj.text;
console.log(text);
var legendData = obj.legendData;
console.log(legendData);
var xAxisData = obj.xAxisDataList;
console.log(xAxisData);
var seriesName = obj.seriesName;
console.log(seriesName);
var seriesType = obj.seriesType;
console.log(seriesType);
var seriesData = obj.seriesData;
console.log(seriesData);
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title : {
text : text,
},
tooltip : {},
legend : {
data : legendData
},
xAxis : {
data : xAxisData
},
yAxis : {},
series : [ {
name : seriesName,
type : seriesType,
data : seriesData
} ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
},
error : function() {
console.log("failed");
}
});
}
html页面就修改为这样了，实现的效果还是和2.官网也有的极简demo是一样的。
<!DOCTYPE html>
<html>
<head>
<title>demo1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./js/echarts.min.js"></script>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/chart.js"></script>
<script type="text/javascript">
$(function(){
$(chart);
});
</script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
</body>
</html>
至此，就简单完成了前后端的交互了，实现了模拟获取数据让前端进行展示。
网友评论