C#+JQuery+.Ashx+百度Echarts 实现全国省市地图和饼状图动态数据图形报表的统计

在目前的一个项目中，需要用到报表表现数据，这些数据有多个维度，需要同时表现出来，同时可能会有大量数据呈现的需求，经过几轮挑选，最终选择了百度的echarts作为报表基础类库。echarts功能强大，界面优美。由于客户是淘宝卖家，因此想要实现每个月全国各个省份各自购力如何，大家可以统计其他的，如果GDP
人口 等等。

百度echarts简介请参考

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

效果图如下：全部是动态数据

JS代码：

<!-- 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代码：(放在中间呈现)

<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里面的代码如下：

  	 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/assets/js/map': fileLocation,
		  	 	 }
		  	 });

		  	 require(
						[
							'echarts','echarts/chart/pie',needMap() ? 'echarts/chart/map' : 'echarts'
						],
						 DrawCharts
			    );
		  	 function DrawCharts(ec) {
		  		  	 	 FunDraw1(ec);
		  	 }

		  	 function FunDraw1(ec) {
		  	 	 //---地图饼状图 ---
		  	 	 var mapChart = ec.init(document.getElementById('mapPieCharts'));
		  	 	 mapChart.showLoading({text: "加载中...请等待" });
		  	 	 mapChart.hideLoading();
		  	 	 var seriesMapData;
		  	 	 var seriesPieData;
		  	 	 var legendData;
		  	 	 $.ajax({
		  	 	 	 type: "post",
		  	 	 	 async: false, //同步执行
		  	 	 	 url: "SearchHandler.ashx?MapPieType=MapPieChart",
		  	 	 	 dataType: "json",
		  	 	 	 success: function (result) {
		  	 	 	 	 seriesMapData = eval('(' + result.split('_')[0] + ')');
		  	 	 	 	 seriesPieData = eval('(' + result.split('_')[1] + ')');
		  	 	 	 	 legendData = eval('(' + result.split('_')[2] + ')');
		  	 	 	 },
		  	 	 	 error: function (errorMsg) {
		  	 	 	 	 alert("全国各省份订单销售量统计数据请求失败。");
		  	 	 	 }
		  	 	 });
		  	 	 mapChart.setOption({
		  	 	 	 title: {
		  	 	 	 	 text: new Date().getFullYear() + '全国各省份订单销售量统计（月/单）',
		  	 	 	 	 subtext: '数据来自WMS统计'
		  	 	 	 },
		  	 	 	 tooltip: {
		  	 	 	 	 trigger: 'item'
		  	 	 	 },
		  	 	 	 legend: {
		  	 	 	 	 x: 'right',
		  	 	 	 	 selectedMode: false,
		  	 	 	 	 data: legendData
		  	 	 	 },
		  	 	 	 dataRange: {
		  	 	 	 	 orient: 'horizontal',
		  	 	 	 	 min: 0,
		  	 	 	 	 max: 200,
		  	 	 	 	 text: ['购买力强', '低'],
		  	 	 	 	 splitNumber: 0,
		  	 	 	 	 color: ['orangered', 'yellow', 'lightskyblue']
		  	 	 	 },
		  	 	 	 animation: false,
		  	 	 	 series: [
								{
				 					name: new Date().getFullYear() + '全国各省份订单销售量',
				 					type: 'map',
				 					mapType: 'china',
				 					mapLocation: {x: 'left'},
				 					selectedMode: 'multiple',
				 					itemStyle: {
				 	 					normal: { label: { show: true } },
				 	 					emphasis: { label: { show: true } }
				 					},
				 					data: seriesMapData
								},
								{
				 					name: new Date().getFullYear() + '全国各省份订单销售量',
				 					type: 'pie',
				 					roseType: 'area',
				 					tooltip: {
				 	 					trigger: 'item',
				 	 					formatter: "{a} <br />{b} : {c} ({d}%)"
				 					},
				 					center: [document.getElementById('mapPieCharts').offsetWidth - 250, 225],
				 					radius: [30, 120],
				 					data: seriesPieData
								}
		  	 	 	 ]
		  	 	 });

		  	 }

C#代码如下：

   #region// 地图和饼状图组合查询
			   if (!string.IsNullOrEmpty(context.Request["MapPieType"]))
			   {
					//图例名称
					var legend = string.Empty;
					//饼状图数据 省份及统计的数据
					StringBuilder sbPieData = new StringBuilder();
					sbPieData.Append("[");
					//地图数据 省份及统计的数据
					StringBuilder sbMapData = new StringBuilder();
					sbMapData.Append("[");

					using (PortalSearchDataContext db = new PortalSearchDataContext())
					{
						 List<SeriesMapPieData> getMapPieDataList =
							  (from province in
									(
											  (from t in db.DOC_Order_Header
											   where
													t.C_Address1 != "" && t.SOStatus == "99" &&
													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("省", "").Replace("壮", "")
.Replace("回", "").Replace("维", ""),
													Number = g.Count(),
													OrderTime = g.Key.OrderTime
											   }))
							   group province by new
							   {
									province.ProName
							   } into g
							   orderby
									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].name + "',value:" + getMapPieDataList[i].value + "},");
						 }
						 //取得排名前十条的legendname数据
						 List<SeriesMapPieData> legendName =
getMapPieDataList.OrderByDescending(x => 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();

其他参考地址：

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

整理好的Echarts文件地址如下：

http://files.cnblogs.com/kongwei521/Echarts%E8%A6%81%E7%94%A8%E5%88%B0%E7%9A%84js_css_dll.zip