使用SpringMVC、Echarts繪製柱狀圖:
阿新 • • 發佈:2018-12-21
前提用Maven搭好springMVC的框架
1、建一個jsp頁面,程式碼如下:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.common.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script> </head> <body> <div id="chartmain" style="width: 600px;height: 400px"></div> <script type="text/javascript"> $(function(){ var myCharts=echarts.init(document.getElementById('chartmain')); myCharts.setOption({ color: ['#3398DB'], title:{ text:'ECharts 班級成績平均分' }, tooltip : { trigger: 'axis', axisPointer : { // 座標軸指示器,座標軸觸發有效 type : 'shadow' // 預設為直線,可選為:'line' | 'shadow' } }, legend: { data: ['成績'] }, xAxis : { data : [] }, yAxis : { }, series : [ { name:'成績', type:'bar', data:[] } ] }); //載入時顯示loading動畫 myCharts.showLoading(); //放x軸值得陣列 var gradeName=[]; //放y軸值得陣列 var score=[]; //寫ajax給陣列存值 $.ajax({ type: "post", url: "${pageContext.request.contextPath}/getGrade", //請求傳送到getStudent處 dataType: "json", //返回資料形式為json success: function (data) { //請求成功時執行該函式內容,result即為伺服器返回的json物件 $(data).each(function(i,e){ gradeName.push(e.name); //挨個取出班別放陣列 score.push(e.score); //挨個取出分數放陣列 }); myCharts.hideLoading(); //隱藏載入動畫 myCharts.setOption({ //載入資料圖表 xAxis: { data: gradeName }, series: [{ // 根據名字對應到相應的系列 name: '成績', type:'bar', barWidth: '60%', data: score, itemStyle: { normal: { label: { show: true, //開啟顯示 position: 'top', //在上方顯示 textStyle: { //數值樣式 color: 'black', fontSize: 12 } } } } }] }); }, error: function (errorMsg) { //請求失敗時執行該函式 alert("圖表請求資料失敗!"); myCharts.hideLoading(); } }) }); </script> </body> </html>
2、controller那邊的程式碼:
@Controller public class GradeController { @RequestMapping("/getGrade") @ResponseBody public List<Grade> showGradeName(){ List<Grade> list=new ArrayList<Grade>(); list.add(new Grade("一班","89.9")); list.add(new Grade("二班","90.0")); list.add(new Grade("三班","67.9")); list.add(new Grade("四班","89.9")); list.add(new Grade("五班","70.0")); list.add(new Grade("六班","67.9")); return list; } }
3、測試結果: