JSP用echarts实现报表统计

来源:爱站网时间:2020-08-31编辑:网友分享
Echarts一般在数据报表中才能展现他的效果,今天爱站技术频道小编就为大家带来了JSP用echarts实现报表统计,有一点的参考价值,值得我们收藏学习。

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

Echarts一般在数据报表中才能展现他的效果,今天爱站技术频道小编就为大家带来了JSP用echarts实现报表统计,有一点的参考价值,值得我们收藏学习。

开始上代码。

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











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

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

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

jsp页面引入该标签:

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

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

效果图如下:

感谢大家观看爱站技术频道小编小编介绍的JSP用echarts实现报表统计,不知道小伙伴们对此有没什么疑惑呢?有的话可以告诉小编,小编将为你竭诚服务。

上一篇:JSP测试函数的运行速度方法

下一篇:JS实现百度地图同时显示多个路书效果

您可能感兴趣的文章

相关阅读

热门软件源码

最新软件源码下载