ASP.NET+JQuery+.Ashx实现+百度Echarts 实现动态柱状图数据图形报表的统计

在目前的一个项目中，需要用到报表表现数据，这些数据有多个维度，需要同时表现出来，同时可能会有大量数据呈现的需求，经过几轮挑选，最终选择了百度的echarts作为报表基础类库。echarts功能强大，界面优美。要呈现的数据就用柱状图来显示了，柱状图更直观的显示出客户最想要的东西。

百度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="barCharts" 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) {
		  	 	 FunDraw2(ec);
		  	 }
		  
		  	 function FunDraw2(ec) {
		  	 	 //--- 柱状图 ---
		  	 	 var myChart = ec.init(document.getElementById('barCharts'));
		  	 	 myChart.showLoading({
		  	 	 	 text: "加载中...请等待"
		  	 	 });
		  	 	 myChart.hideLoading();
		  	 	 myChart.setOption({
		  	 	 	 title: {
		  	 	 	 	 text: '本月每天订单数量统计（单）[周日除外]',
		  	 	 	 	 subtext: '数据来自WMS统计'
		  	 	 	 },
		  	 	 	 tooltip: {
		  	 	 	 	 trigger: 'item',
		  	 	 	 	 axisPointer: {
		  	 	 	 	 	 type: 'shadow'
		  	 	 	 	 }
		  	 	 	 },
		  	 	 	 legend: {
		  	 	 	 	 data: [],
		  	 	 	 	 x: 'right',
		  	 	 	 },
		  	 	 	 toolbox: {
		  	 	 	 	 show: true, orient: 'vertical',
		  	 	 	 	 y: 'center',
		  	 	 	 	 feature: {
		  	 	 	 	 	 magicType: { show: true, type: ['line', 'bar'] },
		  	 	 	 	 	 restore: { show: true },
		  	 	 	 	 	 saveAsImage: { show: true }
		  	 	 	 	 }
		  	 	 	 },
		  	 	 	 calculable: true,
		  	 	 	 xAxis: { data: [], orient: 'vertical' },
		  	 	 	 yAxis: { type: 'value' },
		  	 	 	 series: []
		  	 	 });
		  	 	 // 通过Ajax获取数据
		  	 	 $.ajax({
		  	 	 	 type: "post",
		  	 	 	 async: false, //同步执行
		  	 	 	 url: "SearchHandler.ashx?BarType=BarChart",
		  	 	 	 dataType: "json", //返回数据形式为json
		  	 	 	 success: function (result) {
		  	 	 	 	 if (result) {
		  	 	 	 	 	 //将返回的category和series对象赋值给options对象内的category和series
		  	 	 	 	 	 myChart._option.xAxis.data = result.category;
		  	 	 	 	 	 myChart._option.series = result.series;
		  	 	 	 	 	 myChart._option.legend.data = result.legend;
		  	 	 	 	 	 myChart.hideLoading();
		  	 	 	 	 	 myChart.setOption(myChart._option);
		  	 	 	 	 }
		  	 	 	 },
		  	 	 	 error: function (errorMsg) {
		  	 	 	 	 alert("每月订单数量统计数据请求失败。");
		  	 	 	 }
		  	 	 });

		  	 }

