Echart通過Ajax獲取數據

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;
}

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章