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

陈永正的图书馆 2016-11-28

展开全文

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

百度echarts简介请参考

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

最终效果图如下：

JS代码：

<link href="assets/css/echartsHome.css" rel="stylesheet"/>
    <script src="assets/js/esl.js"></script>
    <script src="assets/js/codemirror.js"></script>

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

EchartsJson JS里面的代码如下：

[javascript] view plain copy

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#代码如下：

[csharp] view plain copy

#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 然后在项目中添加引用，(在下载附件里面有)

[csharp] view plain copy

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