問題篇(詳解)：http://www.cnblogs.com/hanyinglong/p/4708337.html

1.前言

　　a.在系統開發過程中可能會使用到圖表控件，一個好的圖標控件可以使我們的網站增加很好的動態感和美感以及增加人氣。那么如果我們遇到這種需求的話就需要去找尋圖表控件，我在開發過程中也是用過很多的圖表控件(HighCharts,Charts,ECharts等等),那么下面我就簡單介紹一下這三種插件，代碼實現是：Echarts。

　　　　(1):HighCharts 官網：http://www.highcharts.com/

　　　　(2):Charts 官網：http://www.telerik.com/aspnet-mvc/charts?utm_medium=listings&utm_source=VisualStudioGallery&utm_campaign=dt-MVC-jan2015

　　　　(3):ECharts 官網：http://echarts.baidu.com/

　　b.因為上面三個圖表控件都是基於JavaScript來實現的，所以相對來說對於我們開發人員調用起來也很容易，下載引用，然后查看API，查詢API就能實現需要的功能，那么為什么我這里還要寫一篇博客呢，其實主要還是給大家簡單介紹一下，如果開發人員沒有很多時間去看的話可以直接仿照我的例子去實現，速度可以相對來說比查看API快一點，但是要深入了解還需要查看API中每個方法的屬性和事件，才能真正使用的得心應手。

　　c.ECahrts API地址：http://echarts.baidu.com/doc/doc.html，http://echarts.baidu.com/doc/option.html。

2.准備工作

　　a.首先登錄ECharts 官網：http://echarts.baidu.com/，在導航中可以看到下載按鈕，單擊下拉選擇需要下載的包下載保存到電腦上。

　　b.創建ASP.NET MVC或者ASP.NET 項目，在Scripts文件夾下面創建echarts文件夾。

　　c.解壓下載成功的文件夾之后選擇build或者dist文件夾復制到創建的項目中的Scripts的文件夾下面的echarts文件夾下面。

　　d.項目創建完成之后如圖所示：

3.實現功能：

　　a.本實例實在ASP.NET MVC下面實現的，故我們按照HTML，JS和后端的實現分離將代碼貼出來，大家仔細查看即可。

　　b.ECharts插件依賴於Jquery，所以在引入echarts.js之前需要引入Jquery.js，請注意.

　　c.HTML頁面代碼如下：

 1 @using System.Web.Optimization
 2 
 3 <style type="text/css">
 4     .selectRefreshInfo {
 5         width: 80px;
 6         height: 28px;
 7         margin: 2px 0;
 8     }
 9 </style>
10 
11 <!--展示監控信息-->
12 <div id="main"  style="height: 400px;"></div>
13 <div id="foot_order" style="height: 30px;text-align: center">
14     @Html.DropDownList("Name",ViewBag.SelectList as  IEnumerable<SelectListItem>,new { @class = "selectRefreshInfo",Id="dropDownId" })
15     <span style="color: red">(秒)設置發送時間間隔</span>&nbsp;&nbsp;
16     <input type="button" class="btn btn-primary" value="停止刷新" onclick="Ecarts.BtnStopRefresh()"/>&nbsp;
17     <input type="button" class="btn btn-primary" value="手動刷新" onclick="Ecarts.BtnHandRefresh()"/>
18 </div>
19 
20 @section footerJs
21 {
22     @Scripts.Render("~/Scripts/echarts/build/dist/echarts.js")
23     @Scripts.Render("~/Scripts/Views/orderInfoIndex.js")
24 }

