Echarts-echart and Springmvc Implementing a stack diagram (reading JSON file data)

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

：

1.JSON File Data:

{"Name": "A city 2005-1010 profit situation", "product": [{"Name": "PC",   "Sales": [{"Year": "2005", "Profit": "},{", "2006", "Profit": 1300},{"Year": "X", "Profit": 3700},{"Year": "$", "profit": 4900},{"Year": "OK", "profit":},{"y Ear ":", "Profit": "},{", "name": "SmartPhone",   "Sales": [{"Year": "2005", "Profit": +},{"Year": "2006", "Profit": 4000},{"Year": "$", "profit": 1810},{"Year": "$", "profit": 6540},{"Year": "$", "profit": 2820},{" Year ":", "Profit": "},{", "name": "Software",   "Sales": [{' Year ': "2005", "Profit": 1100},{"Year": "2006", "Profit": 1700},{"Year": "$", "profit": 1680},{"Year": "$", "profit": 4000},{"Year": "$", "profit": 4900},{" Year ":", "Profit": 700}]}]}

2. New instance class based on JSON file

Domain.java

Package com.entity;/** * @author lyx * * 2015-7-7 a.m. 11:09:19 * *springechart.com.entity.product */public class Domain {Priv Ate 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 * * 2015-7-7 a.m. 11:10:11 * *springechart.com.entity.sales */public class Product {Priva Te 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 * * 2015-7-7 PM 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.scanner;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 Com.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.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;import com.google.gson.jsonarray;/** * @author lyx * * 2015-6-12 PM 1,34,50 * *SPRINGECHART.COM.SERVICE.ECHARTST */public class Echartst {/** * Read JSON file */public String Jsonread (Str        ing fullfilename) {File File = new file (fullfilename);        Scanner Scanner = null;        StringBuilder buffer = new StringBuilder ();       try {     Scanner = new Scanner (file, "Utf-8");            while (Scanner.hasnextline ()) {Buffer.append (Scanner.nextline ()); }} catch (FileNotFoundException e) {//TODO auto-generated catch block System.out.println (e)        ;            } finally {if (scanner! = null) {scanner.close ();    }}//Returns the string return Buffer.tostring (); }/** * @return * Stack map */public Option stackyear () {//json file is in the same path as String fullfilename=        "E:/java/java Code/project/springechart/webroot/year.json";        Call the Read file function String data = Jsonread (Fullfilename);    Converts a string to a JSON object Jsonobject obj =json.parseobject (data);        Extracts the corresponding array of "product" inside the JSON file and saves it as a JSON array jsonarray Proarr = Obj.getjsonarray ("Product");    Get the Use case description name String legendname[] = new string[proarr.size ()]; for (int i = 0; i < proarr.size (); i++) {//the names in the JOSN array are obtained according to "name" LEGENDNAME[I]=PROARR.GETJSonobject (i). getString ("name"); PC Data//According to "Sales" get josn array jsonarray pcarr =json.parsearray (proarr.getjsonobject (0). getString ("Sales"). ToString ())    ;    Save the JSON array as list list<sales> pclist = Json.parsearray (pcarr.tostring (), sales.class);    calculated list size int length =pclist.size ();    Save year Array string[] Pcyear =new string[length];    Save profit Array int[] Pcprofit = new Int[length]; The obtained data is saved in the array for (int i = 0; I <length; i++) {pcyear[i]=pclist.get (i). GetYear ();p cprofit[i]=pclist.get (i). Getprofit        ();}    Smartphone data Jsonarray Sparr =json.parsearray (Proarr.getjsonobject (1). getString ("Sales"). ToString ());        List<sales> spList =json.parsearray (sparr.tostring (), sales.class);    String[] Spyear =new string[length];        int[] Spprofit = new Int[length];        for (int i = 0; I <length; i++) {spyear[i]=splist.get (i). GetYear (); Spprofit[i]=splist.get (i). Getprofit (); Software data Jsonarray Swarr = Json.parsearray (proarr.getjsonobjECT (2). getString ("Sales"). ToString ());        List<sales> swlist =json.parsearray (swarr.tostring (), sales.class);    String[] Swyear =new string[length];        int[] Swprofit = new Int[length];        for (int i = 0; I <length; i++) {swyear[i]=swlist.get (i). GetYear (); Swprofit[i]=swlist.get (i). Getprofit ();      Define option object option option = new option ();    Title bar Option.title (obj.getstring ("name"), "purely fictitious");    Option.title (). x (X.center);    Prompt box Option.tooltip (). Trigger (Trigger.axis);    Option.tooltip (). Axispointer (). Type (Pointertype.shadow); Toolbar Option.toolbox (). Show (True). Orient (Orient.vertical). x (x.right). Y (y.center). Feature (Tool.mark, Tool.dataview,tool.datazoom,tool.restore,tool.saveasimage,new Magictype (Magic.bar,magic.line, Magic.stack,    magic.tiled));    Use case Description Option.legend (). Data (Legendname). Orient (Orient.horizontal). x (X.right);     Computable option.calculable (true);    X-Axis-class axis Option.xaxis (new Categoryaxis (). Data (pcyear)); Y-Axis -Value axis Option.yaxis (new Valueaxis ());        PC Columnar Bar Pcbar = new bar (legendname[0]). Stack ("PC"); /*bar.data (provinceprofit); *//The data data in the returned JS code is a couple of brackets, no data, resulting in graphics not displaying correctly//The data is added here by adding () for (int i = 0; I &l T Length        i++) {Pcbar.data (). Add (Pcprofit[i]);}    SmartPhone Bar Spbar = new bar (legendname[1]). Stack ("SmartPhone");        for (int i = 0; i < length; i++) {Spbar.data (). Add (Spprofit[i]);}    Software Bar Swbar = new bar (legendname[2]). Stack ("Software");        for (int i = 0; i < length; i++) {Swbar.data (). Add (Swprofit[i]);}    Set series Option.series (Pcbar,spbar,swbar);        return option; }       }

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 * * 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 ("Stackyear") pu Blic string Stackyear (httpservletrequest res) {//Invokes a function of the service layer and saves the return value of option option=ech.stackyear ();//convert JSON to string strings Opt =json.tojsonstring (option);//Pass object to JSP page res.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+ "/";%> <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
5. After the successful operation of the page source code:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
Reference website: http://git.oschina.net/free/ECharts
through the Echarts-2.2.4.jar written by the author of the above Web site, import into our project so that our page JS code, can now be generated in the background of the project, and through the JSON into a string into the page, the JSP page to receive the incoming JSON-formatted string , then we can generate the chart we set up. 
 
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
 
Echarts-echart and Springmvc Implementing a stack diagram (reading JSON file data)