Echarts-echart and springMVC implement a stack chart. echartsspringmvc

Echarts-echart and springMVC implement a stack chart. echartsspringmvc

:

Switch to a line chart through the toolbar:

1. Deploy springMVC project 2. *** Add the code of the ECharts-2.2.4.jar: consumer and fastjson-1.2.5.jar4.springMVC service layer to lib: 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 ***, 50 *** springechart.com. service. echartsT */public class EchartsT {/*** @ return * stacked chart */public Option stackChart () {Option option = new Option (); // Title option. title ("proportion of Information Retrieval Methods"); // option in the prompt box. tooltip (). trigger (Trigger. axis); option. tooltip (). axisPointer (). type (PointerType. shadow); // legend description option. legend (). data ("direct access", "email marketing", "Alliance advertisement", "video advertisement", "Search Engine", "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 feature option. calculable (true); // X axis-category axis option. xAxis (new CategoryAxis (). data ("Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"); // y axis-value axis option. yAxis (new ValueAxis (); // series, where stack indicates the setting 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 ("Alliance advertisement "); bar3.stack ("advertisement"); bar3.data (220,182,191,234,290,330,310); Bar bar4 = new Bar ("video advertisement"); bar4.stack ("advertisement"); bar4.data (150,232,201,154,190,330,410 ); bar bar5 = new Bar ("Search Engine"); bar5.data (862,101 8, 964,102 6, 1679,160 0, 1570); // mark the 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,109 0, 1130,112 0 ); 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); // Add it 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 *** 1:36:51 *** springechart.com. controller. echartsContr */@ Controller @ RequestMapping ("/echarts") public class echartsContr {EchartsT ech = new EchartsT (); /*** @ param res * @ return ** stack chart */@ RequestMapping ("/stackChart") 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. source code of the generated page:


<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN"> 

8. Download the entire project code:
SpringEcharts.rar download




Reference: http://git.oschina.net/free/ECharts
Through the ECharts-2.2.4.jar written by the author of the website above, imported into our project so that the js Code in our page, you can now generate the project background, then, convert json into strings and input them to the page. On the jsp page, you can receive the input strings in json format and then generate the chart we set.





 
Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.