java 后台交互 exchart

最新推荐文章于 2024-03-25 10:15:00 发布

ShawnWang04

最新推荐文章于 2024-03-25 10:15:00 发布

阅读量214

点赞数

分类专栏： Java 文章标签： java jquery ajax

本文链接：https://blog.csdn.net/Wang________/article/details/106562578

版权

Java 专栏收录该内容

72 篇文章 0 订阅

订阅专栏

后端传入json

@RequestMapping("/pageHelp")
    @ResponseBody
    public List<Product> pageHelp(Model model){
        List<Product> products = productService.productList(5, 1);
        return products;
//        model.addAttribute("products",products);
//        return "list";

    }

前端 exchart

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

    });
    // 路径配置
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });
    // 使用
    require(
        [
            'echarts',
            'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
        ],
        function (ec) {
// 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('main'));
            var option = {
                tooltip: {
                    show: true
                },
                title: {
                    text: ''
                },
                legend: {
                    data:["姓名"]
                },
                xAxis : [
                    {
                        type : "category",
                        data : (function(){
                            var arr=[];
                            $.ajax({
                                type : "post",
                                async : false, //同步执行
                                url : "http://localhost:8080/pageHelp",
                                data : {},
                                dataType : "json", //返回数据形式为json
                                success : function(result) {
                                    if (result) {
                                        for(var i=0;i<result.length;i++){
                                            console.log(result[i].name);
                                            arr.push(result[i].name);
                                        }
                                        console.log("arr=>"+arr);
                                    }

                                },
                                error : function(errorMsg) {
                                    alert("获取图表请求数据失败!");
                                    myChart.hideLoading();
                                }
                            })
                            return arr;
                        })()
                    }
                ],
                yAxis : [
                    {
                        type : "value"
                    }
                ],
                series : [
                    {
                        "name":"ID",
                        "type":"bar",
                        "data":(function(){
                            var arr=[];
                            $.ajax({
                                type : "post",
                                async : false, //同步执行
                                url : "http://localhost:8080/pageHelp",
                                data : {},
                                dataType : "json", //返回数据形式为json
                                success : function(result) {
                                    if (result) {
                                        for(var i=0;i<result.length;i++){
                                            console.log(result[i].id);
                                            arr.push(result[i].id);
                                        }
                                    }
                                },
                                error : function(errorMsg) {
                                    alert("获取图表请求数据失败!");
                                    myChart.hideLoading();
                                }
                            })
                            return arr;
                        })()

                    }
                ]
            };
// 为echarts对象加载数据
            myChart.setOption(option);
        }
    );
</script>
</body>
</html>