Jsp uses echarts to implement report statistics instances. jspecharts

Jsp uses echarts to implement report statistics instances. jspecharts

Echarts is used to display data reports. Here we will introduce an example of using echarts in java/jsp for report statistics, the example is very simple, just calling the data to echarts.

Start the code.

The first is tag, which is rarely used after college. I didn't expect it to be used again 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 sub-item title -- %> <% @ attribute name = "subtitle" required = "false" %> <% -- custom data request 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 "> // prepare based on dom, initialize echarts chart var myChart = echarts. init (document. getElementById ('$ {iner}'); var option = {title: {text: '$ {title}', subtext: '$ {subtitle}'}, tooltip: {trigger: 'axis '}, legend: {data: []}, toolbox: {show: true, feature: {mark: {show: true}, dataView: {show: true, readOnly: false}, magicType: {show: true, type: ['line', 'bar']}, restore: {show: true}, saveAsImage: {show: true }}, calculable: true, xAxis: [{type: 'category ', boundaryGap: false, data: []}], yAxis: [{type: 'value ', axisLabel: {formatter: '{value}'}], series: []}; // use ajax to asynchronously request data $. ajax ({type: 'post', url: '$ {urls}', dataType: 'json', success: function (result) {if (result) {// assign the returned category and series objects to the category and series option in the options object. 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 ("failed to load data")}); // load data for the echarts object // myChart. setOption (option); </script>

To write tags, You need to introduce the jstl package. Google will have it. Two packages, one jstl and one standard, are required before 1.2. After 1.2, it seems to be merged into one. <% @ Taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %> the syntax is also a bit different. To prevent attacks, I introduced two packages.

To use ajax requests, You need to introduce the jquery package. This is also introduced when echarts is introduced.

In the above Code, the most important thing is the red section. series is an array. When multiple groups of data are added to the background, we need to traverse and retrieve the data here.

Add the tag to the jsp page:

<% -- Created by IntelliJ IDEA. user: Administrator Date: Time: 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 complete, and then the back-end is complete.

The backend uses two java objects 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> (); // abscissa 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 ;}}
The specific data of series is shown here:

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, put your data into the object and convert it to the 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, HttpServletResponse response) throws ServletException, IOException {List <String> legend = new ArrayList <String> (Arrays. asList (new String [] {"maximum value", "minimum value"}); List <String> axis = new ArrayList <String> (Arrays. asList (new String [] {"Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday "})); list <Series> series = new ArrayList <Series> (); series. add (new Series ("maximum value", "line", new ArrayList <Integer> (Arrays. asList (, 26, 44); series. add (new Series ("minimum value", "line", new ArrayList <Integer> (Arrays. asList (-2,-12, 10, 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 );}}
As follows: