• 热门专题

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

作者:  发布日期:2014-09-09 23:02:48
Tag标签:报表  省市  图形  
  • 在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的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();


About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规