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

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

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();

 

参考页面：

猿教程_-CSharp教程-C#简介

猿教程_-CSharp教程-C#环境

猿教程_-CSharp教程-C#入门实例

猿教程_-Java教程-Java简介

猿教程_-Servlet教程-Servlet简介

猿教程_-Jsp教程-JSP简介

猿教程_-Struts教程-Struts2教程

猿教程_-Hibernate教程-Hibernate教程

猿教程_-Entity教程-EntityFramework教程介绍

猿教程_-Entity教程-EntityFramework介绍

猿教程_-Entity教程-EntityFramework体系结构

猿教程_-Entity教程-设置EntityFramework开发环境

猿教程_-Entity教程-创建实体数据模型

猿教程_-Entity教程-模型浏览器

猿教程_-Entity教程-DBContext

猿教程_-Entity教程-实体类型

猿教程_-Entity教程-实体关系

猿教程_-Entity教程-实体生命周期

猿教程_-Entity教程-代码优先

猿教程_-Entity教程-模型优先

猿教程_-Entity教程-数据库优先

猿教程_-Entity教程-选择Entity Framework的开发方法

猿教程_-Entity教程-使用EDM 查询

猿教程_-Entity教程-Linq to Entities 映射查询

猿教程_-Entity教程-DBSet 类

猿教程_-Entity教程-DBEntityEntry Class

猿教程_-Entity教程-跟踪实体的更改

猿教程_-Entity教程-Entity Framework持久化

猿教程_-Spring教程-Spring教程

猿教程_-mvc教程-MVC教程

猿教程_-webapi教程-WebAPI教程