在目前的一个项目中，需要用到报表表现数据，这些数据有多个维度，需要同时表现出来，同时可能会有大量数据呈现的需求，经过几轮挑选，最终选择了百度的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();
参考页面：
猿教程_-Entity教程-EntityFramework教程介绍
猿教程_-Entity教程-EntityFramework介绍
猿教程_-Entity教程-EntityFramework体系结构
猿教程_-Entity教程-设置EntityFramework开发环境
猿教程_-Entity教程-选择Entity Framework的开发方法
猿教程_-Entity教程-Linq to Entities 映射查询
猿教程_-Entity教程-DBEntityEntry Class