Echarts圖表學習
阿新 • • 發佈：2018-07-31
jquery req sql view mob edi ready olt 自動
最近項目已經運行的比較穩定了，正巧看到ECcharts的圖標很炫，遂做一個玩玩，以備後面做數據分析使用。
官網地址：http://echarts.baidu.com/index.html
大致了解了下Echarts的各個實例，發現使用起來還是簡單易上手的。
利用數據庫裏面的出入庫數據做一個年度的出入庫折線圖。（這裏的Echarts-darkTheme.js是用了官網的一個dark主題皮膚）
<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> <script src="~/Themes/P2Mobile/js/echarts.js"></script> <script src="~/Themes/P2Mobile/js/Echarts-darkTheme.js"></script> <script src="~/Themes/Scripts/jquery-1.8.2.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $.ajax({ url: "/FRUInventoryBarCodeMobile/AnalysisInboundData_GetSoruceData", type: "POST", data: { }, datatype: "json", success: function (data) {if (data.msgType == "success") { var dom = document.getElementById("container"); var myChart = echarts.init(dom, ‘dark‘); var app = {}; option = null; option = { title: { text: ‘本年度進出庫存分析‘ }, tooltip: { trigger: ‘axis‘ }, legend: { data: [‘收貨數量‘, ‘出貨數量‘] }, grid: { left: ‘3%‘, right: ‘4%‘, bottom: ‘3%‘, containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: ‘category‘, boundaryGap: false, data: data.Months, name: "月份" }, yAxis: { type: ‘value‘, name: "EA數" }, series: [ { name: ‘收貨數量‘, type: ‘line‘, stack: ‘總量‘, data: data.ReceiveData }, { name: ‘出貨數量‘, type: ‘line‘, stack: ‘總量‘, data: data.OutboundData } ] }; ; if (option && typeof option === "object") { myChart.setOption(option, true); window.onresize = myChart.resize; } } else if (data.msgType == "error") { layer.open({ content: data.msg , skin: ‘msg‘ , time: 2 //2秒後自動關閉 }); } } }) }) </script> </body> </html>
後端取數據
#region 出入庫大數據分析 public ActionResult AnalysisInboundData() { return View(); } public ActionResult AnalysisInboundData_GetSoruceData() { LogHelper lh = new LogHelper(); if (user != null) { DBConn = user.DBConn.ToString(); } else { return RedirectToAction("Login", "P2Mobile"); } JsonMsg jsmsg = new JsonMsg(); List<string> Months = new List<string>(); List<string> ReceiveData = new List<string>(); List<string> OutboundData = new List<string>(); DataSet ds_ReceiveOut= p2mobile_inventorybarcodeibll.ExecSql(@"SELECT MONTH(wip.CreateDate) 月份 , CAST(SUM(wip.ReceiveEAQty) AS DECIMAL(18,0)) 收貨數量 FROM dbo.WMS_InboundReceivePart wip WHERE DATEDIFF(month, wip.CreateDate, DATEADD(month, -DATEPART(month, GETDATE()) + 1, GETDATE())) < 1 GROUP BY MONTH(wip.CreateDate) ORDER BY MONTH(wip.CreateDate); SELECT MONTH(wo.ShipmentTime) 月份 , CAST(SUM(wo.OrderEAQty) AS DECIMAL(18,0)) 發貨數量 FROM dbo.WMS_Outbound wo WHERE DATEDIFF(month, wo.ShipmentTime, DATEADD(month, -DATEPART(month, GETDATE()) + 1, GETDATE())) < 1 AND ISNULL(wo.ShipmentTime,‘‘)<>‘‘ GROUP BY MONTH(wo.ShipmentTime) ORDER BY MONTH(wo.ShipmentTime);", DBConn); for (int i = 0; i < ds_ReceiveOut.Tables[0].Rows.Count; i++) { Months.Add(ds_ReceiveOut.Tables[0].Rows[i]["月份"].ToString()); ReceiveData.Add(ds_ReceiveOut.Tables[0].Rows[i]["收貨數量"].ToString()); } for (int j = 0; j < ds_ReceiveOut.Tables[1].Rows.Count; j++) { OutboundData.Add(ds_ReceiveOut.Tables[1].Rows[j]["發貨數量"].ToString()); } return Json(new { msgType = JsonMsgType.Success, Months = Months, ReceiveData = ReceiveData, OutboundData = OutboundData }, JsonRequestBehavior.AllowGet); } #endregion
Echarts圖表學習