　　d.JS頁面代碼如下：　　

  1 /* 功能:實現讀取數據庫中的需要監控的數據在前端展示，JS操作Echarts插件
  2  * 創建人：Kencery     創建時間：2015-7-30  */
  3 
  4 //初始化加載信息
  5 $(document).ready(function() {
  6     //頁面打開時候的初始化
  7     Ecarts.EcartsReFresh();
  8     //初始化完成之后按照第一個下拉框的時間刷新
  9     Ecarts.SetInterval($("#dropDownId").find("option:selected").text());
 10     //當下拉列表框改變的時候定時執行程序
 11     Ecarts.DropDownChange();
 12 });
 13 
 14 var callUrl = { readDataRefreshChats: "/OrderInfo/ReadDataRefreshChats" };
 15 
 16 //路徑配置
 17 require.config({
 18     paths: { echarts: '/Scripts/echarts/build/dist' }
 19 });
 20 
 21 var lineBar = "bar";   //讀取bar
 22 var interVal;   //最終刪除定時執行程序
 23 var Ecarts = {
 24     EcartsReFresh: function() {
 25         require([//使用線性圖或者柱狀圖加載line和bar模塊，按需加載
 26                 'echarts',
 27                 'echarts/chart/line',
 28                 'echarts/chart/bar'
 29             ], function(orderInfo) {
 30                 var myChart = orderInfo.init(document.getElementById('main')); //初始化Echarts圖標信息     
 31 
 32                 //選擇magicType時間，讀取選擇的是什么圖形
 33                 var ecConfig = require('echarts/config');
 34                 myChart.on(ecConfig.EVENT.MAGIC_TYPE_CHANGED, function(param) {
 35                     if (param.magicType.bar) {
 36                         lineBar = "bar";
 37                     } else {
 38                         lineBar = "line";
 39                     }
 40                 });
 41 
 42                 //發送異步請求從后台讀取Option參數，賦值給Charts對象
 43                 $.getJSON(callUrl.readDataRefreshChats, { lineBar: lineBar, }, function(data) {
 44                     var option = {
 45                         title: {
 46                             text: '訂單號剩余量監控',
 47                         },
 48                         tooltip: {
 49                             show: true,
 50                             trigger: 'axis'
 51                         },
 52                         toolbox: {
 53                             show: true,
 54                             feature: {
 55                                 dataView: { show: true, readOnly: false },
 56                                 magicType: { show: true, type: ['line', 'bar'] },
 57                                 restore: { show: true },
 58                                 saveAsImage: { show: true }
 59                             }
 60                         },
 61                         legend: {
 62                             data: data.Legend
 63                         },
 64                         xAxis: [
 65                             {
 66                                 name: data.XName,
 67                                 type: 'category',
 68                                 data: data.XAxis  //所有日期讀取
 69                             }
 70                         ],
 71                         yAxis: [{
 72                             name: '剩余量',
 73                             type: 'value',
 74                             scale: true,
 75                             precision: 2,
 76                             splitNumber: 12,
 77                             splitArea: { show: true }
 78                         }],
 79                         series: data.SeriesList
 80                     };
 81                     myChart.setOption(option); // 為echarts對象加載數據
 82                 });
 83             });
 84     },
 85     SetInterval: function(dropText) { //定時執行刷新程序
 86         interVal = window.setInterval(function() {
 87             Ecarts.EcartsReFresh();
 88         }, readRefreshSecond(dropText));
 89     },
 90     DropDownChange: function() {
 91         //下拉列表變化刷新事件
 92         $("#dropDownId").change(function() {
 93             clearInterval(interVal);
 94             Ecarts.SetInterval($(this).find("option:selected").text());
 95         });
 96     },
 97     BtnHandRefresh: function() { //手動刷新
 98         Ecarts.EcartsReFresh();
 99     },
100     BtnStopRefresh: function() { //定制定時程序的執行
101         clearInterval(interVal);
102     },
103 };
104 
105 function readRefreshSecond(dropDownId) {
106     return dropDownId * 1000;
107 }

JS實現對Echarts的操作

　　e.后端調用數據庫代碼如下：

 1     /// <summary>
 2         /// 返回監控業務訂單數量的頁面
 3         /// 創建者：Kencery     創建時間：2015-7-31
 4         /// </summary>
 5         public ActionResult Index()
 6         {
 7             ViewBag.Title = "訂單監控";
 8 
 9             //讀取刷新時間的秒數，返回到前台下拉框中顯示
10             List<NameId> refreshTime = CommonInfo.ConvertToList(ConfigHelper.RefreshTime);
11             var selectList = new SelectList(refreshTime, "Id", "Name");
12             ViewBag.SelectList = selectList.AsEnumerable();
13             return View();
14         }
15 
16         /// <summary>
17         /// 讀取數據庫中的數據信息刷新圖表控件,控制前端顯示多少條數據（訂單號數量）
18         /// 創建者：Kencery     創建時間：2015-7-31
19         /// </summary>
20         public ActionResult ReadDataRefreshChats(int skip = 10, string lineBar = "line")
21         {
22             //發送請求讀取數據庫中的數據，進行處理(BLL層處理業務邏輯)
23             var readChats = _orderMonitorDataBll.ReadDataRefreshChats(10, lineBar);
24             return Json(readChats, JsonRequestBehavior.AllowGet);
25         }

控制器中的代碼實現

