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 Listlegend = 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 Listdata; 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 { Listlegend=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测试函数的运行速度方法