Echarts Background Option object __echarts background Option object

Recently used in the work of the echarts to make a chart, search on the Internet a lot of examples are almost the same in the foreground to write some JS, and then the variable through AJAX or through the collection of ways to plug in, this way once a page of a number of charts, it will be abnormal chaos, Accidental in open source China saw someone made a Echarts object jar package, in the background of the perfect package returned an option in the foreground received and set into option. Try it, the effect is very good.
The following example code is given:

The method returns a keyword that points to the JSP page that the foreground is responsible for the chart display

Public String keyword () {
	   if (This.datenum = = NULL | | | this.dateNum.equals ("")) {
		   This.datenum = "5";
	   }
	   return "keyword"; 
   }

This method is based on JSP Ajax passed back to display the number of Datenum database value (this place I did not use real-time fetch value, but by timing to update the data into a table, so that the chart will be very fast value)

You can see that I have defined an option object in which the parameters can be invoked in the form of a method or a property. Finally package the option, put him into the Jsonobject object back to the front and receive the JSON value.

Public String Getkeyworddata () throws parseexception{loginuser user = (Loginuser) (SecurityContext) Servletactioncon 
	   Text. Getrequest (). GetSession (). getattribute ("Spring_security_context")). Getauthentication (). Getprincipal ();
	   Long id = user.getid ();
	   int num = Integer.parseint (this.datenum);
	   Jsonobj = new Jsonobject ();
	   All keywords taken to the user are placed in the legendname array list<string> names = This.cacheCountManager.getKeywordNames (ID);
	   string[] Legendname = new string[names.size ()];
		   for (int i=0;i<names.size (); i++) {String name = Names.get (i);
	   Legendname[i] = name;
	   } string[] Riqiarr = new String[num];
		   for (int j=num;j>0;j--) {String Riqi = Getstrdate (string.valueof (j));
	   RIQIARR[NUM-J] = Riqi;
	   Option option=new gsonoption ();
	   Option.title (). Text ("Key article statistics");
	   Option.tooltip (). Trigger (Trigger.axis);
	   Option.legend (). data (Legendname);
	   Valueaxis axis = new Valueaxis (); Axis.type (axistype.category). Boundarygap (False). data (Riqiarr);
	   Option.xaxis (axis);
	   Categoryaxis YAxis = new Categoryaxis ();
	   Yaxis.type (Axistype.value);
	   Option.yaxis (YAxis);
	   list<series> seriess = new arraylist<series> ();
	   Markpoint MP = new Markpoint ();
	   Mp.data (new data (). Type (Marktype.max). Name ("Max"), new Data (). Type (marktype.min). Name ("Min"));
		   for (int i=0;i<names.size (); i++) {integer[] Countarr = new Integer[num];
		   Line line = new Line ();
		   String name = Names.get (i);
			   for (int j=num;j>0;j--) {String Riqi = Getstrdate (string.valueof (j));
		   COUNTARR[NUM-J] = This.cacheCountManager.getCount (ID, Riqi, name);
		   } line.name (name). Type (seriestype.line). Data (Countarr). Markpoint (MP);
	   Seriess.add (line);
	   } option.series (seriess);
	   Jsonobj=jsonobject.fromobject (Option.tostring ());
   return "Echartsjson"; }

The page Display section is concise.

<div id= "main"  style= "height:400px; border:1px solid #ccc; padding:10px;" > graphics are loading in ...</div>

$ (function () {
	require ([' echarts ', ' echarts/chart/line '],drawechart);
});

function Drawechart (EC) {
	var myChart;
	MyChart = Ec.init (document.getElementById (' main '));
	Mychart.showloading ({
	text: "Chart data is trying to load ..."
	});
	var date = $ ("#dateNum"). Val ();
	$.ajax ({
	type: "Post",
	data:{"Datenum":d ate},
		URL: "${ctx}/statistics/statistics! Getkeyworddata.action ",
		dataType:" JSON ",
		success:function (data) {
			mychart.setoption (data.jsonobj );
		Mychart.hideloading ();
		},
		error:function (errormsg) {
		alert ("Sorry Grandpa, the chart request data failed.") ");
		}
	});
}

Jar Pack Download: http://mvnrepository.com/artifact/com.github.abel533/ECharts