ECharts動態載入資料(簡單)
阿新 • • 發佈:2019-01-05
常規
html
//html中的內容很簡單
<div id="main" style="width: 600px;height:400px;"></div>
js庫匯入
//匯入相關指令碼
<script type="text/javascript" src="script/echarts.simple.min.js"></script>
js
//基於準備好的dom,初始化echarts例項
var myChart = echarts.init(document.getElementById('main'));
$.post("JsonTest",{},function (json){
myChart.setOption({
tooltip:{
trigger:'axis',
},
legend: {
data:['排名']
},
xAxis: {
position:'top',
data: ["第一學期","第二學期","第三學期","第四學期","第五學期","第六學期","第七學期","第八學期"],
axisTick:{
show:true ,
interval:0,
alignWithLabel:true,
},
axisLabel:{
interval:0,
}
},
yAxis: {
name:'名次',
nameLocation:'middle',
nameGap:30,
inverse:true,
},
series: [{
name: '排名' ,
type: 'line',
//這個陣列是具體的資料值
data: json.data,
itemStyle : { normal: {label : {show: true}}},
}]
});
},"json");
後臺資料
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//返回的資料
int [] arr = {1,2,3,4,5,6,7,8};
//JSON物件
JSONObject obj = new JSONObject();
obj.element("data", arr);
//輸出
response.getWriter().write(obj.toString());
}
注意
自己在實際操作中除錯了很久,最後發現要在ajax的呼叫中制定返回資料是json,特別在此說出來
$.post("JsonTest",{},function(json){
……});
上面這個程式碼一直除錯不通
alert(json.data)
這段程式碼執行後,顯示一直是undefined,經過修改
$.post("JsonTest",{},function(json){
……},"json");
則可以成功執行
效果
擴充套件
這個庫是百度的圖表庫,可以方便的進行圖表製作
Echarts專案連結
API手冊