由於項目需要在首頁搞一個訂單數量的走勢圖，經過多方查找，體驗，感覺ECharts不錯，封裝的很細，我們只需要看自己需要那種類型的圖表，搞定好自己的json數據就OK。至於說如何體現出來，官網的教程很詳細。大家可以去看下。大概瞭解下用法就OK。 百度ECharts 3：http://echarts.b ...
由於項目需要在首頁搞一個訂單數量的走勢圖，經過多方查找，體驗，感覺ECharts不錯，封裝的很細，我們只需要看自己需要那種類型的圖表，搞定好自己的json數據就OK。至於說如何體現出來，官網的教程很詳細。大家可以去看下。大概瞭解下用法就OK。
百度ECharts 3：http://echarts.baidu.com/index.html
其實還有很多，可以到官網中找。
下麵是我進行操作的步奏，大家可以看下，做個參考。
ECharts初體驗—01...
需要到官網下載最新的版本的js文件(完整版)，其實只有一個，但是你要想出來一些好看的效果就應該把主題也下載好。
地址：http://echarts.baidu.com/download.html
其實只需要4步就OK。
1：劃分一塊區域用來顯示圖形；
2：初始化echart插件；
3：填充option中的數據data;
4：載入，裝配數據到echart。
這樣就OK了。其實最難的不是使用，而是如何將這個插件和自己的後臺聯繫起來，比如數據應該展示那些，如何將數據json化之後傳遞過來。如何實現非同步等……
ECharts初體驗—02...
下麵是MVC中一個簡單的頁面,只是為了將圖表先展示出來。
1 /// <summary> 2 /// 折線圖 3 /// </summary> 4 /// <returns></returns> 5 public ActionResult Index() 6 { 7 return View(); 8 }
1 <h2>Index</h2> 2 3 <div id="main" style="width: 600px;height:400px;"></div> 4 @*引人外部JS文件，下麵的vintage,dark是主題。*@ 5 <script src="~/Scripts/echarts/echarts.js"></script> 6 <script src="~/Scripts/echarts/vintage.js"></script> 7 <script src="~/Scripts/echarts/dark.js"></script> 8 <script> 9 //第一步； 10 var myChart = echarts.init(document.getElementById('main'), 'dark'); //這就樣 11 //第二步； 12 var option = { 13 title: { 14 text: '堆疊區域圖' 15 }, 16 //氣泡提示框，呈現更詳細的數據。 17 tooltip: { 18 trigger: 'axis' 19 }, 20 //圖例，表述數據和圖表的關聯 21 legend: { 22 data: ['郵件營銷'] 23 }, 24 //輔助工具箱，如添加標線，框選縮放. 25 toolbox: { 26 feature: { 27 saveAsImage: {} 28 } 29 }, 30 //用於定義直角系的佈局。 31 grid: { 32 left: '3%', 33 right: '4%', 34 bottom: '3%', 35 containLabel: true 36 }, 37 //坐標系中的X軸--類目錄 38 xAxis: [ 39 { 40 type: 'category', 41 boundaryGap: false, 42 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"] 43 } 44 ], 45 //坐標系中的Y軸--數據值 46 yAxis: [ 47 { 48 type: 'value' 49 } 50 ], 51 //數據列表，一個圖表可能包含多個系列，每一個系列可能包含多個數據。格式為json的形式。 52 series: [ 53 { 54 name: '郵件營銷', 55 type: 'line', 56 stack: '總量', 57 areaStyle: { normal: {} }, 58 label: { 59 normal: { 60 show: true, 61 position: 'top' 62 } 63 }, 64 data: [23, 45, 23, 11, 222, 234, 12, 34, 37, 50, 23, 45, 23, 11, 222] 65 } 66 ] 67 }; 68 //第三步 使用剛指定的配置項和數據顯示圖表。 69 myChart.setOption(option); 70 </script>
其中的每一步都有解釋，每一個名詞都有各自的意義，大家可以瞭解下。至於每一個data，都是使用靜態的json，後面會從後臺傳遞數據。下麵是這個的效果。
ECharts初體驗—03...
其實上面的數據都是靜態的，很好的實現。但是對於我們實際的項目中都是從資料庫中取到的數據，不可能是靜態的，此時我們就需要將其json化，進行一定的轉換。把數據從後面傳遞到前臺，在進行操作。
dataList類
1 public class DateList 2 { 3 4 public IList<string> datetime { get; set; } 5 6 public IList<int> ordernumber { get; set; } 7 }
控制器Controller
1 [HttpGet] 2 public ActionResult ZhiXian() 3 { 4 return View(); 5 } 6 [HttpPost, ActionName("ZhiXian")] 7 public ActionResult ZhiXianPost() 8 { 9 var listData = new List<string>(); 10 var datetimes = DateTime.Now.AddDays(1); 11 for (int i = 1; i <=15; i++) 12 { 13 listData.Add(datetimes.AddDays(-i).ToString("yyyy-MM-dd")); 14 } 15 listData.Reverse(); 16 var aa = new int[] { 23, 45, 23, 11, 222, 234, 12, 34, 37, 50, 23, 45, 23, 11, 222 }; 17 var data = new DateList() 18 { 19 datetime = listData, 20 ordernumber = aa, 21 }; 22 return Json(new{status=1,result=data}); 23 }
視圖View
1 <h2>ZhiXian</h2> 2 <div id="main" style="width: 800px;height:400px;"></div> 3 @*引人外部JS文件*@ 4 <script src="~/Scripts/echarts/echarts.js"></script> 5 <script src="~/Scripts/jquery-2.1.4.js"></script> 6 <script src="~/Scripts/echarts/vintage.js"></script> 7 <script src="~/Scripts/echarts/roma.js"></script> 8 <script> 9 // 基於準備好的dom，初始化echarts實例 10 var myChart = echarts.init(document.getElementById('main'), 'roma'); //這就 11 $.post("/Home/ZhiXian", function (response) { 12 if (response.status == 1) { 13 console.log(response.result.datetime); 14 console.log(response.result.ordernumber); 15 var option = { 16 title: { 17 text: '近10天訂單數量分析圖' 18 }, 19 //氣泡提示框，呈現更詳細的數據。 20 tooltip: { 21 trigger: 'axis' 22 }, 23 //圖例，表述數據和圖表的關聯 24 legend: { 25 data: ['訂單總量'] 26 }, 27 //輔助工具箱，如添加標線，框選縮放. 28 toolbox: { 29 feature: { 30 saveAsImage: {} 31 } 32 }, 33 //用於定義直角系的佈局。 34 grid: { 35 left: '3%', 36 right: '4%', 37 bottom: '3%', 38 containLabel: true 39 }, 40 //坐標系中的X軸--類目錄 41 xAxis: [ 42 { 43 type: 'category', 44 boundaryGap: false, 45 data: response.result.datetime 46 } 47 ], 48 //坐標系中的Y軸--數據值 49 yAxis: [ 50 { 51 type: 'value' 52 } 53 ], 54 //數據列表，一個圖表可能包含多個系列，每一個系列可能包含多個數據。格式為json的形式。 55 series: [ 56 { 57 name: '訂單總量', 58 type: 'line', 59 stack: '總量', 60 label: { 61 normal: { 62 show: true, 63 position: 'top' 64 } 65 }, 66 areaStyle: { normal: {} }, 67 data: response.result.ordernumber 68 } 69 ] 70 }; 71 myChart.clear(); 72 myChart.hideLoading(); 73 //// 使用剛指定的配置項和數據顯示圖表。 74 myChart.setOption(option); 75 } else { 76 alert("圖表請求不成功，請重新請求。"); 77 } 78 }); 79 </script>
效果如下：
我們可以發現顏色和第二個的不一樣，這個就是我們使用了主題，這個在獲取dom元素的時候標記的。如下所示。
下麵是一個餅狀圖的主要option,其餘的不變；
1 myChart.setOption({ 2 series: [ 3 { 4 name: '訪問來源', 5 type: 'pie', 6 radius: '55%', 7 data: [ 8 { value: 400, name: '搜索引擎' }, 9 { value: 335, name: '直接訪問' }, 10 { value: 310, name: '郵件營銷' }, 11 { value: 274, name: '聯盟廣告' }, 12 { value: 235, name: '視頻廣告' } 13 ] 14 } 15 ] 16 });
我一直相信，只要我一直走，就一定可以到達。雖然我不知道要到那裡去...
