Echarts-echart and springMVC implement a stack chart (read JSON file data)

Echarts-echart and springMVC implement a stack chart (read JSON file data)

This echarts stack diagram is mainly based on this D3.js stack diagram (http://blog.csdn.net/u013147600/article/details/46770415) implementation.

:

1. JSON file data:

 

{Name: profit of a city in 2005-3000, product: [{name: PC, sales: [{year: 2006, profit: 1300}, {year:, profit }, {year: 2007, profit: 3700}, {year: 2008, profit: 4900}, {year: 2009, profit: 700}, {year: 2010, profit: 700}] },{ name: SmartPhone, sales: [{year: 2005, profit: 2000 },{ year: 2006, profit: 4000 },{ year: 2007, profit: 1810 },{ year: 2008, profit: 6540 },{ year: 2009, profit: 2820 },{ year: 2010, profit: 1000}] },{ name: Software, sales: [{year: 2005, profit: 1100}, {year: 2006, profit: 1700}, {year: 2007, profit: 1680}, {year: 2008, profit: 4000 },{ year: 2009, profit: 4900 },{ year: 2010, profit: 700}]}

 

 

2. Create an instance Class Based on the JSON File

Domain. java

 

Package com. entity;/*** @ author lyx *** 11:09:19 *** springechart.com. entity. product */public class Domain {private String name; private Product product; public String getName () {return name;} public void setName (String name) {this. name = name;} public Product getProduct () {return product;} public void setProduct (Product product) {this. product = product ;}}

Product. java

Package com. entity;/*** @ author lyx *** 11:10:11 *** springechart.com. entity. sales */public class Product {private String name; private Sales sale; public String getName () {return name;} public void setName (String name) {this. name = name;} public Sales getSale () {return sale;} public void setSale (Sales sale) {this. sale = sale ;}}

Sales. java

 

 

Package com. entity;/*** @ author lyx *** 2:10:54 *** springechart.com. entity. profit */public class Sales {private String year; private int profit; public String getYear () {return year;} public void setYear (String year) {this. year = year;} public int getProfit () {return profit;} public void setProfit (int profit) {this. profit = profit ;}}

 

2. Service Layer Code:

 

EchartsT. java

 

Package com. service; import java. io. file; import java. io. fileNotFoundException; import java. lang. reflect. array; import java. util. arrayList; import java. util. list; import java. util. producer; import com. alibaba. fastjson. JSON; import com. alibaba. fastjson. JSONArray; import com. alibaba. fastjson. JSONObject; import com. entity. china; import com. entity. domain; import com. entity. sales; import com. entity. provinces; import c Om. entity. product; 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. a Bel533.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; impo Rt 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. AB El533.echarts. style. lineStyle; import com. google. gson. jsonArray;/*** @ author lyx ***, 50 *** springechart.com. service. echartsT */public class EchartsT {/*** read the json File */public String jsonRead (String fullFileName) {file File = new File (fullFileName); bytes = null; stringBuilder buffer = new StringBuilder (); try {encoding = new encoding (file, UTF-8); while (encoding. hasNextL Ine () {buffer. append (begin. nextLine () ;}} catch (FileNotFoundException e) {// TODO Auto-generated catch block System. out. println (e);} finally {if (response! = Null) {response. close () ;}// return the string return buffer. toString ();}/*** @ return * stack chart */public Option stackYear () {// path of the Json file String fullFileName = E: /java code/Project/springechart/WebRoot/year. json; // call the File Reading function String data = jsonRead (fullFileName); // convert a String to a Json object JSONObject obj = JSON. parseObject (data); // extract the array corresponding to the product in the json file and save it as a Json array JSONArray proArr = obj. getJSONArray (product); // obtain the use case description name String legendName [] = new String [proArr. size ()]; for (int I = 0; I <proArr. size (); I ++) {// obtain the name legendName [I] = proArr IN THE JOSN Array Based on the name. getJSONObject (I ). getString (name);} // PC Data // obtain the JOSN array JSONArray pcArr = JSON based on sales. parseArray (proArr. getJSONObject (0 ). getString (sales ). toString (); // Save the JSON array as a List
 
  
PcList = JSON. parseArray (pcArr. toString (), Sales. class); // calculate the list size int length = pcList. size (); // Save the Year array String [] pcYear = new String [length]; // Save the profit array int [] pcProfit = new int [length]; // obtain the data and save it in the array for (int I = 0; I
  
   
SpList = JSON. parseArray (spArr. toString (), Sales. class); String [] spYear = new String [length]; int [] spProfit = new int [length]; for (int I = 0; I
   
    
SwList = JSON. parseArray (swArr. toString (), Sales. class); String [] swYear = new String [length]; int [] swProfit = new int [length]; for (int I = 0; I
    
     
 
     
 
3. 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 (stackYear) public String stackYear (HttpServletRequest res) {// call the function at the service layer and save the returned value Option = ech. stackYear (); // use json to replace String opt = JSON. toJSONString (option); // pass the object to res on the jsp page. setAttribute (option, opt); return/ec ;}}
     
 
4. jsp page code:
     
 
     
Ec. jsp
     
 
     
<%@ page language=java import=java.util.* pageEncoding=UTF-8%><%String path = request.getContextPath();String basePath = request.getScheme()+://+request.getServerName()+:+request.getServerPort()+path+/;%>
     
     <Script type = text/javascript src = ../js/jquery-1.11.3.min.js> </script>
      
    
   
  
 

<Script type = text/javascript src = ../js/jquery-1.11.3.min.js> </script>