什么是ECharts
ECharts 是一個數(shù)據(jù)可視化工具蟆肆，提供了系列常用圖表，底層基于ZRender（一個全新的輕量級canvas類庫）悟衩，創(chuàng)建了坐標系，圖例栓拜，提示座泳，工具箱等基礎組件，并在此上構建出折線圖幕与、柱狀圖挑势、散點圖、K線圖啦鸣、餅圖潮饱、雷達圖、地圖诫给、和弦圖香拉、力導向布局圖、儀表盤以及漏斗圖中狂，同時支持任意維度的堆積和多圖表混合展現(xiàn)缕溉。用ECharts展示數(shù)據(jù)很美觀，而且官方文檔非常詳細吃型，入手很快证鸥。
那么如何在ECharts中靈活使用Ajax獲取數(shù)據(jù)呢。仔細看一下官方文檔可以發(fā)現(xiàn)對象option的數(shù)據(jù)格式和JSON相似度很高勤晚。所以可以很方便的使用JSON格式數(shù)據(jù)枉层。
什么是JSON
JSON是一種與開發(fā)語言無關的輕量級的數(shù)據(jù)格式，全稱是JavaScript Object Notation赐写。
- 標準格式：key:value 鍵值對
- 數(shù)據(jù)結構：對象和數(shù)組
- Object（對象）:使用花括號包含的鍵值對結構鸟蜡，key必須是string類型，value為任何基本類型或數(shù)據(jù)結構挺邀。
- Array（數(shù)組）:使用中括號揉忘，并用逗號分隔元素。
簡單JSON數(shù)據(jù)示例:
{
"key":"value",
"name":"王小二", //字符串
"age":20, //數(shù)字
"has_girlfriend":false, //boolean
"major":["理發(fā)","挖掘機"], //數(shù)組
"簽名":NULL //null
}
{
"學生甲":{
"高數(shù)":100 //對象
"算法":100
},
"學生乙":{
"高數(shù)":90
"算法":90
}
}
柱狀圖實例
Step1:首先學習柱狀圖的使用端铛，模仿ECharts官方文檔中的柱狀圖的例子寫一個.html頁面泣矛，此時數(shù)據(jù)是直接寫在前端頁面中，成功之后繼續(xù)下一步禾蚕，改寫為使用JSON格式數(shù)據(jù)您朽。
Step2:我們需要通過Ajax動態(tài)獲取后臺的數(shù)據(jù)，拋棄前端寫死的數(shù)據(jù)（拿Series屬性中的數(shù)據(jù)舉例）换淆，通過Ajax接口獲取后臺提供的數(shù)據(jù)哗总。使用的服務器端技術為.NET.在.NET中新建一個普通的histogram.ashx頁面几颜，首先需要定義一個series類，設置series序列的基本屬性name讯屈、type蛋哭、data，data為數(shù)組因此定義為List<>List數(shù)據(jù)類型根據(jù)需要可以定義為double涮母，string具壮。
/// <summary>
///定義一個Series類，設置其每一組的一些基本屬性
/// </summary>
///
class Series
{
public string name
{
get;
set;
}
public string type
{
get;
set;
}
public List<double> data
{
get;
set;
}
}
Step3:定義一個函數(shù)ShowChart()哈蝇，實例化一個Series類棺妓，并將其轉(zhuǎn)化為JSON格式數(shù)據(jù)，需要添加引用Newtonsoft.Json.dll炮赦。
private void ShowChart()
{
/*Series序列數(shù)據(jù)*/
List<Series> seriesList = new List<Series>();
Series series1 = new Series();
series1.name = "蒸發(fā)量";
series1.type = "bar";
series1.data = new List<double>() { 22, 55, 63,44,15,45,60,10,50 };
Series series2 = new Series();
series2.name = "降雨量";
series2.type = "line";
series2.data = new List<double>() { 10, 50, 24, 53, 40, 30, 10, 52, 22 };
Series series3 = new Series();
series3.name = "溫度";
series3.type = "line";
series3.data = new List<double>() { 5, 6, 4, 2, 8, 10, 0, 21, 20, 15, 12 };
Series series4 = new Series();
series4.name = "Temperature";
series4.type = "bar";
series4.data = new List<double>() { 8, 6, 8, 1, 2, 8, 3, 12, 5, 8, 15 };
seriesList.Add(series1);
seriesList.Add(series2);
seriesList.Add(series3);
seriesList.Add(series4);
var newObj = new
{
//返回給前端頁面的數(shù)據(jù)
series = seriesList,
xAxis = xData
};
string strJson = ToJson(newObj);
WriteJson(strJson);
}
public static string ToJson(object obj)
{
return NewtosoftJson(obj);
}
public static string NewtosoftJson(object obj)
{
return Newtonsoft.Json.JsonConvert.SerializeObject(obj,Newtonsoft.Json.Formatting.None);
}
public static void WriteJson(string str)
{
HttpContext.Current.Response.Write(str);
HttpContext.Current.Response.End();
}
public bool IsReusable {
get {
return false;
}
}
Step4:前端使用Ajax獲取數(shù)據(jù)怜跑。在<script></script>標簽中添加
$.ajax({
type: 'post', //發(fā)送請求類型為POST
url: 'histogram.ashx?action=ShowChart', //請求頁面的URL，此頁面即為上面所述提供JSON數(shù)據(jù)的頁面吠勘，傳遞參數(shù)ShowChart性芬，后臺解析并調(diào)用相應的函數(shù)
data: {},
dataType: 'json', //請求數(shù)據(jù)類型為JSON
async: true, //是否為異步加載，true為異步剧防，false為同步
success: function (result) { //請求成功：result為后臺返回數(shù)據(jù)
if (result) {
option.series = result.series;//將得到的數(shù)據(jù)賦值給option的Series屬性
myChart.setOption(option);
}
},
error: function () { //請求失敗
alert("Error");
}
});
Step5:服務器端接收Http請求并響應,.NET中提供了IHttpHandler接口植锉，允許對Http請求行編程，重寫ProcessRequest方法峭拘，HttpContext是一個重要的上下文對象俊庇，這里為請求中傳遞的參數(shù)ShowChart，在此方法中進行解析鸡挠，并調(diào)用相應的函數(shù)進行處理辉饱，并將返回數(shù)據(jù)。
public class histogram : IHttpHandler {
public void ProcessRequest (HttpContext context) {
string action = context.Request.QueryString["action"];
switch (action)
{
case "ShowChart":
ShowChart();break;
}
}
//此處應為上述中ShowChart()函數(shù)代碼以及類的定義
}
然后就大功告成了拣展，屬性xAxis彭沼、yAxis等中的數(shù)據(jù)也可以以同樣的方式進行獲取。在本例中數(shù)據(jù)從前臺轉(zhuǎn)移到了后臺代碼中备埃，如果需要存儲數(shù)據(jù)的數(shù)據(jù)庫中有選擇性的獲取姓惑，.NET連接數(shù)據(jù)庫，讀取數(shù)據(jù)返回即可按脚。
最后上圖
很重要的備注：
參考博客：萬水千山走遍
網(wǎng)址：ECharts官網(wǎng)
