Echarts-echart and Springmvc implementing a stack diagram

:

To switch from a toolbar to a line chart:

1. Deploy springmvcproject2.***** to increase echarts-2.2.4.jar:http://git.oschina.net/free/in Lib ECharts3. Because you want to use Fastjson, you also import the jar packages that you need Fastjson-1.2.5-sources.jar and Fastjson-1.2.5.jar4.springmvc's service layer code: Echartst.java

Package Com.service;import Com.github.abel533.echarts.label;import Com.github.abel533.echarts.option;import Com.github.abel533.echarts.title;import Com.github.abel533.echarts.axis.categoryaxis;import Com.github.abel533.echarts.axis.valueaxis;import Com.github.abel533.echarts.code.linetype;import Com.github.abel533.echarts.code.magic;import Com.github.abel533.echarts.code.marktype;import Com.github.abel533.echarts.code.orient;import Com.github.abel533.echarts.code.pointertype;import Com.github.abel533.echarts.code.selectedmode;import Com.github.abel533.echarts.code.tool;import Com.github.abel533.echarts.code.trigger;import Com.github.abel533.echarts.code.x;import Com.github.abel533.echarts.code.y;import Com.github.abel533.echarts.data.data;import Com.github.abel533.echarts.data.pointdata;import Com.github.abel533.echarts.feature.magictype;import Com.github.abel533.echarts.series.bar;import Com.github.abel533.echarts.series.funnel;import Com.github.abel533.echarts.series.line;import com.Github.abel533.echarts.series.map;import Com.github.abel533.echarts.series.maplocation;import Com.github.abel533.echarts.series.pie;import Com.github.abel533.echarts.style.itemstyle;import com.github.abel533.echarts.style.linestyle;/** * @author LyX * * 2015-6-12 PM 1,34,50 * * Springechart.com.service.EchartsT */public class Echartst {/** * @return * Stacked Map */public Option St        Ackchart () {option option = new Option ();    Title Option.title ("gain the proportion of information channels");    Prompt box Option.tooltip (). Trigger (Trigger.axis);    Option.tooltip (). Axispointer (). Type (Pointertype.shadow);    Legend Description Option.legend (). Data ("Direct access", "email marketing", "affiliate ADS", "video ads", "Search Engines", "Baidu", "Google", "Bing", "other"); Toolbar Option.toolbox (). Show (True). Orient (Orient.vertical). x (x.right). Y (y.center). Feature (Tool.mark, Tool.dataview,tool.datazoom,new Magictype (magic.bar,magic.line,magic.stack,magic.tiled), Tool.restore,        Tool.saveasimage);        Whether to enable the drag-and-drop recalculation attribute option.calculable (TRUE); X-Axis-class axis OptioN.xaxis (New Categoryaxis (). Data ("Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"));        Y-axis-value axis option.yaxis (new Valueaxis ());    Series, in which stack represents the set bar bar1 = new Bar ("Direct access");        Bar1.data (320, 332, 301, 334, 390, 330, 320);    Bar bar2 = new Bar ("email marketing");    Bar2.stack ("advertisement");        Bar2.data (120, 132, 101, 134, 90, 230, 210);    Bar Bar3 = new Bar ("affiliate AD");    Bar3.stack ("advertisement");        Bar3.data (220, 182, 191, 234, 290, 330, 310);    Bar BAR4 = new Bar ("video ad");    Bar4.stack ("advertisement");        Bar4.data (150, 232, 201, 154, 190, 330, 410);    Bar BAR5 = new Bar ("Search engine");    Bar5.data (862, 1018, 964, 1026, 1679, 1600, 1570);        Marker line Bar5.markline (). ItemStyle (). Normal (). LineStyle (New LineStyle (). Type (linetype.dashed));        Bar5.markline (). Data (new Pointdata (). Type (marktype.min), New Pointdata (). Type (Marktype.max));    Bar BAR6 = new Bar ("Baidu");    Bar6.stack ("search Engine");        Bar6.data (620, 732, 701, 734, 1090, 1130, 1120);    Bar bar7 = new bar ("Google");    Bar7.stack ("search Engine"); Bar7.dATA (120, 132, 101, 134, 290, 230, 220);    Bar bar8 = new Bar ("Bing");    Bar8.stack ("search Engine");        Bar8.data (60, 72, 71, 74, 190, 130, 110);    Bar Bar9 = new Bar ("other");    Bar9.stack ("search Engine");        Bar9.data (62, 82, 91, 84, 109, 110, 120);    Added to the series Option.series (BAR1,BAR2,BAR3,BAR4,BAR5,BAR6,BAR7,BAR8,BAR9);    return option; }}

5. Control Layer Code: Echartscontr.java

Package Com.controller;import Javax.servlet.http.httpservletrequest;import Javax.servlet.http.HttpServletResponse ; Import Org.springframework.stereotype.controller;import org.springframework.web.bind.annotation.RequestMapping; Import Com.alibaba.fastjson.json;import com.github.abel533.echarts.option;import com.service.echartst;/** * @author LyX * * 2015-6-12 PM 1:36:51 * *springechart.com.controller.echartscontr * * @Controller @requestmapping ("/echarts") public class Echartscontr {echartst Ech = new Echartst ();/** * @param res * @return *  * Stack map */@RequestMapping ("/STACKC Hart ") Public String Stackchart (httpservletrequest res) {option option = Ech.stackchart (); String opt = json.tojsonstring (option); Res.setattribute ("option", opt); return "/ec";}}

6. Ec.jsp Page Code:

<%@ page language= "java" import= "java.util.*" pageencoding= "UTF-8"%><%string path = Request.getcontextpath () ; String basepath = request.getscheme () + "://" +request.getservername () + ":" +request.getserverport () +path+ "/";%> <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
7. Post-generated page source code:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
8.project Complete code Download:
Springecharts.rar Download

Test Site: Http://git.oschina.net/free/ECharts
Through the Echarts-2.2.4.jar written by the site author above, we import the JS code in our page to our project. Can now be generated in the background of the project and converted into a string through JSON into the page, the JSP page to receive the incoming JSON-formatted string. We can then generate the chart we've set up.



Echarts-echart and Springmvc implementing a stack diagram