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.