Echarts结合Ajax的动态图表(1)

刚入行，接到任务写个关于试卷成绩分布的图表，查了一年资料，总算写个差不多了。 1.页面跳转：首先从查看考试信息页面跳转至图表页面，使用button+function的方法，需要注意的是跳转时通常会嵌入一个查询成绩分布所需的条件-考试ID，写作ksid，传参时注意格式以及Url与成绩分布网页的ksid对应关系。

function wrongAnwserStatistics(ksid) { var url = location.protocol + "//" + location.host + "/######/wrongAnswerStatistics?ksid="+ksid; location.href = url; }

2.前台：前台代码需要注意的地方很多

   (1).写Echarts的时候需要一个DOM载体。

<div id="main" style="width: 800px;height:400px;position:absolute;left:inherit;top:100px"></div>

   (2).Echarts的各属性需要熟悉：尤其注重更适合自定义的tooltip。

   (3).Echarts与ajax：首先写的ajax，注意ajax的data需要一个键值对，然后写全局变量承载Result的值，在Echarts的series属性data中用全局变量赋值。当然如果有多条数据最好写function赋值了。

var myChart = echarts.init(document.getElementById('main')); var scoreNum = ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0']; var name0 = []; var name1 = []; var name2 = []; var name3 = []; var name4 = []; var name5 = []; var name6 = []; var name7 = []; var name8 = []; var name9 = []; var nameOfStu = { name0: [], name1: [], name2: [], name3: [], name4: [], name5: [], name6: [], name7: [], name8: [], name9: [] } var scoreDevide = ['10','20','30','40','50','60','70','80','90','100']; var scoreOfExam = 0.0; var ksid = getUrlParam("ksid"); var ajaxData = { ksid: ksid }; var params = { } //通过Ajax获取数据 $.ajax({ url: "../ExamStatistics/GetScoreDetails", type: "post", async: false, data: ajaxData, dataType: "json", success: function (result) { if(result[0].name!=undefined) $("#ksmc").html(unescapeString(result[0].name)); if (result[0].sjzf != undefined) scoreOfExam = result[0].sjzf; //按分组分出学生以及成绩 for (var i in result) { result[i].ksScore = result[i].ksScore / scoreOfExam * 100; toDecimal(result[i].ksScore); if (result[i].ksScore <= scoreDevide[0]) { scoreNum[0]++; nameOfStu.name0.push(result[i].ksScore); } else { if (scoreDevide[0] < result[i].ksScore && result[i].ksScore <= scoreDevide[1]) { scoreNum[1]++; nameOfStu.name1.push(result[i].ksScore); } else { if (scoreDevide[1] < result[i].ksScore && result[i].ksScore <= scoreDevide[2]) { scoreNum[2]++; nameOfStu.name2.push(result[i].ksScore); } else { if (scoreDevide[2] < result[i].ksScore && result[i].ksScore <= scoreDevide[3]) { scoreNum[3]++; nameOfStu.name3.push(result[i].ksScore); } else { if (scoreDevide[3] < result[i].ksScore && result[i].ksScore <= scoreDevide[4]) { scoreNum[4]++; nameOfStu.name4.push(result[i].ksScore); } else { if (scoreDevide[4] < result[i].ksScore && result[i].ksScore <= scoreDevide[5]) { scoreNum[5]++; nameOfStu.name5.push(result[i].ksScore); } else { if (scoreDevide[5] < result[i].ksScore && result[i].ksScore <= scoreDevide[6]) { scoreNum[6]++; nameOfStu.name6.push(result[i].ksScore); } else { if (scoreDevide[6] < result[i].ksScore && result[i].ksScore <= scoreDevide[7]) { scoreNum[7]++; nameOfStu.name7.push(result[i].ksScore); } else { if (scoreDevide[7] < result[i].ksScore && result[i].ksScore <= scoreDevide[8]) { scoreNum[8]++; nameOfStu.name8.push(result[i].ksScore); } else { if (scoreDevide[8] < result[i].ksScore && result[i].ksScore <= scoreDevide[9]) { scoreNum[9]++; nameOfStu.name.push(result[i].ksScore); } else { alert("获取考试成绩错误！"); } } } } } } } } } } } }, error: function () { alert("获取考试信息失败！"); } }); //初始化option option = { title: {//标题 text: '成绩分布表', textStyle:{ fontSize:'15' } }, color: ['#3398DB'], tooltip: {//提示框 show:true, axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' }, formatter: function (params) { //alert(JSON.stringify(params)); var res = '<p>' + params.seriesName + ':' + params.data + '</p>'; return res; } }, legend: {//图例 data: ['区间人数'], show:'true', left: 'center' }, grid: {//图表位置 left: '3%', right: '20%', bottom: '5%', containLabel: true }, xAxis: { type: 'category', name:'成绩区间(换算为百分制)', data: scoreDevide, axisTick: { alignWithLabel: true } } , yAxis: //y轴 { name:'人数', type: 'value', minInterval : 1 } , series: //数据 [ { name: '区间人数', type: 'bar', barWidth: '50%', data: scoreNum, barGap:'70%' }, ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); }) function toDecimal(x) { var f = parseFloat(x); if (isNaN(f)) { return; } f = Math.round(x * 100) / 100; return f; }

3.后台：后台的代码不再像之前在学校写的算法那么随性，向后台传值时也必须保证ID的一致性。

  (1).Entity Framework模型：简单易学，每个Service与各张表互联，将与数据库交互的SQL语句变为可执行的LinQ语句以及lanmda表达式。

  (2):安全可靠，防止SQL注入攻击。

  (3):需要多表联查时，只需关联另一张表即可，十分灵活，但更复杂的查询就需要用SQL语句了。

//<summary> //根据考试信息ID查询各学生成绩分布 List学生姓名 List学生成绩 //</summary> //<param name="id">考试ID</param> //<returns></returns> public List<ScoreExamManageDTO> GetScoreDetails(int id) { var records = Find(p => p.F_ID == id && p.F_DELETE != 1); List<ScoreExamManageDTO> dtoList = new List<ScoreExamManageDTO>(); foreach (T_KS_KSRY ksry in records.T_KS_KSRY) { ScoreExamManageDTO dto = new ScoreExamManageDTO { id = records.F_ID,//考试ID name = helperStatic.EscapeMLContent(records.F_NAME),//考试名称 sjzf = records.T_KS_SJ.F_ZF,//考试总分 ksName=ksry.F_USERNAME,//考生姓名 ksScore=ksry.F_SCORE,//考生得分 }; dtoList.Add(dto); } return dtoList; }