Eharts的条件查询-ajax获取后台信息

最新推荐文章于 2023-06-06 11:57:47 发布

原创最新推荐文章于 2023-06-06 11:57:47 发布 · 456 阅读

0 ·

CC 4.0 BY-SA版权

学习过程专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何利用Echarts结合Ajax实现条件查询功能。通过在按钮上添加事件，触发Ajax请求，从后台获取信息并更新Echarts图表展示。

首先条件查询是通过按钮查询的最后，所以第一件要做的事是给按钮添加事件
在这里插入图片描述
目前我的例子中添加了个方法，可以查看其中的一个例子

//柱形图
function Month() {
    $(function() {
        //var echarts = echarts.init($('#pid-div')[0]);
        var myChart = echarts.init($('#bar')[0]);
        var seriesLabel = {
            normal: {
                show: true,
                textBorderColor: '#333',
                textBorderWidth: 2
            }
        }
        var option = {
            normal: {
                show: true,
                textBorderColor: '#333',
                textBorderWidth: 2
            },
            title: {
                text: $("input[name=\'moncate\']:checked").val()+'排行榜',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '20%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01],
            },
            yAxis: {
                type: 'category',
                data: [],
                show: false
            },
            series: [

                {
                    name: '2019年',
                    type: 'bar',
                    label: {
                        normal: {
                            position: 'right',
                            show: true
                        }
                    },
                    data: []
                }
            ]
        };

        myChart.setOption(option);

        myChart.showLoading(); // 显示动画



        $.ajax({

            url: '${pageContext.request.contextPath}/queryForBar.action',

            type: 'post',

            dataType: 'json',
            data: {
            	//传往后台的值
                'moncate': $("input[name='moncate']:checked").val(),
            },
            success: function(result) {

                var categorys = [];

                var spend = [];

                $.each(result, function(index, obj) {

                    categorys.push(obj.category);

                    spend.push({name:obj.money, value:obj.money});

                })



                myChart.hideLoading(); // 隐藏加载动画

                myChart.setOption({

                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                        show: false
                    },
                    yAxis: {
                        type: 'category',
                        data: categorys,
                        show: true
                    },
                    series: [
                        {
                            name: '2019年',
                            type: 'bar',
                            barWidth : 30,
                            label: {
                                normal: {
                                    position: 'right',
                                    show: true
                                }
                            },
                            data: spend
                        }
                    ]
                });

            }

        });

    });
}```