Echarts学习笔记之饼图

注：ECHarts的相关文件请到ECharts官网下载，下载地址：http://echarts.baidu.com/download.html

1.前台

1   <div style="align-content:center;">
2                 <div id="pieCategoryChart" class='<%# IsMobile?"w98p":"w49p fLeft" %>' style="height: 420px;border: 1px solid #d8d8d8;margin-top: 14px;"></div>
3                 </div>
View Code

 2.JavaScript

1 <script src='<%= Application["rootURL"] %>JS/static/echarts/echarts.js'></script>
 1  function DrawCategoryPie(YEAR) {
 2              var myChart = echarts.init(document.getElementById('pieCategoryChart'));
 3                  myChart.showLoading({
 4                      text: "Unload..."
 5                  });
 6                  var options = {
 7                      title: {
 8                          text: 'Category%',
 9                          x: 'center',
10                          textStyle: {
11                              color: '#444',
12                              fontSize: 18
13                          }
14                      },
15                      tooltip: {
16                          trigger: 'item',
17                          formatter: '{b} : {c} ({d}%)',
18                          show: true
19                      },
20                      toolbox: {
21                          show: true,
22                          x: 'right',
23                          y: '<%# IsMobile? "bottom":"top"%>',
24                          feature: {
25                              dataView: { show: true, readOnly: false },
26                              restore: { show: true },
27                              saveAsImage: { show: true }
28                          }
29                      },
30                      series: [
31                          {
32                              name: name || "",
33                              type: 'pie',
34                              radius: '50%',
35                              center: ['50%', '50%'],
36                              startAngle: 0,
37                              itemStyle: {
38                                  normal: {
39                                      label: {
40                                          show: true, position: 'outer',
41                                          formatter: '{b} : {c} ({d}%)',
42                                      } 
43                                  }
44                              },
45                              emphasis: {
46                                  shadowBlur: 10,
47                                  shadowOffsetX: 0,
48                                  shadowColor: 'rgba(0, 0, 0, 0.5)'
49                              },
50                              data: []
51                          }
52                      ]
53                  };
54                  $.ajax({
55                      type: "post",
56                      async: false,
57                      url: 'HttpHandler.ashx',
58                      dataType: "json",
59                      data: { Type: 'yearcategorypie', Year: YEAR},
60                      success: function (result) {
61                          if (result) {
62                              options.series[0].data = result.pieSeries;
63                              myChart.hideLoading();
64                              myChart.setOption(options);
65                          }
66                      },
67                      error: function (errorMsg) {
68                          //alert("Failed!");
69                      }
70                  });
71                  myChart.hideLoading();
72          }
View Code

3.从数据库中取得数据

 1  class PieSeries
 2         {
 3             public int value
 4             {
 5                 set;
 6                 get;
 7             }
 8             public string name
 9             {
10                 set;
11                 get;
12             }
13         }
View Code
1     case "caseyearcategorypie":
2                         {
3                             string sYear = context.Request["Year"];
4                             if (!string.IsNullOrEmpty(sYear))
5                                 GetCaseCategoryByYear_Pie(sYear,context);
6                             break;
7                         }
View Code
 1   private void GetCategoryByYear_Pie(string sYear,HttpContext context)
 2         {
 3 
 4             List<PieSeries> lstPieSeries = new List<PieSeries>();
 5             List<string> lstNames = new List<string>();
 6 
 7             DbProviderFactory dbf = DbProviderFactories.GetFactory();
 8             using (IDbConnection con = dbf.CreateConnection())
 9             {
10                 con.Open();
11                 DataTable dtRecord = new DataTable();
12                 string sSQL;
13                 sSQL = "SELECT ISNULL(CATEGORY,'N/A') Category,CAST(COUNT(1) AS INT) Num FROM vwTEST" + ControlChars.CrLf
14                 + "where DATEPART(yy,CASE_DATE)='" + sYear + "' " + ControlChars.CrLf;
15                 sSQL += "GROUP BY CATEGORY ORDER BY Num;";
16                 using (IDbCommand cmd = con.CreateCommand())
17                 {
18                     cmd.CommandText = sSQL;
19 
20                     using (DbDataAdapter da = dbf.CreateDataAdapter())
21                     {
22                         ((IDbDataAdapter)da).SelectCommand = cmd;
23                         da.Fill(dtRecord);
24                     }
25                 }
26                 foreach (DataRow row in dtRecord.Rows)
27                 {
28                     lstNames.Add(Sql.ToString(row["Category"]));
29                     lstPieSeries.Add(new PieSeries { value = Sql.ToInteger(row["Num"]), name = Sql.ToString(row["Category"]) });
30                 }
31 
32             }
33             var newObj = new
34             {
35                 names = lstNames,
36                 pieSeries = lstPieSeries
37             };
38             context.Response.Write(newObj.ToJson());
39             context.Response.End();
40         }
View Code

 

posted @ 2016-05-16 13:55  emmaKang  阅读(5635)  评论(0)  编辑  收藏  举报