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

最新推荐文章于 2020-04-13 22:18:05 发布

baipai8449

最新推荐文章于 2020-04-13 22:18:05 发布

阅读量283

点赞数

文章标签： javascript json c# ViewUI

原文链接：http://www.cnblogs.com/zhangxiaolei521/p/6200648.html

版权

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

百度echarts简介请参考

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

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

JS代码：

<link href="assets/css/echartsHome.css" rel="stylesheet"/>
<script src="assets/js/esl.js"></script>
<script src="assets/js/codemirror.js"></script>

HTML代码：(放在中间呈现)

       
     1. 
     <div id="mapPieCharts" class="main" ></div>

EchartsJson JS里面的代码如下：

       
     001. 
     function needMap() { 
    
     002. 
     var href = location.href; 
    
     003. 
     return href.indexOf('map') != -1 
    
     004. 
     || href.indexOf('mix3') != -1 
    
     005. 
     || href.indexOf('mix5') != -1 
    
     006. 
     || href.indexOf('dataRange') != -1; 
    
     007. 
       
     008. 
     } 
    
     009. 
       
     010. 
     var fileLocation = needMap() ? 'assets/js/echarts-map' : 'assets/js/echarts'; 
    
     011. 
     require.config({ 
    
     012. 
     paths: { 
    
     013. 
     echarts: fileLocation,'echarts/assets/js/pie': fileLocation, 
    
     014. 
     'echarts/assets/js/map': fileLocation, 
    
     015. 
     } 
    
     016. 
     }); 
    
     017. 
       
     018. 
     require( 
    
     019. 
     [ 
    
     020. 
     'echarts','echarts/chart/pie',needMap() ? 'echarts/chart/map' : 'echarts' 
    
     021. 
     ], 
    
     022. 
     DrawCharts 
    
     023. 
     ); 
    
     024. 
     function DrawCharts(ec) { 
    
     025. 
     FunDraw1(ec); 
    
     026. 
     } 
    
     027. 
       
     028. 
     function FunDraw1(ec) { 
    
     029. 
     //---地图饼状图 --- 
    
     030. 
     var mapChart = ec.init(document.getElementById('mapPieCharts')); 
    
     031. 
     mapChart.showLoading({text: "加载中...请等待" }); 
    
     032. 
     mapChart.hideLoading(); 
    
     033. 
     var seriesMapData; 
    
     034. 
     var seriesPieData; 
    
     035. 
     var legendData; 
    
     036. 
     $.ajax({ 
    
     037. 
     type: "post", 
    
     038. 
     async: false, //同步执行 
    
     039. 
     url: "SearchHandler.ashx?MapPieType=MapPieChart", 
    
     040. 
     dataType: "json", 
    
     041. 
     success: function (result) { 
    
     042. 
     seriesMapData = eval('(' + result.split('_')[0] + ')'); 
    
     043. 
     seriesPieData = eval('(' + result.split('_')[1] + ')'); 
    
     044. 
     legendData = eval('(' + result.split('_')[2] + ')'); 
    
     045. 
     }, 
    
     046. 
     error: function (errorMsg) { 
    
     047. 
     alert("全国各省份订单销售量统计数据请求失败。"); 
    
     048. 
     } 
    
     049. 
     }); 
    
     050. 
     mapChart.setOption({ 
    
     051. 
     title: { 
    
     052. 
     text: new Date().getFullYear() + '全国各省份订单销售量统计（月/单）', 
    
     053. 
     subtext: '数据来自WMS统计' 
    
     054. 
     }, 
    
     055. 
     tooltip: { 
    
     056. 
     trigger: 'item' 
    
     057. 
     }, 
    
     058. 
     legend: { 
    
     059. 
     x: 'right', 
    
     060. 
     selectedMode: false, 
    
     061. 
     data: legendData 
    
     062. 
     }, 
    
     063. 
     dataRange: { 
    
     064. 
     orient: 'horizontal', 
    
     065. 
     min: 0, 
    
     066. 
     max: 200, 
    
     067. 
     text: ['购买力强', '低'], 
    
     068. 
     splitNumber: 0, 
    
     069. 
     color: ['orangered', 'yellow', 'lightskyblue'] 
    
     070. 
     }, 
    
     071. 
     animation: false, 
    
     072. 
     series: [ 
    
     073. 
     { 
    
     074. 
     name: new Date().getFullYear() + '全国各省份订单销售量', 
    
     075. 
     type: 'map', 
    
     076. 
     mapType: 'china', 
    
     077. 
     mapLocation: {x: 'left'}, 
    
     078. 
     selectedMode: 'multiple', 
    
     079. 
     itemStyle: { 
    
     080. 
     normal: { label: { show: true } }, 
    
     081. 
     emphasis: { label: { show: true } } 
    
     082. 
     }, 
    
     083. 
     data: seriesMapData 
    
     084. 
     }, 
    
     085. 
     { 
    
     086. 
     name: new Date().getFullYear() + '全国各省份订单销售量', 
    
     087. 
     type: 'pie', 
    
     088. 
     roseType: 'area', 
    
     089. 
     tooltip: { 
    
     090. 
     trigger: 'item', 
    
     091. 
     formatter: "{a} <br />{b} : {c} ({d}%)" 
    
     092. 
     }, 
    
     093. 
     center: [document.getElementById('mapPieCharts').offsetWidth - 250, 225], 
    
     094. 
     radius: [30, 120], 
    
     095. 
     data: seriesPieData 
    
     096. 
     } 
    
     097. 
     ] 
    
     098. 
     }); 
    
     099. 
       
     100. 
     }

