《百度echarts后台交互实例.docx》由会员分享，可在线阅读，更多相关《百度echarts后台交互实例.docx（16页珍藏版）》请在三一办公上搜索。
1、百度echarts后台交互实例百度echarts后台交互实例 先要做的就是下载百度echarts的包，我下载的是echarts-2.2.7，找到build下的dist文件夹，复制里面所有文件到项目中，如下图 下面我们看一下代码 先看前台页面 AnalysisSP.aspx AjaxEcharts.js是写好的echarts于后台交互的代码 在这里需要说的就是需要查询的数据，在前台页面中设置隐藏域，后台对隐藏域进行赋值 例如下面代码是需要分析的条件之一，其他就不一一列举了。 现居住省份 : 全部 下面是AjaxEcharts.js 即echarts于后台交互的代码 $(doc
2、ument).ready(function var myChart; var eCharts; / 路径配置 require.config( paths: echarts: ./Content/assets/scripts/echarts /echarts路径 ); / 使用 require( echarts, /echarts路径 echarts/chart/bar, / 使用柱状图就加载bar模块，按需加载 echarts/chart/line / 使用柱状图就加载bar模块，按需加载 , DrawEChart/异步加载的回调函数绘制图表 ); /创建ECharts图表方法 functio
3、n DrawEChart(ec) eCharts = ec; myChart = eCharts.init(document.getElementById(main); myChart.showLoading( text: 图表数据正在努力加载. ); /定义图表options var options = title: text: 前台咨询登记数据分析, subtext: , tooltip: trigger: axis , legend: data: 初始化数据 , toolbox: show: true, feature: mark: show: true , dataView: show
4、: true, readOnly: false , magicType: show: true, type: line, bar , restore: show: true , saveAsImage: show: true , calculable: true, xAxis: type: category, boundaryGap: false, data: 小学 , yAxis: type: value, axisLabel: formatter: value , splitArea: show: true , grid: width: 90% , series: name: 数量, ty
5、pe: line, data: 0,/必须是Integer类型的,String计算平均值会出错 markPoint: data: type: max, name: 最大值 , type: min, name: 最小值 , markLine: data: type: average, name: 平均值 ; myChart.setOption(options); /先把可选项注入myChart中 myChart.hideLoading; getChartData;/aja后台交互 function getChartData /获得图表的options对象 var options = myChar
6、t.getOption; var hopeAnalyV = $(#hidhopeAnalyV).val; var hopeAnaly = $(#hidhopeAnaly).val; var ddlBranchV = $(#hidDDLBranchV).val; var ddlInfoSourceV = $(#HidddlInfoSourceV).val; var ddlCousultListV = $(#HidddlCousultListV).val; var brlCountryPartRadV = $(#HidbrlCountryPartRadV).val; var ddlAllRecor
7、dDepListV = $(#HidddlAllRecordDepListV).val; var ddlProviceTypeV = $(#HidddlProviceTypeV).val; var rblAllDeptRadV = $(#HidrblAllDeptRadV).val; var HidtxtBeginDate = $(#HidtxtBeginDate).val; var HidtxtEndDate = $(#HidtxtEndDate).val; var HidddlHopCountry = escape($(#HidddlHopCountry).val); var Hidddl
8、CountryGroup = escape($(#HidddlCountryGroup).val); var HidddlCurrentDegree = escape($(#HidddlCurrentDegree).val); var HidddlHopeDegree = escape($(#HidddlHopeDegree).val); var HidddlProvice = escape($(#HidddlProvice).val); /请求的参数 if (hopeAnaly != ) /通过Ajax获取数据 $.ajax( type: post, async: false, /同步执行
9、url: ./Handler/EchartsData.ashx, data: hopeAnalyV: hopeAnalyV, ddlBranchV: ddlBranchV, ddlInfoSourceV: ddlInfoSourceV, ddlCousultListV: ddlCousultListV, brlCountryPartRadV: brlCountryPartRadV, ddlAllRecordDepListV: ddlAllRecordDepListV, ddlProviceTypeV: ddlProviceTypeV, rblAllDeptRadV: rblAllDeptRad
10、V, HidtxtBeginDate: HidtxtBeginDate, HidtxtEndDate: HidtxtEndDate, HidddlHopCountry: HidddlHopCountry, HidddlCountryGroup: HidddlCountryGroup, HidddlCurrentDegree: HidddlCurrentDegree, HidddlHopeDegree: HidddlHopeDegree, HidddlProvice: HidddlProvice , dataType: json,/返回数据形式为json success: function (r
11、esult) var xxlist = ; var yylist = ; for (var i = 0; i result.length; i+) if (resulti.x = ) var patxx = 空; else if (resulti.x = null) var patxx = NULL; else var patxx = resulti.x; var patyy = resulti.y; xxlist.push(patxx); yylist.push( value: patyy, name: patxx ); var hpAnaly = ; if (hopeAnaly != )
12、hpAnaly.push(hopeAnaly); if (result) options.legend.data = hpAnaly;/lengend赋值数据 options.xAxis0.data = xxlist;/x轴赋值数据 options.series0.data = yylist;/y轴赋值数据 myChart.hideLoading; myChart.setOption(options); , error: function (errorMsg) alert(查询数据结果为空!); myChart.hideLoading; ); ); echarts获取的json数据，就是从后台
13、一般处理程序中获取的。 关键代码是 context.Response.Write(new JavaScriptSerializer.Serialize(list); 下面来看一般处理程序,这里传入参数很多，请自动忽略 参数中如果有传入的汉字为乱码时，可以使用标记为汉字的方法context.Server.UrlDecode(） EchartsData.ashx.cs public void ProcessRequest(HttpContext context) context.Response.ContentType = text/plain; #region 参数 string hopeAna
14、lyV = context.RequesthopeAnalyV; string ddlBranchV = context.RequestddlBranchV; string ddlInfoSourceV = context.RequestddlInfoSourceV; string ddlCousultListV = context.RequestddlCousultListV; string brlCountryPartRadV = context.RequestbrlCountryPartRadV; string ddlAllRecordDepListV = context.Request
15、ddlAllRecordDepListV; string ddlProviceTypeV = context.RequestddlProviceTypeV; string rblAllDeptRadV = context.RequestrblAllDeptRadV; string HidtxtBeginDate = context.RequestHidtxtBeginDate; string HidtxtEndDate = context.RequestHidtxtEndDate; /汉字 string HidddlHopCountry = context.Server.UrlDecode(c
16、ontext.RequestHidddlHopCountry); string HidddlCountryGroup = context.Server.UrlDecode(context.RequestHidddlCountryGroup); string HidddlCurrentDegree = context.Server.UrlDecode(context.RequestHidddlCurrentDegree); string HidddlHopeDegree = context.Server.UrlDecode(context.RequestHidddlHopeDegree); st
17、ring HidddlProvice = context.Server.UrlDecode(context.RequestHidddlProvice); #endregion string userid = context.Request.Cookiesuserid.Value; #on PowerStr var powerDept = DB.Context.From .Select(a = a.DepartmentID) .Where(a = a.IsPower = 1 & a.UserID = int.Parse(userid) .ToList; string PowerStr = str
18、ing.Empty; if (powerDept.Count 0) PowerStr = and DepartmentID in (select DepartmentID from tblRecepPower where IsPower=1 and UserID= + userid + ); else PowerStr = ; #endregion #region branchid int userBranchid = 0; string userBranchName = string.Empty; var branchlist = DB.Context.From .Select(a = ne
19、w a.BranchID, a.BranchName ) .Where(a = a.id = int.Parse(userid) .ToList; foreach (var item in branchlist) userBranchid = item.BranchID; userBranchName = item.BranchName; #endregion #region UserBranchStr string UserBranchStr = string.Empty; string ss = ddlBranchV; if (string.IsNullOrEmpty(ss) | ss =
20、 -1) UserBranchStr = and ( BranchID in(select BranchID from tblUserBranch where Flag=1 and FuncID=2 and UserID= + userid + )or BranchID=0 ); else UserBranchStr = and BranchID = + ss; #endregion string AnalysisTable = view_recepinfopart; string strSql = string.Empty; if (hopeAnalyV = HopeCountry | ho
21、peAnalyV = GroupName) AnalysisTable = view_RecepInfoCountry; strSql = SELECT count(RecepId) as y , + hopeAnalyV + as x; strSql += from + AnalysisTable + where IsShow=1 + PowerStr + UserBranchStr; if (HidtxtBeginDate != & HidtxtEndDate = ) strSql = strSql + and Datediff(day,RecordDate, + HidtxtBeginD
22、ate + )=0 ; else if (HidtxtBeginDate = & HidtxtEndDate != ) strSql = strSql + and Datediff(day,RecordDate, + HidtxtBeginDate + )=0 ; else if (!string.IsNullOrEmpty(HidtxtBeginDate) & !string.IsNullOrEmpty(HidtxtEndDate) strSql = strSql + and RecordDate= + HidtxtBeginDate + 0:00:00 and RecordDate= +
23、HidtxtEndDate + 23:59:59 ; if (HidddlHopCountry != 全部) strSql = strSql + and (RecepId in(select RecepId from tblRecepHopeCountry where HopeCountry= + HidddlHopCountry + ); if (HidddlCountryGroup != 全部) strSql = strSql + and (RecepId in(select RecepId from view_RecepHopeCountry where GroupName= + Hid
24、ddlCountryGroup + ); if (HidddlCurrentDegree != 全部) strSql = strSql + and CourrentDegree= + HidddlCurrentDegree + ; if (HidddlHopeDegree != 全部) strSql = strSql + and HopeDegree= + HidddlHopeDegree + ; if (brlCountryPartRadV = 1) if (HidddlProvice != 全部) strSql = strSql + and Provice= + HidddlProvice
25、 + ; else if (ddlProviceTypeV != -2) strSql = strSql + and ProviceType= + ddlProviceTypeV + ; if (rblAllDeptRadV=1) if (ddlAllRecordDepListV!=-2) strSql = strSql + and RecordName= +ddlAllRecordDepListV+ ; if (ddlCousultListV != -2)/咨询类型 strSql = strSql + and ConsultType= + ddlCousultListV + ; if (dd
26、lInfoSourceV != -2)/咨询信息来源 strSql = strSql + and (AttainInfoType= +ddlInfoSourceV + AttainInfoType=10); string orderbyStr = string.Empty; if (hopeAnalyV= HopeCountry) orderbyStr = order by HopeCountry; else if (hopeAnalyV = GroupName) orderbyStr = order by GroupName; else if (hopeAnalyV = BranchName
27、) orderbyStr = order by BranchName; else orderbyStr = order by count(RecepId) desc; strSql += group by + hopeAnalyV; strSql += orderbyStr; if (hopeAnalyV = HopeCountry | hopeAnalyV = GroupName) var analyList DB.Context.FromSql(strSql).ToList; var list = new Lst; if (analyList.Count 0) foreach (Model.view_RecepInfoCountry recpf in analyList) var obj = new x = recpf.x, y = recpf.y ; list.Add(obj); or =
