一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

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

时间:2015-11-18 编辑:简简单单 来源:一聚教程网

开始上代码。

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

 代码如下 复制代码
<%@ tag pageEncoding="UTF-8" isELIgnored="false" body-content="empty"%>
<%--自定义div容器id--%>
<%@attribute name="container" required="true" %>
<%--自定义标题--%>
<%@attribute name="title" required="true" %>
<%--自定义子标题--%>
<%@attribute name="subtitle" required="false" %>
<%--自定义数据请求url--%>
<%@attribute name="urls" required="true" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>



写tag需要引入jstl包,谷歌下就有了。1.2之前需要两个包,一个jstl,一个standard。1.2之后貌似合并为一个了。<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>这句的写法也有点不同。为防万一,我是引入的两个包。

使用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.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c"  tagdir="/WEB-INF/tags" %>


   


 

 


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

后台用两个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);
    }
}

这个里面,用jackson将对象转为json格式字符串,输出到页面即可。

自此,图表就可以顺利生成了。

热门栏目