Example of using echarts for report statistics in java/jsp

Last Update:2017-01-13 Source: Internet

Author: User

Tags arrays json

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Start the code.

The first is tag, which is rarely used after college. I didn't expect it to be used again now.

The code is as follows:

<% @ 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 subtitle -- %>
<% @ 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">
// Initialize the echarts chart based on the prepared dom
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 objects 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 ("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:

The code is as follows:

<% --
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" %>
<Html>
<Head>
<Title> </title>
</Head>
<Body>
<Div id = "main" style = "height: 400px"> </div>
<C: linecharts container = "main" title = "test Tag" subtitle = "test sub-tag" urls = "/tags"> </c: linecharts>
</Body>
</Html>

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:

The code is as follows:

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:

The code is as follows:
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:

The code is as follows:

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 (, 23, 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 );
}
}

In this example, jackson is used to convert the object into a json string and output it to the page.

Since then, the chart can be generated smoothly.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More