C#代码如下：

		   #region // 本月每天订单数统计
			   if (!string.IsNullOrEmpty(context.Request["BarType"]))
			   {
					//图表的category是字符串数组形式显示
					List<string> categoryList = new List<string>();//{"周一","周二", "周三", "周四", "周五","周六"};
					//图表的series数据为一个对象数组 需定义一个series的类
					List<Series> seriesList = new List<Series>();

					//Echarts图表需要设置legend内的data数组为series的name集合这里需要定义一个legend数组
					List<string> legendList = new List<string>();
					//设置legend数组
					legendList.Add("每天订单数(单)"); //这里的名称必须和series类里面的name保持一致

					//定义一个Series对象
					Series seriesObj = new Series();
					seriesObj.name = "每天订单数(单)";
					seriesObj.type = "bar"; //柱状图显示,可以是其他
					seriesObj.data = new List<int>(); //初始化seriesObj.data 否则data.Add(x)添加时会报错

					using (PortalSearchDataContext db = new PortalSearchDataContext())
					{
						 List<MonethOrdersNo> getMonthData = (from t in db.DOC_Order_Header
															  where
																t.OrderTime >= startMonth.Date.Date && t.OrderTime <= DateTime.Parse(endMonth.Date.ToString("yyyy-MM-dd 23:59"))
															  group t by new
															  {
																   Day = t.OrderTime.Date
															  } into g
															  select new MonethOrdersNo
											 {
												  Day = g.Key.Day,
												  DayOrderNo = g.Count()
											 }).OrderBy(x => x.Day).ToList<MonethOrdersNo>();
						 //设置数据
						 for (int i = 0; i < getMonthData.Count(); i++)
						 {
							  //加入category数组
							  categoryList.Add(getMonthData[i].Day.Value.ToString("yyyy-MM-dd"));
							  //为series序列数组中data添加数据
							  seriesObj.data.Add(getMonthData[i].DayOrderNo);
						 }

					}
					//将sereis对象压入sereis数组列表内
					seriesList.Add(seriesObj);

					//结果显示需要category和series、legend多个对象 因此new一个新的对象来封装返回的多个对象
					var newObj = new
					{
						 category = categoryList,
						 series = seriesList,
						 legend = legendList
					};
					//将List转换为Json数据并Response返回新对象
					context.Response.Write(newObj.ToJson());   context.Response.End();
			   }
			   #endregion

要引用JOSN序列化代码：JsonHelper

首先去下载Newtonsoft.Json.dll 然后在项目中添加引用，(在下载附件里面有)

using System.Data;
using System.IO;
using System.Runtime.Serialization.Json;
using System.Text;
using System.Collections.Generic;
using System.Xml.Serialization;
using System;
using System.Reflection;
namespace PortalSearch.model
{
	 /// <summary>
	 /// 注意约束，所转化涉及到的对象必须加上 [DataContractAttribute]  [DataMember(Name = "name")]
	 /// </summary>
	 public static class JsonHelper
	 {
		  public static string XMLSerialize<T>(T t)
		  {

			   using (StringWriter sw = new StringWriter())
			   {
					try
					{
						 XmlSerializer xz = new XmlSerializer(typeof(T));
						 xz.Serialize(sw, t);
						 return sw.ToString();
					}
					catch (Exception e)
					{
						 //LogHelper.Log(e.Message + e.StackTrace);
					}
					return "";
			   }
		  }


		  public static T XMLDeserialize<T>(T t, string s)
		  {


			   using (StringReader sr = new StringReader(s))
			   {
					try
					{
						 XmlSerializer xz = new XmlSerializer(typeof(T));
						 return (T)xz.Deserialize(sr);
					}
					catch (Exception e)
					{
						 //LogHelper.Log(e.Message + e.StackTrace);
					}

			   }
			   return default(T);
		  }



		  public static string ToJson(this object obj)
		  {
			   return NewtonsoftJson(obj);
		  }

		  public static string NewtonsoftJson(object obj)
		  {
			   return Newtonsoft.Json.JsonConvert.SerializeObject(obj, Newtonsoft.Json.Formatting.None);
		  }
		  /// <summary>
		  /// 将对象转化成json
		  /// </summary>
		  /// <param name="obj"></param>
		  /// <returns></returns>
		  public static string ObjectToJson(object obj)
		  {
			   DataContractJsonSerializer serializer = new DataContractJsonSerializer(obj.GetType());
			   using (MemoryStream ms = new MemoryStream())
			   {
					serializer.WriteObject(ms, obj);
					StringBuilder sb = new StringBuilder();
					sb.Append(Encoding.UTF8.GetString(ms.ToArray()));
					string jsonString = sb.ToString();
					if (!jsonString.StartsWith("[") && !jsonString.EndsWith("]"))
					{
						 sb.Insert(0, "[");
						 sb.Append("]");
					}

					return sb.ToString();
			   }
		  }



