java+echarts實現動態圖表詳解
java+echarts實現動態圖表,jsp前臺頁面通過ajax非同步請求,controller層處理完資料返回前臺實現動態圖表。
一個簡單例項:
1. 前臺echarts圖表依賴js檔案:
echarts.js 下載地址 :http://echarts.baidu.com/download.html
jquery-1.11.2.min.js jquery依賴js檔案
2.前臺頁面:
引用echarts.js、jquery-1.11.2.min.js
編寫圖表:
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
//ajax非同步請求獲取後臺動態資料
$.ajax({
url:"login.do",//要請求的伺服器url
async:true, //是否為非同步請求
cache:false, //是否快取結果
type:"POST", //請求方式為POST
dataType:"json", //伺服器返回的資料是什麼型別
success:function(result){ //這個方法會在伺服器執行成功是被呼叫 ,引數result就是伺服器返回的值(現在是json型別)
if(result){
myChart.setOption({ //給echarts圖示賦值
xAxis: {
data: result.xAxis
},
series: [{
data: result.series
}]
});
}else{
alert(2)
}
}
})
// 基於準備好的dom,初始化echarts例項
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和資料
var option = {
title: {
text: 'java+ECharts實現動態圖表'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
</script>
更多型別的圖表參考echarts官網,地址:http://echarts.baidu.com/examples/
2.java後臺controller層:
package controller;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import dao.JsonUtil;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import vo.User;
@Controller
public class Usercontroller {
@ResponseBody
@RequestMapping("/login.do")
public void login(HttpServletResponse response){
JSONObject jo=new JSONObject();
JSONArray arr=new JSONArray();
arr.add(1);
arr.add(2);
arr.add(3);
arr.add(4);
arr.add(5);
arr.add(6);
JSONArray arr1=new JSONArray();
arr1.add(10);
arr1.add(20);
arr1.add(30);
arr1.add(40);
arr1.add(50);
arr1.add(60);
jo.put("xAxis", arr);
jo.put("series", arr1);
System.out.println( "========>"+jo.toString());
//後臺輸出的json格式:
//========>{"xAxis":[1,2,3,4,5,6],"series":[10,20,30,40,50,60]}
//========>{"xAxis":[1,2,3,4,5,6],"series":[10,20,30,40,50,60]}
JsonUtil.write(response, jo); //把值返回給前臺
}
}
實際使用查詢出資料組裝成“{"xAxis":[1,2,3,4,5,6],"series":[10,20,30,40,50,60]}“這種格式json返回給前臺即可。
3.測試