　　f.實現控制器中的方法如下：　

 1 using System.Collections.Generic;
 2 
 3 namespace Ets.MonitorSystem.Model
 4 {
 5     /// <summary>
 6     /// 構造返回Echarts需要的實體對象
 7     /// 創建者：kencery     創建日期：2015-7-31
 8     /// </summary>
 9     public class EchartQueryInfo
10     {
11         /// <summary>
12         /// 頭標題，顯示所有的標題信息
13         /// </summary>
14         public string[] Legend { get; set; }
15 
16         /// <summary>
17         /// X軸顯示的內容
18         /// </summary>
19         public string[] XAxis { get; set; }
20 
21         /// <summary>
22         /// Y軸顯示的內容
23         /// </summary>
24         public string[] YAxis { get; set; }
25 
26         /// <summary>
27         /// X軸名稱
28         /// </summary>
29         public string XName { get; set; }
30 
31         /// <summary>
32         /// 讀取顯示數據的條線信息
33         /// </summary>
34         public List<Series> SeriesList { get; set; }
35 
36     }
37 
38     /// <summary>
39     /// 讀取集合信息
40     /// </summary>
41     public class Series
42     {
43         /// <summary>
44         /// 名稱，Legend中的集合一一對應
45         /// </summary>
46         public string name { get; set; }
47 
48         /// <summary>
49         /// 類型，顯示樹狀還是線性
50         /// </summary>
51         public string type { get; set; }
52 
53         /// <summary>
54         /// 線性數據的顯示
55         /// </summary>
56         public int[] data { get; set; }
57     }
58 }

實體

 1         /// <summary>
 2         /// 讀取數據庫中的數據信息刷新圖表控件,控制前端顯示多少條數據（訂單號數量）
 3         /// 創建者：Kencery     創建時間：2015-7-31
 4         /// </summary>
 5         /// <param name="skip">顯示多少條數量</param>
 6         /// <param name="lineBar"></param>
 7         /// <returns>返回構造成功的需要給前端展示的圖標信息集合</returns>
 8         public EchartQueryInfo ReadDataRefreshChats(int skip, string lineBar)
 9         {
10             //從Web.Config中讀取Legend信息，然后作為參數查詢后面的值信息
11             List<NameId> listNameId = CommonInfo.ConvertToListInfo(ConfigHelper.OrderTypeInfo);
12 
13             //讀取Chats中其它需要顯示的信息
14             string[] xAxis;
15             string xName;
16             var listSeries = ReadDataInfo(skip, listNameId, lineBar, out xAxis, out xName);
17 
18             //構造實體對象，讀取所有需要讀取的信息，將讀取數據的所有方法封裝到方法外面實現
19             var echartQueryInfo = new EchartQueryInfo
20             {
21                 Legend = listNameId.Select(c => c.Name).ToArray(),
22                 XAxis = xAxis,
23                 XName = xName,
24                 SeriesList = listSeries
25             };
26             return echartQueryInfo;
27         }
28 
29         /// <summary>
30         /// 讀取Chat中的橫坐標和展示數據的信息
31         /// 創建者：Kencery     創建時間：2015-7-31
32         /// </summary>
33         /// <param name="skip">顯示多少條數量</param>
34         /// <param name="nameIds">限制查詢的類型</param>
35         /// <param name="lineBar"></param>
36         /// <param name="xAxis">X軸的數據</param>
37         /// <param name="xName">X軸坐標名稱</param>
38         /// <returns>返回需要展示的數據(Echat圖表信息)</returns>
39         private List<Series> ReadDataInfo(int skip, List<NameId> nameIds, string lineBar, out string[] xAxis,
40             out string xName)
41         {
42             //查詢數據庫，構造需要查詢的數據展示出來
43             var data = _dal.ReadDataRefreshChats(skip, nameIds);
44 
45             //首先循環對象
46             var listSeries = nameIds.Select(nameId => new Series
47             {
48                 name = nameId.Name,
49                 type = lineBar,
50                 data = data.Where(c => c.OrderType == nameId.Id).Select(c => c.OrderNumber).ToArray()
51             }).ToList();
52 
53             //處理時間的顯示YY "
54             xAxis = data.Where(c => c.OrderType == nameIds[0].Id).Select(c => c.MonitorDate.ToString("HH:mm")).ToArray();
55             var dataFirst = data.FirstOrDefault();
56             xName = dataFirst == null
57                 ? DateTime.Now.ToString("yyyy-MM-dd")
58                 : dataFirst.MonitorDate.ToString("yyyy-MM-dd");
59             return listSeries;
60         }