		  /// <summary>
		  /// 将对象序列为Json数据格式
		  /// </summary>
		  /// <param name="obj"></param>
		  /// <returns></returns>
		  public static string Serialize<T>(T obj)
		  {
			   string result = Newtonsoft.Json.JsonConvert.SerializeObject(obj);
			   return result;
		  }

		  /// <summary>
		  /// 将Json数据格式的字符串反序列化为一个对象
		  /// </summary>
		  /// <returns></returns>
		  public static T Deserialize<T>(string josnString)
		  {

			   try
			   {
					T obj = Newtonsoft.Json.JsonConvert.DeserializeObject<T>(josnString);
					return obj;

			   }
			   catch (Exception e)
			   {
					string s = e.Message;
					throw e;
			   }

		  }

		  /// <summary>
		  /// 将dataTable转换为json
		  /// </summary>
		  /// <param name="dt"></param>
		  /// <returns></returns>
		  public static string CreateJsonParameters(DataTable dt)
		  {
			   if (dt == null || dt.Rows.Count == 0)
			   {
					return string.Empty;
			   }

			   StringBuilder JsonString = new StringBuilder();
			   JsonString.Append("\"DataTable\":[ ");
			   for (int i = 0; i < dt.Rows.Count; i++)
			   {
					JsonString.Append("{ ");

					for (int j = 0; j < dt.Columns.Count; j++)
					{
						 if (j < dt.Columns.Count - 1)
						 {
							  JsonString.Append("\"" + dt.Columns[j].ColumnName + "\":" + "\"" + dt.Rows[i][j] + "\",");
						 }
						 else if (j == dt.Columns.Count - 1)
						 {
							  JsonString.Append("\"" + dt.Columns[j].ColumnName + "\":" + "\"" + dt.Rows[i][j] + "\"");
						 }
					}

					if (i == dt.Rows.Count - 1)
					{
						 JsonString.Append("} ");
					}
					else
					{
						 JsonString.Append("}, ");
					}
			   }

			   JsonString.Append("]");

			   return JsonString.ToString();
		  }

		  /// <summary>
		  /// 列名和数据都转换为json格式
		  /// </summary>
		  /// <param name="dt"></param>
		  /// <returns></returns>
		  public static string CreateJson(DataTable dt)
		  {
			   if (null == dt)
			   {
					return string.Empty;
			   }

			   StringBuilder JsonString = new StringBuilder();
			   JsonString.Append("\"Col\":[ ");
			   string coLCaption = string.Empty;
			   string colName = string.Empty;
			   string colInfo = string.Empty;
			   for (int i = 0; i < dt.Columns.Count; i++)
			   {
					DataColumn column = dt.Columns[i];
					colName = column.ColumnName;
					coLCaption = column.Caption;
					if (string.IsNullOrEmpty(coLCaption))
					{
						 coLCaption = colName;
					}

					if (i > 0)
					{
						 JsonString.Append(",");
					}

					colInfo = "{\"ColNo\":\"" + i + "\",\"ColName\":\"" + colName + "\",\"ColCaption\":\"" + coLCaption + "\",\"ColDataType\":\"" + column.DataType.Name + "\"}";
					JsonString.Append(colInfo);
			   }

			   JsonString.Append("]");

			   if (dt.Rows.Count > 0)
			   {
					JsonString.Append(",");
					JsonString.Append(CreateJsonParameters(dt));
			   }

			   return JsonString.ToString();
		  }
	 }


}

其他参考地址： 

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.suchso.com/projecteactual/echarts-aspnet-ashx-demo-xiangmudaima.html

http://www.suchso.com/projecteactual/echarts-aspnet-ashx-demo-download-duiji-bar.html

整理好的Echarts文件地址如下：

http://files.cnblogs.com/kongwei521/Echarts%E8%A6%81%E7%94%A8%E5%88%B0%E7%9A%84js_css_dll.zip