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

百度echarts简介请参考

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

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

JS代码：

 <!-- Charts Layout Stylesheet -->
    <link href=http://www.mamicode.com/"assets/css/echartsHome.css" rel="stylesheet"/>
    <script src=http://www.mamicode.com/"assets/js/esl.js"></script>
    <script src=http://www.mamicode.com/"assets/js/codemirror.js"></script>

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

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

     <script src=http://www.mamicode.com/"assets/js/jquery-1.8.2.min.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
								}
		  	 	 	 ]
		  	 	 });

		  	 }

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

其他参考地址： 
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

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