業務邏輯層代碼

1     <!--RefreshTime  刷新時間的的限制配置-->
2     <add key="RefreshTime" value="2,5,7,10,20,30,40,100,200,500" />
3     <!--RefreshTime  監控對象-->
4     <add key="OrderTypeInfo" value="1:外賣,2:堂食,3:當面付,4:訂台,5:排隊"/>

Web.Config中appSettings下代碼的設置

 1         /// <summary>
 2         /// 按，分隔的字符串換成List對象
 3         /// </summary>
 4         ///  創建者：Kencery    創建時間：2015-7-29
 5         public static List<NameId> ConvertToList(string refreshTime, char split = ',')
 6         {
 7             var strSplit = refreshTime.Split(new[] {split});
 8             List<NameId> list = strSplit.Select((t, i) => new NameId()
 9             {
10                 Id = i + 1,
11                 Name = t
12             }).ToList();
13             return list;
14         }
15 
16         /// <summary>
17         /// 轉換讀取Web.Config中的字符串，轉換成List集合
18         ///  創建者：Kencery    創建時間：2015-7-29
19         /// </summary>
20         public static List<NameId> ConvertToListInfo(string str, char split = ',', char splitTwo = ':')
21         {
22             var strSplits = str.Split(new[] {split});
23             //循環集合添加List對象
24 
25             //循環處理分隔字符串轉換成Liststring
26             return strSplits.Select(strSplit => strSplit.Split(new[] {splitTwo})).Select(strS => new NameId
27             {
28                 Id = Convert.ToInt32(strS[0]),
29                 Name = strS[1]
30             }).ToList();
31         }
32 
33         /// <summary>
34         /// 讀取刷新時間的的限制配置
35         /// </summary>
36         public static string RefreshTime
37         {
38             get
39             {
40                 return ConfigurationManager.AppSettings["RefreshTime"] ?? "10";
41             }
42         }
43 
44         /// <summary>
45         /// 讀取web.Config中需要監控的對象
46         /// </summary>
47         public static string OrderTypeInfo
48         {
49             get
50             {
51                 return ConfigurationManager.AppSettings["OrderTypeInfo"] ?? "1:外賣";
52             }
53         }

Common代碼中對Web.Config中讀取的信息的處理

 1   /// <summary>
 2         /// 讀取數據庫中的數據信息刷新圖表控件,控制前端顯示多少條數據（訂單號數量）
 3         /// 創建者：Kencery     創建時間：2015-7-31
 4         /// </summary>
 5         /// <param name="skip">顯示多少條數量</param>
 6         /// <param name="nameIds">構造SQL語句的靈活控制</param>
 7         /// <returns>返回構造成功的需要給前端展示的圖標信息集合</returns>
 8         public List<OrderMonitorDataModel> ReadDataRefreshChats(int skip, List<NameId> nameIds)
 9         {
10             //構造SQL語句 
11             var sb = new StringBuilder();
12             sb.Append(
13                 "SELECT OrderNumber,OrderType,MonitorDate FROM  (SELECT TOP " + skip +
14                 " OrderNumber,OrderType,MonitorDate FROM MonitorData_Order WHERE MonitorType=" +
15                 (int) MonitorType.One + " AND OrderType=" + nameIds[0].Id + " ORDER BY MonitorDate DESC ");
16             for (int i = 1; i < nameIds.Count(); i++)
17             {
18                 sb.Append(
19                     "UNION ALL SELECT TOP " + skip +
20                     " OrderNumber,OrderType,MonitorDate FROM MonitorData_Order WHERE MonitorType= " +
21                     (int) MonitorType.One + "AND OrderType=" + nameIds[i].Id + "  ORDER BY MonitorDate DESC ");
22             }
23             sb.Append(") AS TEMP");
24 
25             using (_db)
26             {
27                 var queryInfo = _db.Query<OrderMonitorDataModel>(sb.ToString()).ToList();
28                 return queryInfo;
29             }
30         }

數據庫操作業務代碼

4.數據庫和實現頁面的圖片展示：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 圖表控件Tchart的使用總結 Vue怎么使用Echarts創建圖表在Html中使用echarts圖表 ECharts學習總結(一):ECharts的第一個圖表基於MVC4+EasyUI的Web開發框架經驗總結（4）--使用圖表控件Highcharts 【重點突破】—— Echarts圖表的介紹和使用圖表插件使用匯總（echarts，highchairts）使用chart和echarts制作圖表 Vue使用vue-echarts圖表【vue】echarts圖表使用方法