Example of using echarts for report statistics in java/jsp

Source: Internet
Author: User
Tags arrays json

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.


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.