Baidu開源項目Echarts無論從數據的展現能力，對桌面與智能終端的友好支持，還是在使用的方便性上，慢慢成爲廣大程序員使用圖表展示數據的首選。在使用過程中，也會出現各種坑，而網上找到的大部分資料，都是人云亦云，相互抄來抄去，需要仔細斟酌，才能在萬千資料中找到自己所能用的信息。本文詳細介紹了在ASP.NET中使用ECharts的詳細過程，希望對使用該方法的朋友有所幫助。
一、前端
1、從echarts.baidu.com官網下載最新版的echarts
2、打開一個應用echarts的頁面
3、通過下面語句引入JQuery與Echarts的JS庫。
<script type="text/javascript" src="/Scripts/jquery-2.1.4.js"></script>
<script type="text/javascript" src="/Scripts/echarts.js"></script>
4、在頁面的Body部分，添加一個DIV，用於並給它一個名字，用於後面的JS代碼存取，以放置繪製的圖表
<div id="main" style=" height:400px;">測試數據</div>
在這個DIV中，名稱（id）可以自行定義，但是要跟後面的致，height根據自己的需要自行設定。
5、如下代碼是前臺繪製圖表最主要部分，通過以下幾個步驟實現：
（1）echarts對DIV進行初始化，爲圖表繪製做準備
var myChart = echarts.init(document.getElementById('main'));
echarts.init（）方法對第4部創建的DIV做了初始化，它是EChart內置的方法。
（2）建立參數對象option，爲圖表的繪製指定各種參數與數據，主要包括圖表標題（title）、工具欄（toolbox）、圖例（Legend）、Y座標軸（yAxis）、X座標軸（xAxis）、數據（Series）。其中圖例（Legend）、Y座標軸（yAxis）、X座標軸（xAxis）、數據（Series）可以根據需要指定多個，並且它們可以根據需要在後臺生成。
var options = {
title: {
text: "月工程數據",
},
//右側工具欄
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
tooltip: {
trigger: 'axis'
},
legend: {
data: []
},
calculable: true,
xAxis: [
{
type: 'category',
name: '月份',
data: []
}
],
yAxis: [
{
type: 'value',
name: '金額',
axisLabel: {
formatter: '{value} Y'
},
splitArea: { show: true }
},
{
type: 'value',
name: '工作量',
axisLabel: {
formatter: '{value} M3'
},
splitArea: { show: true }
}
],
series: []
};
（3）使用Ajax讀取後臺數據
$.ajax({
type: "POST",
async: false,
contentType: 'application/json; charset=utf-8', //如果不指定該參數，總是返回跳到error部分，而無法執行success部分
url: "/wsComm.asmx/getdataechart", //調用後臺Webservice
dataType: "json", //返回數據形式爲json
success: function (result) {
var obj = JSON.parse(result.d.Data); //一定要注意大小寫，讓它跟後臺返回的JSON語句中一致。result.d.Data是字串數據，需要重新轉換成JSON
if (result) {
//將返回的category和series對象賦值給options對象內的category和series
//因爲xAxis是一個數組 這裏需要是xAxis[i]的形式
options.yAxis[0].data = obj.value;
options.xAxis[0].data = obj.category;
options.series = obj.series;
options.legend.data = obj.legend;
myChart.hideLoading();
myChart.setOption(options);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.responseText);
}
});
注：Echarts3.X，已經不用Require指定echarts的引用路徑，直接定義option語句，從後臺讀取數據即可。完整代碼如下：
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
//圖表顯示提示信息
myChart.showLoading({
text: "圖表數據正在努力加載..."
});
//定義圖表options
var options = {
title: {
text: "月工程數據",
},
//右側工具欄
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
tooltip: {
trigger: 'axis'
},
legend: {
data: []
},
calculable: true,
xAxis: [
{
type: 'category',
name: '月份',
data: []
}
],
yAxis: [
{
type: 'value',
name: '金額',
axisLabel: {
formatter: '{value} Y'
},
splitArea: { show: true }
},
{
type: 'value',
name: '工作量',
axisLabel: {
formatter: '{value} M3'
},
splitArea: { show: true }
}
],
series: []
};
//通過Ajax獲取數據
$.ajax({
type: "POST",
async: false,
contentType: 'application/json; charset=utf-8',
url: "/wsComm.asmx/getdataechart",
dataType: "json", //返回數據形式爲json
success: function (result) {
var obj = JSON.parse(result.d.Data); //一定要注意大小寫，本語句中，一直把Data寫成data，總是取不出數據，耽誤了半天
if (result) {
//將返回的category和series對象賦值給options對象內的category和series
//因爲xAxis是一個數組 這裏需要是xAxis[i]的形式
options.yAxis[0].data = obj.value;
options.xAxis[0].data = obj.category;
options.series = obj.series;
options.legend.data = obj.legend;
myChart.hideLoading();
myChart.setOption(options);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.responseText);
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
});
</script>
二、創建後臺WebService接口方法
1、創建專門類，存放Series數據
class Series
{
/// series序列組名稱
public string name
{
get;
set;
}
public string type
{
get;
set;
}
/// series序列組呈現對應的Y軸刻度
public int yAxisIndex
{
get;
set;
}
/// series序列組的數據爲數據類型數組
public List<double> data
{
get;
set;
}
}
2、創建Webserice方法，返回JSON數據
（1）下面方法中，使用了Newtonsoft的類庫，進行JSON數據的封裝，所以需要通過Nuget安裝並且導入如下命名空間
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
（2）該方法返回三類數據：categoryList保存X軸數據，LegendList保存圖例數據，seriesList保存Series數據，seriesList保存了兩組數據，從而可以把兩種對比數據顯示在同一張表上。注意LegendList、yAxis、seriesList數據之間的對應關係，否則會出現數據的不致。程序中的代碼已經進行了詳細的說明，其他不再贅述。
{
//考慮到圖表的category是字符串數組 這裏定義一個string的List
List<string> categoryList = new List<string>();
//考慮到Echarts圖表需要設置legend內的data數組爲series的name集合這裏需要定義一個legend數組
List<string> legendList = new List<string>();
//考慮到圖表的series數據爲一個對象數組 這裏額外定義一個series的類
List<Series> seriesList = new List<Series>();
legendList.Add("月支出金額"); //這裏的名稱必須和series的每一組series的name保持一致
legendList.Add("月工作量"); //這裏的名稱必須和series的每一組series的name保持一致
//定義一個Series對象
Series seriesObj = new Series();
//seriesObj.id = 1;
seriesObj.name = "月支出金額";
seriesObj.type = "line"; //線性圖呈現
seriesObj.data = new List<double>(); //先初始化 不初始化後面直直接data.Add(x)會報錯
string[,] ProjectVal = new string[,] { { "201701", "3000" }, { "201702", "7500" }, { "201703", "9500" }, { "201704", "10000" }, { "201705", "12000" }, { "201706", "10050" }, { "201707", "30050" }, { "201708", "7893" }, { "201709", "7312" }, { "2017010", "8905" } };
//設置數據
for(int i=0;i<10;i++)
{
//加入category刻度數組
categoryList.Add(MonthCost[i,0]);
//加入數據值series序列數組 這裏提供爲了效果只提供一組series數據好了
seriesObj.data.Add(Convert.ToDouble(MonthCost[i,1])); //數據依次遞增
}
seriesList.Add(seriesObj);
seriesObj = new Series();
//seriesObj.id = 1;
seriesObj.name = "月工作量";
seriesObj.type = "bar"; //線性圖呈現
seriesObj.yAxisIndex = 1;
seriesObj.data = new List<double>(); //先初始化 不初始化後面直直接data.Add(x)會報錯
//設置數據
for(int i=0;i<10;i++)
{
seriesObj.data.Add(Convert.ToDouble(ProjectVal[i,1])); //數據依次遞增
}
//最後調用相關函數將List轉換爲Json
//因爲我們需要返回category和series、legend多個對象 這裏我們自己在new一個新的對象來封裝這兩個對象
JsonResult json = new JsonResult();
var newObj = new
{
category = categoryList,
series = seriesList,
legend = legendList
};
json.Data = Newtonsoft.Json.JsonConvert.SerializeObject(newObj);
return json;
}
