SpringBoot+Echarts实现一次ajax请求返回并显示多个饼状图

ゝ一纸荒年。 2023-10-18 18:12 55阅读 0赞

## 场景 ##

SpringBoot+Echarts实现请求后台数据显示饼状图：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/89921101][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_89921101]

## 实现 ##

在上面实现一次ajax请求数据返回并显示一个饼状图的基础上。

### html页面修改 ###

### 后台Controller修改 ###

@Description("获取Echarts数据")
        @RequestMapping("/EcharsShow")
        @ResponseBody
        public Map<String,List<Echarts>> echartsShow(Model model) {
           
            Map<String,List<Echarts>> map = new HashMap<>();
    
            List<Echarts> list1 = new ArrayList<Echarts>();
            list1.add(new Echarts("正极车间",100));
            list1.add(new Echarts("负极车间",200));
            list1.add(new Echarts("立体仓库",300));
            list1.add(new Echarts("清洁车间",400));
    
            List<Echarts> list2 = new ArrayList<Echarts>();
            list2.add(new Echarts("正极车间",100));
            list2.add(new Echarts("负极车间",200));
            list2.add(new Echarts("立体仓库",300));
            list2.add(new Echarts("清洁车间",400));
    
            List<Echarts> list3 = new ArrayList<Echarts>();
            list3.add(new Echarts("正极车间",100));
            list3.add(new Echarts("负极车间",200));
            list3.add(new Echarts("立体仓库",300));
            list3.add(new Echarts("清洁车间",400));
    
            List<Echarts> list4 = new ArrayList<Echarts>();
            list4.add(new Echarts("正极车间",100));
            list4.add(new Echarts("负极车间",200));
            list4.add(new Echarts("立体仓库",300));
            list4.add(new Echarts("清洁车间",400));
    
            map.put("list1",list1);
            map.put("list2",list2);
            map.put("list3",list3);
            map.put("list4",list4);
            return map;
        }

### js代码修改 ###

$(document).ready(function() {
    
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('main1'));
        var myChart2 = echarts.init(document.getElementById('main2'));
        var myChart3 = echarts.init(document.getElementById('main3'));
        var myChart4 = echarts.init(document.getElementById('main4'));
        // 指定图表的配置项和数据
        var names1=[];
        var values1=[];
        var names2=[];
        var values2=[];
        var names3=[];
        var values3=[];
        var names4=[];
        var values4=[];
        //数据加载完之前先显示一段简单的loading动画
        myChart1.showLoading();
        myChart2.showLoading();
        myChart3.showLoading();
        myChart4.showLoading();
        $.ajax({
            type : "post",
            async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url : "/wmsLogisticMonitoring/EcharsShow",    //请求发送到dataActiont处
            data : {},
            dataType : "json",        //返回数据形式为json
            success : function(result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    var list1 = result["list1"]
                    var list2 = result["list2"]
                    var list3 = result["list3"]
                    var list4 = result["list4"]
                    for(var i=0;i<list1.length;i++){
                        names1.push(list1[i].name);
                        values1.push(list1[i].num);
                    }
                    for(var i=0;i<list2.length;i++){
                        names2.push(list2[i].name);
                        values2.push(list2[i].num);
                    }
                    for(var i=0;i<list3.length;i++){
                        names3.push(list3[i].name);
                        values3.push(list3[i].num);
                    }
                    for(var i=0;i<list4.length;i++){
                        names4.push(list4[i].name);
                        values4.push(list4[i].num);
                    }
                    myChart1.hideLoading();    //隐藏加载动画
                    myChart1.setOption(
                        {
                            title: {
                                text: '物料运输件数',
                                x: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                                data: names1
                            },
                            series: [
                                {
                                    name: '物料来源',
                                    type: 'pie',
                                    radius: '55%',
                                    center: ['50%', '60%'],
                                    data: list1,
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        }
                    );
                    myChart2.hideLoading();    //隐藏加载动画
                    myChart2.setOption(
                        {
                            title: {
                                text: '物流单执行时长',
                                x: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                                data: names2
                            },
                            series: [
                                {
                                    name: '物料来源',
                                    type: 'pie',
                                    radius: '55%',
                                    center: ['50%', '60%'],
                                    data: list2,
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        }
                    );
                    myChart3.hideLoading();    //隐藏加载动画
                    myChart3.setOption(
                        {
                            title: {
                                text: '物流队列',
                                x: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                                data: names3
                            },
                            series: [
                                {
                                    name: '物料来源',
                                    type: 'pie',
                                    radius: '55%',
                                    center: ['50%', '60%'],
                                    data: list3,
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        }
                    );
                    myChart4.hideLoading();    //隐藏加载动画
                    myChart4.setOption(
                        {
                            title: {
                                text: '队列等待时长',
                                x: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                                data: names4
                            },
                            series: [
                                {
                                    name: '物料来源',
                                    type: 'pie',
                                    radius: '55%',
                                    center: ['50%', '60%'],
                                    data: list4,
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        }
                    );
                }
            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });//end ajax
       
    });//刷新方法结束

## 效果 ##

![Image 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_89921101]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/89921101
[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190507160614367.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70