由于項目需要在首頁搞一個訂單數(shù)量的走勢圖狸捕，經(jīng)過多方查找喷鸽，體驗，感覺ECharts不錯灸拍，封裝的很細做祝，我們只需要看自己需要那種類型的圖表，搞定好自己的json數(shù)據(jù)就OK鸡岗。至于說如何體現(xiàn)出來混槐，官網(wǎng)的教程很詳細。大家可以去看下轩性。大概了解下用法就OK声登。
百度ECharts 3：http://echarts.baidu.com/index.html
其實還有很多，可以到官網(wǎng)中找揣苏。
下面是我進行操作的步奏悯嗓，大家可以看下，做個參考卸察。
ECharts初體驗—01...
需要到官網(wǎng)下載最新的版本的js文件(完整版)脯厨，其實只有一個，但是你要想出來一些好看的效果就應(yīng)該把主題也下載好坑质。
地址：http://echarts.baidu.com/download.html
其實只需要4步就OK合武。
：劃分一塊區(qū)域用來顯示圖形；
：初始化echart插件涡扼；
：填充option中的數(shù)據(jù)data;
：加載稼跳，裝配數(shù)據(jù)到echart。
這樣就OK了吃沪。其實最難的不是使用汤善，而是如何將這個插件和自己的后臺聯(lián)系起來，比如數(shù)據(jù)應(yīng)該展示那些巷波，如何將數(shù)據(jù)json化之后傳遞過來萎津。如何實現(xiàn)異步等……
ECharts初體驗—02...
下面是MVC中一個簡單的頁面,只是為了將圖表先展示出來。
/// <summary>
/// 折線圖
/// </summary>
/// <returns></returns>
public ActionResult Index()
{
return View();
}
<h2>Index</h2>
<div id="main" style="width: 600px;height:400px;"></div>
@*引人外部JS文件抹镊，下面的vintage,dark是主題。*@
<script src="~/Scripts/echarts/echarts.js"></script>
<script src="~/Scripts/echarts/vintage.js"></script>
<script src="~/Scripts/echarts/dark.js"></script>
<script>
//第一步荤傲；
var myChart = echarts.init(document.getElementById('main'), 'dark'); //這就樣
//第二步垮耳；
var option = {
title: {
text: '堆疊區(qū)域圖'
},
//氣泡提示框，呈現(xiàn)更詳細的數(shù)據(jù)。
tooltip: {
trigger: 'axis'
},
//圖例终佛，表述數(shù)據(jù)和圖表的關(guān)聯(lián)
legend: {
data: ['郵件營銷']
},
//輔助工具箱俊嗽，如添加標線，框選縮放.
toolbox: {
feature: {
saveAsImage: {}
}
},
//用于定義直角系的布局铃彰。
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
//坐標系中的X軸--類目錄
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ["2016-10-12", "2016-10-13", "2016-10-14", "2016-10-15", "2016-10-16", "2016-10-17", "2016-10-18", "2016-10-19", "2016-10-20", "2016-10-21", "2016-10-22", "2016-10-23", "2016-10-24", "2016-10-25", "2016-10-26"]
}
],
//坐標系中的Y軸--數(shù)據(jù)值
yAxis: [
{
type: 'value'
}
],
//數(shù)據(jù)列表绍豁，一個圖表可能包含多個系列，每一個系列可能包含多個數(shù)據(jù)牙捉。格式為json的形式竹揍。
series: [
{
name: '郵件營銷',
type: 'line',
stack: '總量',
areaStyle: { normal: {} },
label: {
normal: {
show: true,
position: 'top'
}
},
data: [23, 45, 23, 11, 222, 234, 12, 34, 37, 50, 23, 45, 23, 11, 222]
}
]
};
//第三步 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
</script>
其中的每一步都有解釋邪铲，每一個名詞都有各自的意義芬位，大家可以了解下。至于每一個data带到，都是使用靜態(tài)的json昧碉，后面會從后臺傳遞數(shù)據(jù)。下面是這個的效果揽惹。
ECharts初體驗—03...
其實上面的數(shù)據(jù)都是靜態(tài)的被饿，很好的實現(xiàn)。但是對于我們實際的項目中都是從數(shù)據(jù)庫中取到的數(shù)據(jù)搪搏，不可能是靜態(tài)的狭握，此時我們就需要將其json化，進行一定的轉(zhuǎn)換慕嚷。把數(shù)據(jù)從后面?zhèn)鬟f到前臺哥牍，在進行操作。
dataList類
public class DateList
{
public IList<string> datetime { get; set; }
public IList<int> ordernumber { get; set; }
}
控制器Controller
[HttpGet]
public ActionResult ZhiXian()
{
return View();
}
[HttpPost, ActionName("ZhiXian")]
public ActionResult ZhiXianPost()
{
var listData = new List<string>();
var datetimes = DateTime.Now.AddDays(1);
for (int i = 1; i <=15; i++)
{
listData.Add(datetimes.AddDays(-i).ToString("yyyy-MM-dd"));
}
listData.Reverse();
var aa = new int[] { 23, 45, 23, 11, 222, 234, 12, 34, 37, 50, 23, 45, 23, 11, 222 };
var data = new DateList()
{
datetime = listData,
ordernumber = aa,
};
return Json(new{status=1,result=data});
}
視圖View
<h2>ZhiXian</h2>
<div id="main" style="width: 800px;height:400px;"></div>
@*引人外部JS文件*@
<script src="~/Scripts/echarts/echarts.js"></script>
<script src="~/Scripts/jquery-2.1.4.js"></script>
<script src="~/Scripts/echarts/vintage.js"></script>
<script src="~/Scripts/echarts/roma.js"></script>
<script>
// 基于準備好的dom喝检，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'), 'roma'); //這就
$.post("/Home/ZhiXian", function (response) {
if (response.status == 1) {
console.log(response.result.datetime);
console.log(response.result.ordernumber);
var option = {
title: {
text: '近10天訂單數(shù)量分析圖'
},
//氣泡提示框嗅辣，呈現(xiàn)更詳細的數(shù)據(jù)。
tooltip: {
trigger: 'axis'
},
//圖例挠说，表述數(shù)據(jù)和圖表的關(guān)聯(lián)
legend: {
data: ['訂單總量']
},
//輔助工具箱澡谭，如添加標線，框選縮放.
toolbox: {
feature: {
saveAsImage: {}
}
},
//用于定義直角系的布局损俭。
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
//坐標系中的X軸--類目錄
xAxis: [
{
type: 'category',
boundaryGap: false,
data: response.result.datetime
}
],
//坐標系中的Y軸--數(shù)據(jù)值
yAxis: [
{
type: 'value'
}
],
//數(shù)據(jù)列表蛙奖，一個圖表可能包含多個系列，每一個系列可能包含多個數(shù)據(jù)杆兵。格式為json的形式雁仲。
series: [
{
name: '訂單總量',
type: 'line',
stack: '總量',
label: {
normal: {
show: true,
position: 'top'
}
},
areaStyle: { normal: {} },
data: response.result.ordernumber
}
]
};
myChart.clear();
myChart.hideLoading();
//// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
} else {
alert("圖表請求不成功琐脏，請重新請求攒砖。");
}
});
</script>
效果如下：
我們可以發(fā)現(xiàn)顏色和第二個的不一樣缸兔，這個就是我們使用了主題，這個在獲取dom元素的時候標記的吹艇。如下所示惰蜜。
下面是一個餅狀圖的主要option,其余的不變；
myChart.setOption({
series: [
{
name: '訪問來源',
type: 'pie',
radius: '55%',
data: [
{ value: 400, name: '搜索引擎' },
{ value: 335, name: '直接訪問' },
{ value: 310, name: '郵件營銷' },
{ value: 274, name: '聯(lián)盟廣告' },
{ value: 235, name: '視頻廣告' }
]
}
]
});
我一直相信受神，只要我一直走抛猖，就一定可以到達。雖然我不知道要到那里去...
