正文
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();
}
