Echarts圖表學習

時間 2019-12-11

標籤 echarts 圖表學習简体版

原文原文鏈接

最近項目已經運行的比較穩定了，正巧看到ECcharts的圖標很炫，遂作一個玩玩，以備後面作數據分析使用。javascript

官網地址：http://echarts.baidu.com/index.htmlhtml

大體瞭解了下Echarts的各個實例，發現使用起來仍是簡單易上手的。java

利用數據庫裏面的出入庫數據作一個年度的出入庫折線圖。（這裏的Echarts-darkTheme.js是用了官網的一個dark主題皮膚）jquery

<!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>

後端取數據ajax

 #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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。