Echarts学习笔记之饼图

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

1.前台

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

2.JavaScript

 <script src='<%= Application["rootURL"] %>JS/static/echarts/echarts.js'></script>

  function DrawCategoryPie(YEAR) {
              var myChart = echarts.init(document.getElementById('pieCategoryChart'));
                  myChart.showLoading({
                      text: "Unload..."
                  });
                  var options = {
                      title: {
                          text: 'Category%',
                          x: 'center',
                          textStyle: {
                              color: '#444',
                              fontSize:
                          }
                      },
                      tooltip: {
                          trigger: 'item',
                          formatter: '{b} : {c} ({d}%)',
                          show: true
                      },
                      toolbox: {
                          show: true,
                          x: 'right',
                          y: '<%# IsMobile? "bottom":"top"%>',
                          feature: {
                              dataView: { show: true, readOnly: false },
                              restore: { show: true },
                              saveAsImage: { show: true }
                          }
                      },
                      series: [
                          {
                              name: name || "",
                              type: 'pie',
                              radius: '50%',
                              center: ['50%', '50%'],
                              startAngle: ,
                              itemStyle: {
                                  normal: {
                                      label: {
                                          show: true, position: 'outer',
                                          formatter: '{b} : {c} ({d}%)',
                                      }
                                  }
                              },
                              emphasis: {
                                  shadowBlur: ,
                                  shadowOffsetX: ,
                                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                              },
                              data: []
                          }
                      ]
                  };
                  $.ajax({
                      type: "post",
                      async: false,
                      url: 'HttpHandler.ashx',
                      dataType: "json",
                      data: { Type: 'yearcategorypie', Year: YEAR},
                      success: function (result) {
                          if (result) {
                              options.series[].data = result.pieSeries;
                              myChart.hideLoading();
                              myChart.setOption(options);
                          }
                      },
                      error: function (errorMsg) {
                          //alert("Failed!");
                      }
                  });
                  myChart.hideLoading();
          }

3.从数据库中取得数据

  class PieSeries
         {
             public int value
             {
                 set;
                 get;
             }
             public string name
             {
                 set;
                 get;
             }
         }

     case "caseyearcategorypie":
                         {
                             string sYear = context.Request["Year"];
                             if (!string.IsNullOrEmpty(sYear))
                                 GetCaseCategoryByYear_Pie(sYear,context);
                             break;
                         }

   private void GetCategoryByYear_Pie(string sYear,HttpContext context)
         {

             List<PieSeries> lstPieSeries = new List<PieSeries>();
             List<string> lstNames = new List<string>();

             DbProviderFactory dbf = DbProviderFactories.GetFactory();
             using (IDbConnection con = dbf.CreateConnection())
             {
                 con.Open();
                 DataTable dtRecord = new DataTable();
                 string sSQL;
                 sSQL = "SELECT ISNULL(CATEGORY,'N/A') Category,CAST(COUNT(1) AS INT) Num FROM vwTEST" + ControlChars.CrLf
                 + "where DATEPART(yy,CASE_DATE)='" + sYear + "' " + ControlChars.CrLf;
                 sSQL += "GROUP BY CATEGORY ORDER BY Num;";
                 using (IDbCommand cmd = con.CreateCommand())
                 {
                     cmd.CommandText = sSQL;

                     using (DbDataAdapter da = dbf.CreateDataAdapter())
                     {
                         ((IDbDataAdapter)da).SelectCommand = cmd;
                         da.Fill(dtRecord);
                     }
                 }
                 foreach (DataRow row in dtRecord.Rows)
                 {
                     lstNames.Add(Sql.ToString(row["Category"]));
                     lstPieSeries.Add(new PieSeries { value = Sql.ToInteger(row["Num"]), name = Sql.ToString(row["Category"]) });
                 }

             }
             var newObj = new
             {
                 names = lstNames,
                 pieSeries = lstPieSeries
             };
             context.Response.Write(newObj.ToJson());
             context.Response.End();
         }