Echarts Chart Development Pie chart

In the related background system development, there is an essential module is the chart theme analysis. Through the chart analysis, it can show the development status of the business and the proportion of each business more intuitively, which is more advantageous for the company leaders to make corresponding decision. In the most recent project developed, it was useful to Java's echarts to develop its corresponding background chart theme analysis module function. Since the use of the summary of the said, I hope that in the future if you need to use or have other people need to use, just to see the tutorial can immediately get started with the operation, and do not need to go back to see the document spend a lot of time.

Preface: At the beginning of the use of this chart plug-in, I usually first create a new page, then the corresponding official website demo copy of the full text to the new page, and then run the page to see if it can run properly. If you can't run it, find out the reason for it, and in the end it's the first and most important thing to start learning by successfully running the demo example. When you successfully run the downloaded example in your new page, you start to dynamically assign values, load the data dynamically from the background, and begin to interact with the background with a slight modification of the code. After doing this, the data fill and interaction of the front and back table is almost OK, then the chart theme analysis must have its corresponding search conditions, according to the selected search criteria to dynamically load the chart and redraw. In this way, there is not much difference in step by step. (Note: Because my pie chart and line chart are drawn in a JSP page in the project, the following explanations are based on a JSP two chart analysis)

***********************************************************************************

Pie charts and Line charts:

1, introduce the jquery Minui and echarts related JS files and draw the corresponding JSP diagram interface; (jquery Mini project is useful, no need to be introduced)

 
<fieldset id= "Query_fieldset" style= "" > <legend> query Results </legend> <div style= "width:99%;" > <div class= "CT" id= "Chart1" style= "height:100%;width:96%;margin:0 auto;" >></div> </div> <div style= "width:99%;" > <div id= "Chartcontainer" style= "height:100%;width:96%;" >></div> </div> <script type= "Text/javascript" src= "Http://echarts.baidu.com/gallery/ven Dors/echarts/echarts-all-3.js "></script> <script type=" Text/javascript "src=" http://echarts.baidu.com /gallery/vendors/echarts-stat/ecstat.min.js "></script> <script type=" Text/javascript "src="/HTTP/ Echarts.baidu.com/gallery/vendors/echarts/extension/datatool.min.js "></script> <script type=" text/ JavaScript "src=" Http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js "></script> <script Type= "Text/javascript" src= "http://echarts.baidu.cOm/gallery/vendors/echarts/map/js/world.js "></script> <script type=" Text/javascript "src="/HTTP/ API.MAP.BAIDU.COM/API?V=2.0&AMP;AK=ZUONBPQGBSYGXNIYHICVBABM "></script> <script type=" Text/javascript "Src=" Http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js "></script> </fieldset >
 
