Echart通过Ajax获取数据

最新推荐文章于 2025-03-12 12:21:28 发布

qazxsw635241

最新推荐文章于 2025-03-12 12:21:28 发布

阅读量611

点赞数

分类专栏： js 文章标签： echart

本文链接：https://blog.youkuaiyun.com/qazxsw635241/article/details/97115429

版权

js 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个使用ECharts实现的省份分布情况的柱状图案例。该图表从前端到后端进行了完整的展示，包括了如何初始化图表、设置图表样式、配置数据请求及响应等关键步骤。通过该实例，读者可以了解到如何结合前端技术和后端接口来动态更新图表数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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