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

Source: Internet
Author: User

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


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.