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

dotnetcms.org工作室發表於2014-06-10
C#jQueryEcharts原始碼

背景：

因為最近專案要生成報表，經過幾輪挑選，最終選擇了百度的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

 

 

 

 

 

 

 

相關文章