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;
　　}
　　}
　　}