前台:
<script src="Scripts/jquery-1.6.2.min.js"></script>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
var json = [];
var myChart;
//ajax动态获取数据
$.ajax({
type: 'post',
url: 'PieHandler.ashx',
dataType: 'json',
async: false,
success: function (result) {
//alert(result);
json = result;
},
error: function () {
alert("Error");
}
});
// 使用
require(
[
'echarts',
'echarts/chart/pie' // 使用柱状图就加载pie模块,按需加载
],
function (ec) {
// 基于准备好的dom,初始化echarts图表
myChart = ec.init(document.getElementById('main'));
var option = {
title: {
text: '部门人口比例',
subtext: '测试数据',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: ['业务部', '财务部', '事业部', '质量部', '研发部','市场部','人事部']
},
calculable: true,
series: [
{
name: '2017年',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: json
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
<div id="main" style="height:400px;width:800px;"></div>
后台:
public void ProcessRequest(HttpContext context)
{
//声明并实例化datatable
DataTable dt = new DataTable();
//实例化二个列
DataColumn dc1 = new DataColumn("value", System.Type.GetType("System.Int32"));
DataColumn dc2 = new DataColumn("name", System.Type.GetType("System.String"));
dt.Columns.Add(dc1);
dt.Columns.Add(dc2);
//添加四条数据
DataRow row = dt.NewRow();
row["value"] = "13";
row["name"] = "业务部";
dt.Rows.Add(row);
row = dt.NewRow();
row["value"] = "7";
row["name"] = "财务部";
dt.Rows.Add(row);
row = dt.NewRow();
row["value"] = "20";
row["name"] = "事业部";
dt.Rows.Add(row);
row = dt.NewRow();
row["value"] = "15";
row["name"] = "质量部";
dt.Rows.Add(row);
row = dt.NewRow();
row["value"] = "30";
row["name"] = "研发部";
dt.Rows.Add(row);
row = dt.NewRow();
row["value"] = "10";
row["name"] = "市场部";
dt.Rows.Add(row);
row = dt.NewRow();
row["value"] = "5";
row["name"] = "人事部";
dt.Rows.Add(row);
string json2 = FormatToJson.ToJson(dt);
context.Response.Write(json2);
}