Question

怎么样让ECharts从后台获取数据并展示

Answer 1

html代码：
放2个div，取个id就行。引用写好的js。

<div>
<div class="case_type">
<div class="pie_chart_name">测试类型</div>
<div id="div_pieCategory" style="height:210px;
width: 300px; float: left;" class="pie_chart_img">
</div>
</div>
<div class="case_date">
<div id="div_bar" style="height:210px; width: 300px; float: left;">
</div>
</div>
</div>
<input id="hid_category" type="hidden" value="" />
<input id="hid_state" type="hidden" value="" />
<input id="hid_date" type="hidden" value="" />
</form>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/esl.js"></script>
<script src="BusinessJs/echarts.js"></script>

echarts代码：
1、在BusinessJs/echarts.js中引用echarts及zrender：

require.config({
packages: [
{
name: 'echarts',
location: './echarts/src',
main: 'echarts'
},
{
name: 'zrender',
location: './zrender/src',// zrender与echarts在同一级目录
main: 'zrender'
}
]
});
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/pie'
],
function (ec) {
var myChart_Category = ec.init(document.getElementById('div_pieCategory'));
var myChart_Bar = ec.init(document.getElementById('div_bar'));

SetTestStatisticsByCategory(ec, myChart_Category);
SetTestStatisticsByBeginTime(ec, myChart_Bar);
//设置点击事件
var ecConfig = require('echarts/config');
myChart_Category.on(ecConfig.EVENT.PIE_SELECTED, function (param) {
var selected = param.selected;
//debugger;
var serie
serie = optionpie_category.series[0];
if (jQuery.inArray(true, selected[0]) > -1) {
for (var i = 0; i < serie.data.length; i++) {
if (selected[0][i]) {
$("#hid_category").val(serie.data[i].name);
GetTestList(serie.data[i].name);
}
}
}
else {
$("#hid_category").val("");
}

})

myChart_Bar.on(ecConfig.EVENT.CLICK, function (param) {
var selected = param;
var xAxis;
xAxis = optionpie_bar.xAxis[selected.seriesIndex];
for (var i = 0; i < xAxis.data.length; i++) {
if (i == selected.dataIndex) {
if ($("#hid_date").val() != xAxis.data[i]) {
$("#hid_date").val(xAxis.data[i]);
} else {
$("#hid_date").val("");
}
GetTestList(xAxis.data[i]);
}
}
})
}
)

2、使用jquery ajax获取数据并绑定：

//获取测试类型统计数据
function GetTestStatisticsByCategory() {
$.ajax({
type: "post",
dataType: "text", traditional: true,
data: { oper: "bycategory" },
url: AjaxUrl,
async: false,//表示同步执行
success: function (data, textStatus) {
if (data != null) {

if (data) {
datapie_category = eval('(' + data + ')');
}
else {
alert("获取测试类型统计数据失败！");
}
}
},
complete: function (XMLHttpRequest, textStatus) { },
error: function (e) {

alert("获取测试类型统计数据失败，请刷新页面重新加载！");
}
});
}

3、ashx后台代码：

组织好字符串返回就行。完全按照这个格式来。

public class test : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string Test = CustomResponse.GetResponse("lc");
string categroy = CustomResponse.GetResponse("cl");
string oper = CustomResponse.GetResponse("oper");
string condition = CustomResponse.GetResponse("cd");
string id = CustomResponse.GetResponse("id");
switch (oper)
{

case "bycategory":
GetTestStatisticsByCategory(context);//按照测试类型统计
break;
case "bystate":
GetTestStatisticsByState(context);//按照测试状态统计
break;
case "bybegintime":
GetTestStatisticsByBeginTime(context);//按照月份统计数据
break;
default:
break;
}
}
/// <summary>
/// 按照测试类型统计
/// </summary>
/// <param name="context"></param>
private void GetTestStatisticsByCategory(HttpContext context)
{
string returnvalue = "[{ value:33,name:'其他'},
{ value:52,name:'测试类型1'},{ value:36,name:'测试类型12'},
{ value:31,name:'测试类型222121'}]";

context.htm = htm&(returnvalue);
context.Response.End();
}
/// <summary>
/// 按照测试状态统计
/// </summary>
/// <param name="context"></param>
private void GetTestStatisticsByState(HttpContext context)
{
string returnvalue = "";

context.htm = htm&(returnvalue);
context.Response.End();
}
/// <summary>
/// 按照月份统计
/// </summary>
/// <param name="context"></param>
private void GetTestStatisticsByBeginTime(HttpContext context)
{
string returnvalue = "['2014-1','2014-2','2014-3','2013-4',
'2014-4','2013-5'];[2,10,25,1,8,1]";
context.htm = htm&(returnvalue);
context.Response.End();
}
public bool IsReusable
{
get
{
return false;
}
}
}