2, introduce the Options parameters of Echarts pie chart and line chart and initialize the chart;


  <script type= "Text/javascript" > Mini.parse ();
    var chartpie = echarts.init (document.getElementById (' Chart1 '));
	var Chartcross = echarts.init (document.getElementById (' Chartcontainer ')); var form = new Mini.

	Form ("#queryForm");
	======= Initial Load "pie chart" and "line chart" data ======= var = search ();  ==================================== var option = {title: {text: ' Business pie chart Analysis ', subtext:
            ' Number of business applications ', TextStyle: {fontSize: ' $ ', FontWeight: ' 900 '}, X: ' Center '}, tooltip: {trigger: ' item ', formatter: ' {A} <br/>{b}: {C}
        		({d}%) "}, Legend: {Orient: ' vertical ', left: ' Left ', TextStyle: { FontSize: ' + ', fontweight: '/', ' Data:data.legendData}
       , series: [{type: ' Pie ',         Radius: ' 55% ', center: [' 50% ', ' 60% '], Data:data.seriesData, no
                				Rmal: {label:{show:true, formatter: ' {B}: {C} passengers ({d}%) ',    
		                          	TextStyle: {color: ' #000000 ', fontSize: ' 14 ',              
                FontWeight: ' 900 '}}, ItemStyle: {normal: {label:{show:true , formatter: ' {B}: {C} passengers ({d}%) ', TextStyle: {color: ' #000 	
        					   ', fontSize: ' + ', FontWeight: ' 900 '}
                        }}, emphasis: {shadowblur:10, Shadowoffsetx:0, Shadowcolor: ' Rgba (0, 0, 0, 0.5) '}
    
    }
        ]
    }; var options = {title: {text: ', Subtext: ', TextStyle: {fon
            Tsize: ' x ', fontweight: ' + '}, ×: ' Left '}, tooltip: {
                    Trigger: ' Axis ', Axispointer: {type: ' Cross ', label: { BackgroundColor: ' #6a7985 '}}, Legend: {data:data.crossLegend       
        , TextStyle: {fontSize: ' + ', FontWeight: ' 900 '},}, Grid: {left: ' 5% ', right: ' 4% ', bottom: ' 2% ', contain Label:true}, Xaxis: [{type: ' Category ', BoundarygAp:false, Data:data.crossType}], YAxis: [{ty	

    PE: ' value '}], series:data.crossSeries};
    	function Buildchart () {$ (' #chart1 '). Removeattr (' _echarts_instance_ ');

        $ (' #chartContainer '). Removeattr (' _echarts_instance_ ');
        Chartpie.setoption (option,true);
    Chartcross.setoption (options,true);
    
    }//buildchart ();
    Reset function Resetform () {form.reset ();
        }//Query function check () {form.validate ();
	    if (form.isvalid () = = false) return;
		var Streetid = Mini.get ("Street"). GetValue ();
		Release date var begindate = Mini.get ("Begindate"). Getformvalue ();
		var endDate = mini.get ("EndDate"). Getformvalue (); if (begindate>enddate) {Mini.alert (' Start date must not be less than end date, please re-select the query date.
		');
		    
		    }else{Data=search ();
            Chartpie.setoption (option,true);
		    
		    Chartcross.setoption (options,true); Pie chart re-Assignment option = chartpie.getoption ();
		    
		    Option.series[0].data=data.seriesdata;
		    Line chart re-assignment options = chartcross.getoption ();
		    Options.xaxis[0].data=data.crosstype;
		    
		    Options.series=data.crossseries;		
		Buildchart ();
   		}} function Search () {var legenddata = [];
   		var seriesdata = [];
   		var crosslegend = [];
   		var crossseries = [];
   		
	    var crosstype = [];
	    var data=form.getdata (true);
		var json=mini.encode (data); $.ajax ({url: "theme.queryBusAnalysisData.action", type: "POST", data: {Submitdata:json}, Async			       				
	    		: false, Success:function (text) {var piedata = Text.piedata;
	    		    for (Var i=0;i<piedata.degreeinfo.length;i++) {Legenddata.push (piedata.legendinfo[i]); Seriesdata.push ({name:piedata.degreeinfo[i].name, value:piedata.degreeinfo[i].		    			
	    		VALUE}); } var CrossdaTa = text.crossdata;    		    
	    		    for (Var i=0;i<crossdata.legendinfo.length;i++) {Crosslegend.push (crossdata.legendinfo[i]); Crossseries.push ({areastyle:crossdata.seriesinfo[i].areastyle, data:crossdata.seriesinfo[i]. Data, Name:crossdata.seriesinfo[i].name, Stack:crossdata.seriesinfo[i].stack, Type:cro		    			
	    		Ssdata.seriesinfo[i].type});
	    		} for (Var j=0;j<crossdata.typeinfo.length;j++) {Crosstype.push (crossdata.typeinfo[j]);	
		}							       
		    }
		}); return {legenddata:legenddata, seriesdata:seriesdata, Crosslegend:crosslegend, CR
	Ossseries:crossseries, Crosstype:crosstype}; } </script>
Note: Interaction with the background through the form of JSON, so the corresponding data structure needs to be defined, this is my background entity and JSON format;

 
Public String Querybusanalysisdata () {list<string> strlist = new arraylist<string> ();
		String Piejson = "";
		String Crossjson = "";
		Degreeoptioninfo degreeoptioninfo = new Degreeoptioninfo ();
		String json = Getservletrequest (). GetParameter ("SubmitData"); if (! Stringutil.safetostring (JSON). Equals ("")) {Themevo Themvo = (Themevo) voutils.getbeanfromjsondata (JSON, THEMEVO.C
			LASS); Map<string, list<map<string, object>>> busanalysismap = Themeservice. QueryBusAnalysisData (ThemVo)
			; Assembled into JSON for (String Key:busAnalysisMap.keySet ()) {if (Key.equals ("Piedata")) {list<map<string, Ob
					ject>> list = Busanalysismap.get (key);
						for (int i = 0; i < list.size (); i++) {map<string, object> Map = List.get (i);
					Strlist.add (Map.get ("NAME"). toString ());
					} degreeoptioninfo.setdegreeinfo (list);
					Degreeoptioninfo.setlegendinfo (strlist); Piejson = Voutils.getjsondata (degreeoptioninfo);
					} if (Key.equals ("Crossdata")) {Crossdata crossdata = new Crossdata ();
					list<string> typelist = new arraylist<string> ();
					list<crosstree> serieslist = new arraylist<crosstree> ();
					list<map<string, object>> list = Busanalysismap.get (key);

					map<string, list<string>> templist = new hashmap<string, list<string>> ();
					list<string> tkgylist = new arraylist<string> ();
					list<string> jwbklist = new arraylist<string> ();
					list<string> wbbklist = new arraylist<string> ();
					list<string> itemList = new arraylist<string> ();
					list<string> ydcjlist = new arraylist<string> ();
					list<string> individuallist = new arraylist<string> ();

					list<string> lsjzlist = new arraylist<string> ();
						for (int j = 0; J < List.size (); j + +) {map<string, object> Map = List.get (j); Typelist.add (map.geT ("TYPE"). toString ());
						Line chart X-axis tkgylist.add (map.get ("F1"). toString ());
						Jwbklist.add (Map.get ("F2"). toString ());
						Wbbklist.add (Map.get ("F3"). toString ());
						Itemlist.add (Map.get ("F4"). toString ());
						Ydcjlist.add (Map.get ("F5"). toString ());
						Individuallist.add (Map.get ("F6"). toString ());

						Lsjzlist.add (Map.get ("F7"). toString ());
						Templist.put ("F1", tkgylist);
						Templist.put ("F2", jwbklist);
						Templist.put ("F3", Wbbklist);
						Templist.put ("F4", itemList);
						Templist.put ("F5", ydcjlist);
						Templist.put ("F6", individuallist);
					Templist.put ("F7", lsjzlist);
						} for (int t = 0; t < strlist.size (); t++) {Crosstree crosstree = new Crosstree ();
						map<string, list<string>> map1 = new hashmap<string, list<string>> ();

						Map1.put ("Normal", new arraylist<string> ());
						Crosstree.setareastyle (MAP1);
						Crosstree.setname (Strlist.get (t));
						Crosstree.settype ("line"); CRosstree.setstack ("Total");
						String keys = ("F" + (T + 1)). ToString ();
						Crosstree.setdata (Templist.get (keys));
					Serieslist.add (Crosstree); } crossdata.setlegendinfo (Strlist); Line chart Title column Crossdata.settypeinfo (typelist); Line chart X-axis crossdata.setseriesinfo (serieslist);
					Line chart Data Crossjson = Voutils.getjsondata (Crossdata);
				Log.info ("Cross line chart formatted JSON data is: =====" + Crossjson);
			}} jsonobject obj = new Jsonobject ();
			Obj.put ("Piedata", Piejson);
			Obj.put ("Crossdata", Crossjson);
		Createjsondata (Obj.tostring ());
	} return AJAX; }
 
@Override public
	map<string, list<map<string, object>>> querybusanalysisdata (
			Themevo THEMVO) {
		map<string,list<map<string,object>>> busanalysismap = new Hashmap<string,list <Map<String,Object>>> ();
		Map<string,object> param=new hashmap<string,object> ();		
		Param.put ("street_id", Themvo.getstreet ());	
		Param.put ("Begin_date", Themvo.getbegindate ());	
		Param.put ("End_date", Themvo.getenddate ());	
		Param.put ("TYPE", Themvo.gettype ());
		list<map<string,object>> pielist = themedao.querybusanalysispiedata (param);
		list<map<string,object>> crosslist = themedao.querybusanalysiscrossdata (param);
		
		Busanalysismap.put ("Piedata", pielist);
		Busanalysismap.put ("Crossdata", crosslist);
		
		return busanalysismap;
	}
 

             The code also knows that both the service and the DAO layer return nested between the map and the list, while the JSON data structure that returns to the foreground is the   Degreeoptioninfo class 
 

public class Degreeoptioninfo {public list<map<string,object>> degreeinfo;
	Public list<string> Legendinfo;
	Public String seriesname;
	
	Public list<string> Degreeinfos;
		Public Degreeoptioninfo () {this.degreeinfo = new arraylist<map<string,object>> ();
		This.legendinfo = new arraylist<string> ();
	This.degreeinfos = new arraylist<string> ();
	} public list<map<string, Object>> Getdegreeinfo () {return degreeinfo;
	} public void Setdegreeinfo (list<map<string, object>> degreeinfo) {this.degreeinfo = Degreeinfo;
	} public list<string> Getlegendinfo () {return legendinfo;
	} public void Setlegendinfo (list<string> legendinfo) {this.legendinfo = Legendinfo;
	} public String Getseriesname () {return seriesname;
	} public void Setseriesname (String seriesname) {this.seriesname = seriesname;
	} public list<string> Getdegreeinfos () {return degreeinfos; } public VOID Setdegreeinfos (list<string> degreeinfos) {This.degreeinfos = Degreeinfos; }
	
}
Entity classes and JSON data structures for line graphs:


public class Crossdata {public
	
	list<crosstree> seriesinfo;
	Public list<string> Legendinfo;
	Public list<string> TypeInfo;
	
	Public Crossdata () {
		this.seriesinfo = new arraylist<crosstree> ();
		This.legendinfo = new arraylist<string> ();
		This.typeinfo = new arraylist<string> ();
	}

	Public list<crosstree> Getseriesinfo () {
		return seriesinfo;
	}





	public void Setseriesinfo (list<crosstree> seriesinfo) {
		this.seriesinfo = seriesinfo;
	}





	Public list<string> Getlegendinfo () {
		return legendinfo;
	}

	public void Setlegendinfo (list<string> legendinfo) {
		this.legendinfo = legendinfo;
	}

	Public list<string> GetTypeInfo () {
		return typeinfo;
	}

	public void Settypeinfo (list<string> typeinfo) {
		this.typeinfo = typeinfo;
	}
}
 

 
public class Crosstree {private String name;
	Private String type;
	Private String stack;
	Private map<string,list<string>> Areastyle;
	
	
	Private list<string> data; Public Crosstree () {} public Crosstree (string name, String type, string stack, map<string, List<string>&gt ;
		Areastyle, list<string> data) {super ();
		THIS.name = name;
		This.type = type;
		This.stack = stack;
		This.areastyle = Areastyle;
	This.data = data;
	} public String GetName () {return name;
	} public void SetName (String name) {this.name = name;
	} public String GetType () {return type;
	The public void SetType (String type) {this.type = type;
	} public String Getstack () {return stack;
	The public void Setstack (String stack) {this.stack = stack;
	} public list<string> GetData () {return data;
	} public void SetData (list<string> data) {this.data = data; } public map<string, List<string>> Getareastyle () {return AREastyle;
	} public void Setareastyle (map<string, list<string>> areastyle) {this.areastyle = Areastyle; }
	
	
}
Finally, take a look at the corresponding JSP renderings.




******************************************************************************************

Reference URL:

Pie chart Data Fill http://www.cnblogs.com/sillypasserby/p/6185703.html
Line chart Data fill http://www.cnblogs.com/Dreamer-1/p/5530221.html