c#+jquery+. ashx+ Baidu Echarts to realize the national map and pie chart Dynamic Data Graphic report statistics

In the current project, need to use the report performance data, the data has multiple dimensions, need to be displayed at the same time, there may be a large number of data to present the demand, after several rounds of selection, and finally chose Baidu's echarts as the basis of the report base Class library. Echarts features a powerful, beautiful interface. Because the customer is Taobao sellers, so want to achieve each month in the provinces of each individual purchasing power, we can count other, if the GDP population and so on.

Baidu Echarts Introduction Please refer to

http://echarts.coding.io/doc/example.html

the effect diagram is as follows: all Dynamic Data

JS Code:

<!--charts Layout Stylesheet-->
<link href= "Assets/css/echartshome.css" rel= "stylesheet"/>
<script src= "Assets/js/esl.js" ></script>
<script src= "Assets/js/codemirror.js" ></script>

HTML code: (placed in the middle rendering)

<div id= "Mappiecharts" class= "main" ></div>

<script src= "Assets/js/jquery-1.8.2.min.js" ></script>
<script src= "Assets/js/echarts-map.js" ></script>
<script src= "Assets/js/echartsjson.js" ></script>

Echartsjson JS inside the code is as follows:

  	 function Needmap () {var href = location.href; return Href.indexof (' map ')!=-1 | | Href.indexof (' mix3 ')!=-1 | | Href.indexof (' mix5 ')!=-1 | |

		  	 Href.indexof (' DataRange ')!=-1; var filelocation = Needmap ()?
		  	 ' Assets/js/echarts-map ': ' Assets/js/echarts '; Require.config ({paths: {echarts:filelocation, ' echarts/assets/js/pie ': filelocation, ' echarts/a

		  	 Ssets/js/map ': Filelocation,}}); Require ([' echarts ', ' Echarts/chart/pie ', needmap)?
		  	 ' Echarts/chart/map ': ' Echarts '], drawcharts);
		  	 function Drawcharts (EC) {FUNDRAW1 (EC); function FUNDRAW1 (EC) {//---map pie chart---var mapchart = ec.init (document.getElementById (' Mappie
		  	 	 Charts ')); Mapchart.showloading ({text:) in load ...
		  	 	 Please wait "});
		  	 	 Mapchart.hideloading ();
		  	 	 var seriesmapdata;
		  	 	 var seriespiedata;
		  	 	 var legenddata; $.ajax({type: Post, Async:false,//Synchronous execution URL: searchhandler.ashx? Mappietype=mappiechart ", DataType:" JSON ", success:function (result) {seriesmapdata = Ev
		  	 	 	 	 Al (' (' + Result.split ('_') [0] + ') ');
		  	 	 	 	 Seriespiedata = eval (' + Result.split ('_') [1] + ') ');
		  	 	 	 Legenddata = eval (' + Result.split ('_') [2] + ') '); Error:function (errormsg) {alert ("Request for order sales statistics in all provinces of the country failed.
		  	 	 	 ");
		  	 	 }
		  	 	 }); Mapchart.setoption ({title: {text:new Date (). getFullYear () + ' National Order sales statistics (monthly/single) ', Subt
		  	 	 	 	 Ext: ' Data from WMS Statistics '}, tooltip: {trigger: ' item '}, Legend: {
		  	 	 	 	 x: ' Right ', Selectedmode:false, Data:legenddata}, DataRange: { Orient: ' Horizontal ', min:0, max:200, text: [' strong purchasing power ', ' low '], Splitnumber: 0, color: [' orangered ', ' yellow ', ' Lightskyblue ']}, Animation:false, series
				 					: [{name:new Date (). getFullYear () + ' order sales in all provinces of the country ', type: ' Map ', Maptype: ' China ', MapLocation: {x: ' Left '}, Selectedmode: ' Multiple ', ItemStyle: {normal: {label
								: {Show:true}}, emphasis: {label: {show:true}}}, Data:seriesmapdata},
				 					{name:new Date (). getFullYear () + ' order sales in all provinces of the country ', type: ' Pie ', Rosetype: ' Area ',
				 					ToolTip: {trigger: ' item ', formatter: ' {a} <br/>{b}: {C} ({d}%) '}, Center: [document.getElementById (' Mappiecharts '). offsetWidth-250, A., Radius: [A], data

		  	 : Seriespiedata}]});

 }

The C # code is as follows:

   #region//Map and pie chart combination query if (!string. IsNullOrEmpty (context. request["Mappietype"])) {//legend name var legend = string.
					Empty;
					Pie chart Data province and statistical data StringBuilder Sbpiedata = new StringBuilder ();
					Sbpiedata.append ("[");
					Map data provinces and statistical data StringBuilder Sbmapdata = new StringBuilder ();

					Sbmapdata.append ("["); using (Portalsearchdatacontext db = new Portalsearchdatacontext ()) {list<seriesmappiedata> Getmappiedat Alist = (from province in (from T. db).
													Doc_order_header where T.c_address1!= "" && t.sostatus = = "" && T.ordertime >= startMonth.Date.Date && t.ordertime <= datetime.parse (endMonth.Date.ToString ("
											   YYYY-MM-DD 23:59 ")) group T by new {T.C_ADDRESS1, t.ordertime into G select New {proname = G.key.c_address1.subsTring (0, 3). Replace ("Province", ""). Replace ("Strong", ""). Replace ("Back", ""). Replace ("Dimension", ""), Number = G.count (), ordertime = G.key.ordertime})) GR OUP Province by new {province.
							   Proname} into G by G.sum (P => p.number) select New Seriesmappiedata {name = G.key.proname, value = G.sum (P => p.number)}).
						 Tolist<seriesmappiedata> (); for (int i = 0; i < Getmappiedatalist.count i++) {sbmapdata.append ("{name: '" + GETMAPPIEDATALIST[I].N
						 Ame + "', Value:" + Getmappiedatalist[i].value + "},"); //Get Top 10 legendname data list<seriesmappiedata> legendname = getmappiedatalist.orderbydescending (x =& Gt X.value). Take (10).
						 Tolist<seriesmappiedata> ();
							  for (int i = 0; i < Legendname.count (); i++) {legend + = "" + Legendname[i].name + "',"; Sbpiedata.append ("{Name: ' + legendname[i].name + ', value: "+ Legendname[i].value +"}, "); } var getpiedata = Sbmapdata.tostring (). TrimEnd (', ') + "]_" + sbpiedata.tostring (). TrimEnd (', ') + "]_[" + Legend.
					TrimEnd (', ') + "]"; Context.
			   Response.Write (Getpiedata.tojson ()); } #endregion context. Response.End ();

Other reference address:

http://www.stepday.com/topic/?906

Http://www.shaoqun.com/a/93673.aspx

Http://suchso.com/catalog.asp?tags=Echarts%E4%BD%BF%E7%94%A8

Http://www.it165.net/pro/html/201310/7515.html

http://baigungun.blog.51cto.com/6736785/1312743/

Http://www.cnblogs.com/zhangxl/p/chart.html

Http://www.aiuxian.com/article/p-282551.html

The Echarts file address is as follows: Http://files.cnblogs.com/kongwei521/Echarts%E8%A6%81%E7%94%A8%E5%88%B0%E7%9A%84js_css_dll.zip