利用c#+jquery+echarts生成統計報表（附源代碼）

2019-11-17 01:35:01

字體：大中小

來源：轉載

供稿：網友

利用c#+jquery+echarts生成統計報表（附源代碼）

背景：

因為最近項目要生成報表，經過幾輪挑選，最終選擇了百度的echarts作為報表基礎類庫。百度echarts簡介請參考http://echarts.baidu.com/雖然echarts功能強大，界面優美，

但是使用起來非常繁瑣。本文在參考星星之火116寫的“Echarts使用心得總結”基礎上，進一步對JS進行封裝。使得其更具有通用性。

（1）解決方案布局

整個解決方案如下圖（VS2010+.NET4.0）。

唯一需要說明的是javascript文件夾下的JS庫，其中jquery-1.8.3是juqery庫。 echarts是百度echarts庫。MyEcharts.js是在“星星之火”代碼的基礎上修改的自定義類庫。

WapCharts.js是自定義的JS庫。

（2）建立數據庫

報表數據通常都是從數據庫里獲取，這里我們使用了微軟SQLCE一個桌面版數據庫。打開lists表，其中數據如下

（3)讀寫數據

bin文件夾引入System.Data.SqlServerCe.dll。然后完全可以類似讀寫MSSQL數據庫一樣，完成對CE數據庫的讀寫。

其中，需要注意CE數據庫連接的寫法，因為CE數據庫是一個本地數據庫，所以，直接用Data Source制定sdf的具體地址即可。

 string con = @"Data Source='" + System.Web.HttpContext.Current.Server.MapPath("~/app_data/chartdb.sdf") + "'";

下面代碼顯示了如何獲取餅形數據。

    public void GetPie(HttpContext context)        {            string sql = @"  select categoryname as name, count(*) as count from lists group by categoryname";            ds = GetData(sql);                       lists = new List<object>();             foreach (DataRow dr in ds.Tables[0].Rows)            {                var obj = new { name = dr["name"], value = dr["count"] };                lists.Add(obj);             }             jsS = new JavascriptSerializer();             result = jsS.Serialize(lists);             context.Response.Write(result);                }     public DataSet GetData(string sql)    {         ds = new DataSet();        da = new SqlCeDataAdapter(sql, con);        da.Fill(ds);        return ds;        }

在上面代碼里，使用了

jsS = new JavaScriptSerializer();

用于把數據序列號為JSON。

這樣如果瀏覽handler.ashx，通過傳遞cmd不同的參數，就可以返回不同的JSON數據

（4)生成pie報表（餅形圖）

echarts需要一個容器來存放數據，通常，會是一個div，所以，我們定義一個div

     <div id="echart" style="width:100%; height:400px;"></div>

我們需要在JQuery的ready事件里，調用數據庫數據，并在回調函數里，調用DrawPie生產餅形圖。

DrawPie第一個參數是回調值，第二個參數是div的id。

Ajax的async設置為false是因為需要同步調用。

         <script type="text/javascript">           $(document).ready(           function () {                            $.ajax({                  url: "ajax/Handler.ashx",                  data:{cmd:"pie"},                  cache: false,                  async: false,                  dataType: 'json',                  success: function (data) {                      if (data) {                          DrawPie(data,"echart");                      }                  },                  error: function (msg) {                      alert("系統發生錯誤");                  }              });          });                                 </script>

這樣，就完成了pie報表的生成。

（5)生成bar圖形（柱狀圖）

要生成bar圖像，只要修改2處即可：（1）ajax傳遞參數cmd為bar。（2）回調返回DrawBar。

     <div id="echart" style="width:100%; height:400px;"></div>          <script type="text/javascript">             $(document).ready(          function () {              $.ajax({                  url: "ajax/Handler.ashx",                  data: { cmd: "bar" },                  cache: false,                  async: false,                  dataType: 'json',                  success: function (data) {                      if (data) {                          DrawBar(data, "echart");                      }                  },                  error: function (msg) {                      alert("系統發生錯誤");                  }              });          });                                 </script>

（6）運行效果

你可以下載源代碼，運行看到效果（一個是bar.aspx頁面，一個是pie.aspx頁面）