Use c # + jquery + echarts to generate a statistical report (with source code)

Background:

This is because the recent project has to generate reports. After several rounds of selection, Baidu's echarts was finally selected as the basic report class library. Baidu echarts Introduction Please refer to http://echarts.baidu.com/although echarts powerful, beautiful interface,

However, it is very tedious to use. This article further encapsulates JS based on the "Echarts usage experience" written by Spark 116. This makes it more universal.

 

(1) solution Layout

The overall solution is as follows (VS2010 +. NET4.0 ).

The only thing to note is the JS library under the Javascript folder, where the jquery-1.8.3 is the juqery library. Echarts is the Baidu echarts library. MyEcharts. js is a custom class library modified based on the "spark" code.

WapCharts. js is a custom JS library.

 

 

(2) create a database

Report data is usually obtained from the database. Here we use a Microsoft SQLCE desktop database. Open the lists table. The data is as follows:

 

 

 

(3) read and write data

 

The bin folder introduces System. Data. SqlServerCe. dll. Then, you can read and write the CE database just like reading and writing the MSSQL database.

Note the CE database connection method. Because CE database is a local database, you can use Data Source to specify the specific sdf address.

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

 

 

 

The following code shows how to obtain pie data.

    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;        }         

 

In the above Code

jsS = new JavaScriptSerializer();

The data serial number is JSON.

In this way, if handler. ashx is browsed and cmd parameters are passed, different JSON data can be returned.

 

(4) generate a pie report (pie chart)

Echarts requires a container to store data. Generally, it is a div. Therefore, we define a div

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

 

We need to call the database data in the ready event of JQuery, and call the DrawPie production pie chart in the callback function.

The first parameter of DrawPie is the callback value, and the second parameter is the id of the div.

Ajax async is set to false because it needs to be called synchronously.

<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 ("system error") ;}}) ;}); </script>

In this way, the pie report is generated.

(5) generate bar chart (bar chart)

 To generate a bar image, you only need to modify 2 places: (1) ajax passes the cmd parameter to bar. (2) The callback returns 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 ("system error occurred") ;}}) ;}); </script>

(6) Running Effect

You can download the source code and run it to see the effect (one is the bar. aspx page and the other is the pie. aspx page)

 

(7) Follow-up

The graphic design has been completed. by calling the DrawBar or DrawPie method, you can produce reports. You can further package the reports as user controls for ease of use.

 

(8) source code

Click here to download the source code http://files.cnblogs.com/mqingqing123/echartsDemo.rar for this article