JSP using Echarts to realize the example of report statistics _jsp programming

Echarts is used to do a presentation of the data report, here we give you a java/jsp use Echarts to achieve the example of report statistics, the example is very simple just to adjust the data out to Echarts.

Start the code.

First is the tag, this thing, after the university, hardly used, did not expect to use now.

<%@ tag pageencoding= "UTF-8" iselignored= "false" body-content= "empty"%> <%--custom div container id--%> <%@ Attribute Name= "Container" required= "true"%> <%--custom title--%> <% @attribute name= "title" required= "true"% > <%--Custom--%> <% @attribute name= "subtitle" required= "false"%> <%--custom data requests url--%> Attribute name= "URLs" required= "true"%> <%@ taglib prefix= "C" uri= "Http://java.sun.com/jsp/jstl/core"%> < Script src= "/echarts-2.1.8/build/dist/jquery.min.js" ></script> <script src= "/echarts-2.1.8/build/dist /echarts-all.js "></script> <script type=" Text/javascript >//Based on prepared DOM, initialize echarts chart var myChart = Echa
  Rts.init (document.getElementById (' ${container} ')); var option={title: {text: ' ${title} ', Subtext: ' ${subtitle} '}, tooltip: {trigger: ' Axi S '}, Legend: {data:[]}, Toolbox: {show:true, feature: {mark: {Show:tru e}, DAtaview: {show:true, Readonly:false}, Magictype: {show:true, type: [' line ', ' Bar ']}, restore: {show: True}, Saveasimage: {show:true}}}, Calculable:true, Xaxis: [{type: ' Cat
        Egory ', Boundarygap:false, Data: []}], YAxis: [{type: ' value ',
  Axislabel: {formatter: ' {value} '}}], series: []};
        Use AJAX asynchronous request data $.ajax ({type: ' post ', url: ' ${urls} ', DataType: ' JSON ', success:function (result) { if (result) {//The returned category and series objects are assigned to the category and series in the options object option.xaxis[0].data = Result.axis
          ;
          Option.legend.data = Result.legend;
          var series_arr=result.series;
          for (Var i=0;i<series_arr.length;i++) {Option.series[i] = result.series[i];
          } mychart.hideloading ();
        mychart.setoption (option);
    }
       },  Error:function (errmsg) {console.error ("Load Data Failed"}});
Load data//mychart.setoption (option) for the Echarts object; </script>

Write tag need to introduce Jstl bag, Google has a. 1.2 Needs two packs, a jstl, a standard. After 1.2 it seems to merge into one. <%@ taglib prefix= "C" uri= "Http://java.sun.com/jsp/jstl/core"%> This sentence is also a little different. To prevent the case, I was introduced to the two package.

Using AJAX requests, you need to introduce a jquery packet, introducing echarts, and introducing this.

In the above code, the most important is the Red section, series is an array, the background to add more than one set of data, here need to traverse out.

The JSP page introduces the tag:

<%--
 Created by the 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"%>
 
 

The front end is finished here, and then the backend section.

Two Java objects in the background to encapsulate the data to be passed

Package bean.newseries;
Import java.util.ArrayList;
Import java.util.List;
/**
 * Created by on 2014/11/25.
 * * Public
class Echarts {public
  list<string> legend = new arraylist<string> ()//Data group Public
  list<string> axis = new arraylist<string> ()/horizontal axis public
  list<series> Series = new arraylist< Series> ()/Ordinate public
  echarts (list<string> legendlist, list<string> categorylist, List< Series> serieslist) {
    super ();
    This.legend = legendlist;
    This.axis = categorylist;
    This.series = serieslist;
  }

Here are the specific data for 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<integer> data;
  Public Series (string name, String type, list<integer> data) {
    this.name = name;
    This.type = type;
    This.data = data;
  }

In the background business, place your own data in the object and convert it to JSON format:

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, httpservletrespons E response) throws Servletexception, IOException {list<string> legend=new-arraylist<string> (Arrays.asList
    (New string[]{"Top value", "Lowest Value"}); List<string> axis=new arraylist<string> (arrays.aslist (New string[]{"Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"
    }));
    List<series> series=new arraylist<series> (); Series.add (New Series ("Highest value", "line", New Arraylist<integer> (ARRAYs.aslist (21,23,28,26,21,33,44)));
    Series.add (new Series ("Lowest value", "line", New Arraylist<integer> (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);
 }
}

The effect chart is as follows: