在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的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