C#代码如下：

       
     01. 
     #region// 地图和饼状图组合查询 
    
     02. 
     if (!string.IsNullOrEmpty(context.Request["MapPieType"])) 
    
     03. 
     { 
    
     04. 
     //图例名称 
    
     05. 
     var legend = string.Empty; 
    
     06. 
     //饼状图数据 省份及统计的数据 
    
     07. 
     StringBuilder sbPieData = new StringBuilder(); 
    
     08. 
     sbPieData.Append("["); 
    
     09. 
     //地图数据 省份及统计的数据 
    
     10. 
     StringBuilder sbMapData = new StringBuilder(); 
    
     11. 
     sbMapData.Append("["); 
    
     12. 
       
     13. 
     using (PortalSearchDataContext db = new PortalSearchDataContext()) 
    
     14. 
     { 
    
     15. 
     List<SeriesMapPieData> getMapPieDataList = 
    
     16. 
     (from province in 
    
     17. 
     ( 
    
     18. 
     (from t in db.DOC_Order_Header 
    
     19. 
     where 
    
     20. 
     t.C_Address1 != "" && t.SOStatus == "99" && 
    
     21. 
     t.OrderTime >= startMonth.Date.Date && t.OrderTime 
    
     22. 
     <= DateTime.Parse(endMonth.Date.ToString("yyyy-MM-dd 23:59")) 
    
     23. 
     group t by new 
    
     24. 
     { 
    
     25. 
     t.C_Address1, 
    
     26. 
     t.OrderTime 
    
     27. 
     } into g 
    
     28. 
     select new 
    
     29. 
     { 
    
     30. 
     ProName = g.Key.C_Address1.Substring(0, 3).Replace("省", "").Replace("壮", "") 
    
     31. 
     .Replace("回", "").Replace("维", ""), 
    
     32. 
     Number = g.Count(), 
    
     33. 
     OrderTime = g.Key.OrderTime 
    
     34. 
     })) 
    
     35. 
     group province by new 
    
     36. 
     { 
    
     37. 
     province.ProName 
    
     38. 
     } into g 
    
     39. 
     orderby 
    
     40. 
     g.Sum(p => p.Number) 
    
     41. 
     select new SeriesMapPieData 
    
     42. 
     { 
    
     43. 
     name = g.Key.ProName, 
    
     44. 
     value = g.Sum(p => p.Number) 
    
     45. 
     }).ToList<SeriesMapPieData>(); 
    
     46. 
     for (int i = 0; i < getMapPieDataList.Count; i++) 
    
     47. 
     { 
    
     48. 
     sbMapData.Append("{name:'" + getMapPieDataList[i].name + "',value:" + getMapPieDataList[i].value + "},"); 
    
     49. 
     } 
    
     50. 
     //取得排名前十条的legendname数据 
    
     51. 
     List<SeriesMapPieData> legendName = 
    
     52. 
     getMapPieDataList.OrderByDescending(x => x.value).Take(10).ToList<SeriesMapPieData>(); 
    
     53. 
     for (int i = 0; i < legendName.Count(); i++) 
    
     54. 
     { 
    
     55. 
     legend += "'" + legendName[i].name + "',"; 
    
     56. 
     sbPieData.Append("{name:'" + legendName[i].name + "',value:" + legendName[i].value + "},"); 
    
     57. 
     } 
    
     58. 
     } 
    
     59. 
     var getPieData = sbMapData.ToString().TrimEnd(',') +"]_" + sbPieData.ToString().TrimEnd(',') + "]_[" + legend.TrimEnd(',') + "]"; 
    
     60. 
     context.Response.Write(getPieData.ToJson()); 
    
     61. 
     } 
    
     62. 
     #endregion 
    
     63. 
       
     64. 
     context.Response.End();