java/jsp利用echarts实现报表统计的例子

作者：袖梨 2022-11-14

YPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.***w3.org/TR/REC-html40/loose.dtd">

开始上代码。

首先是tag，这个东西，大学之后，几乎不怎么用了，没想到现在又用到了。

代码如下	复制代码

写tag需要引入jstl包，谷歌下就有了。1.2之前需要两个包，一个jstl，一个standard。1.2之后貌似合并为一个了。这句的写法也有点不同。为防万一，我是引入的两个包。

使用ajax请求，需要引入jquery的包，引入echarts的时候，同时引入这个。

在上面代码中，最主要的还是标红的那段，series是一个数组，后台加入多组数据的时候，这里需要遍历取出。

jsp页面引入该标签：

代码如下	复制代码
Created by IntelliJ IDEA. User: Administrator Date: 2014/11/24 Time: 12:02 To change this template use File \| Settings \| File Templates. --%>

前端的部分到此算是完成，然后就是后台部分了。

后台用两个java对象，封装一下要传递的数据：

代码如下

复制代码

package bean.newseries;
import java.util.ArrayList;
import java.util.List;
/**
* Created by on 2014/11/25.
*/
public class Echarts {
public List legend = new ArrayList();//数据分组
public List axis = new ArrayList();//横坐标
public List series = new ArrayList();//纵坐标
public Echarts(List legendList, List categoryList, List seriesList) {
super();
this.legend = legendList;
this.axis = categoryList;
this.series = seriesList;
}
}

这里放series的具体数据：

代码如下	复制代码
package bean.newseries; import java.util.List; /** * Created by on 2014/11/25. */ public class Series { public String name; public String type; public List data; public Series(String name, String type, List data) { this.name = name; this.type = type; this.data = data; } }

后台业务中，将自己的数据，放到对象中，然后转换成json格式：

代码如下

复制代码

package tagservlet;
import bean.newseries.Echarts;
import bean.newseries.Series;
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
/**
* Created by on 2014/11/24.
*/
public class NewTagServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List legend=new ArrayList(Arrays.asList(new String[]{"最高值","最低值"}));
List axis=new ArrayList(Arrays.asList(new String[]{"周一","周二","周三","周四","周五","周六","周日"}));
List series=new ArrayList();
series.add(new Series("最高值","line",new ArrayList(Arrays.asList(21,23,28,26,21,33,44))));
series.add(new Series("最低值","line",new ArrayList(Arrays.asList(-2,-12,10,0,20,11,-6))));
Echarts echarts=new Echarts(legend,axis,series);
ObjectMapper objectMapper=new ObjectMapper();
System.out.println(objectMapper.writeValueAsString(echarts));
response.setContentType("text/html;charset=utf-8");
PrintWriter out=response.getWriter();
out.println(objectMapper.writeValueAsString(echarts));
out.flush();
out.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request,response);
}
}