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: '',
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();
}