1、前端頁面:
var myChartState = null;
function getStateChart() {
myChartState = echarts.init(document.getElementById('state'));
// 定義圖表options
var options = {
title : {
text : '省份分佈情況'
},
toolbox : {
right : '35',
itemSize : 20,
itemGap : 20,
feature : {
saveAsImage : {
title : '保存爲圖片'
}
},
},
tooltip : {
trigger: 'axis'
},
xAxis : {
type : 'category',
data : [],
name : '省份'
},
yAxis : {
type : 'value',
name : '人數(個)'
},
series: [{
data: [],
type:'bar',name:'人數',
label:{
normal:{
show:true, position: 'top',
textStyle: { color: 'black' }
}}
}]
};
myChartState.setOption(options);
myChartState.hideLoading();
// 隨屏幕分辨率自適應
window.onresize = myChartState.resize;
}
$(function() {
getStateChart();
//延遲加載
setTimeout(function(){
$.ajax({
url:url,
method:'GET',
//data:formData,
dataType:'json',
success:function(res){
if(res.status==0){
myChartState.showLoading({text: '正在努力的讀取數據中...'});
myChartState.setOption({
xAxis : {
data : res.dataState
},
series: [{
data: res.serieState
}]
});
myChartState.hideLoading();
}
}
});
}, 500);
});
2、後臺代碼:
public @ResponseBody Map<String, Object> echart(){
Map<String, Object> map=new HashMap<>();
List<Object> listData=new ArrayList<>();
List<Object> listSerie=new ArrayList<>();
map.put("status", 0);
map.put("dataState", listData);
map.put("serieState", listSerie);
return map;
}