利用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頁面）

 

（7）后續

    到此已經完成了圖形設計，通過調用DrawBar或者DrawPie方法，就可以生產了報表，你可以進一步對其進行包裝為用戶控件，方便使用

 

（8）源代碼

單擊此處下載本文源代碼

http://files.cnblogs.com/files/mqingqing123/echartsDemo.rar