在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的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("每月订单数量统计数据请求失败。"); } }); }
#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