Springboot+echarts：ajax前后端分离交互

这篇文章距离上次修改已过285天，其中的内容可能已经有所变动。

在Spring Boot和ECharts进行前后端分离的AJAX交互时，可以使用以下步骤：

后端（Spring Boot）：
- 创建一个REST控制器，提供一个API接口用于返回图表数据。




@RestController
@RequestMapping("/api/chart")
public class ChartController {
 
    @GetMapping("/data")
    public ResponseEntity<Map<String, Object>> getChartData() {
        // 模拟数据
        Map<String, Object> data = new HashMap<>();
        data.put("xAxis", Arrays.asList("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"));
        data.put("series", Arrays.asList(820, 932, 901, 934, 1290, 1330, 1320));
 
        return ResponseEntity.ok(data);
    }
}

前端（HTML + JavaScript）：
- 使用JavaScript的XMLHttpRequest或fetchAPI来发送AJAX请求从后端获取数据。
- 使用ECharts的setOption方法来更新图表。




<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts Ajax Example</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 图表容器 -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var option = {
            xAxis: {
                type: 'category',
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [],
                type: 'line'
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
 
        // 发送AJAX请求获取数据
        fetch('/api/chart/data')
            .then(response => response.json())
            .then(data => {
                // 使用获取的数据更新图表
                myChart.setOption({
                    xAxis: {
                        data: data.xAxis
                    },
                    series: [{
                        data: data.series
                    }]
                });
            })
            .catch(error => console.error('Error fetching data: ', error));
    </script>
</body>
</html>

在这个例子中，前端页面包含了ECharts的库和一个图表容器。JavaScript 使用 fetch 函数向后端的 /api/chart/data 接口发送请求，获取数据后更新ECharts图表。后端Spring Boot控制器提供了该API接口，返回模拟的数据（实际应用中可以根据需要查询数据库等操作）。

Springboot+echarts：ajax前后端分离交互

评论已关闭

推荐阅读