基于ajax从后端服务器获取echarts的数据，并且显示在前端的页面上

最新推荐文章于 2024-09-06 14:48:16 发布

香蕉派妹

最新推荐文章于 2024-09-06 14:48:16 发布

阅读量1.9k

点赞数 3

文章标签： echarts ajax spring boot

本文链接：https://blog.csdn.net/Ligo106/article/details/121310808

版权

最近在学习echarts，看到官方给出的入门案例数据都是“写死”的，那么应该如何从后端获取数据并渲染到前端呢？试着写了一个小案例，通过ajax实现的，小白初学，欢迎指正

前端代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>ECharts</title>
    <!--通过cdn的方式引入echarts和jquery文件-->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var names = []; //x轴：物品的名称
    var nums = []; //y轴：物品的销量
    draw(); //获取后端传来的json对象并绘图
    function draw() {
        $.ajax({
            type: "post",
            async: true, //异步请求(默认也是异步)
            url: "test", //请求发送到后台controller的地址
            dataType: "json", //返回数据形式为json
            success: function (results) { //result参数是服务器返回的json对象，这个参数是自带的，名字随便起
                if (results != null) {
                    names.push(results["names"]) //取出Json对象中的值，作为绘图时的data
                    nums.push(results["nums"]) //这里为了方便只返回了一组数据，如果返回多组循环即可

                    myChart.setOption({ //绘图
                        title: {
                            text: 'echarts从后端获取数据'
                        },
                        tooltip: {},
                        legend: {
                            data: ['销量']
                        },
                        xAxis: {
                            data: names //从后端传过来的，没有“写死”
                        },
                        yAxis: {},
                        series: [
                            {
                                name: '销量',
                                type: 'bar',
                                data: nums //从后端传过来的，没有“写死”
                            }
                        ]
                    });
                }
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
            }
        })
    }
</script>
</body>
</html>

实体类（Goods）

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Goods { //导入Lombok可以简写
    private String names; //物品名称
    private int nums; //物品销量
}

controller控制器

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class EchartsController {

    @RequestMapping("/test")
    @ResponseBody
    public Goods echarts(){
        Goods goods = new Goods();
        goods.setNames("毛衣");
        goods.setNums(20);
        return goods; //返回一个json对象
    }
}