echarts+asp.net实现饼图的例子

1、服务端获取数据：

private void GetCategoryByYear_Pie(string sYear,HttpContext context)
        {
   List lstPieSeries = new List();
   List lstNames = new List();
   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.htm = htm&(newObj.ToJson());
   context.Response.End();
}

其中用到了一个PieSeries类：

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;
      }
2、前端页面:

html

js的ajax调用服务端，并传入参数：

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: 18
       }
   },
   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: 0,
  itemStyle: {
      normal: {
 label: {
     show: true, position: 'outer',
     formatter: '{b} : {c} ({d}%)',
 }
      }
  },
  emphasis: {
      shadowBlur: 10,
      shadowOffsetX: 0,
      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[0].data = result.pieSeries;
  myChart.hideLoading();
  myChart.setOption(options);
       }
   },
   error: function (errorMsg) {
       //alert("Failed!");
   }
        });
        myChart.hideLoading();
}