Ajax+Servlet实现ECharts的数据实时刷新，没错就是你要的那种效果！

以下是使用Ajax和Servlet实现ECharts数据实时刷新的示例代码：

前端页面（HTML+JavaScript）:




<!DOCTYPE html>
<html>
<head>
    <title>ECharts实时数据刷新</title>
    <script src="path/to/jquery.min.js"></script>
    <script src="path/to/echarts.min.js"></script>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            title: {
                text: '实时数据'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'line',
                data: []
            }]
        };
 
        myChart.setOption(option);
 
        function fetchData() {
            $.ajax({
                url: 'FetchDataServlet', // 假设Servlet映射为/FetchDataServlet
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    option.xAxis.data = data.categories;
                    option.series[0].data = data.data;
                    myChart.setOption(option);
                    setTimeout(fetchData, 1000); // 每秒钟发起一次请求
                }
            });
        }
 
        $(document).ready(function() {
            fetchData();
        });
    </script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
</body>
</html>

后端Servlet（Java）:




import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;
import java.util.Arrays;
import java.util.List;
 
public class FetchDataServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 假设这里是从数据库或其他实时数据源获取的数据
        List<String> categories = Arrays.asList("分类1", "分类2", "分类3");
        List<Integer> data = Arrays.asList(10, 20, 30); // 示例数据
 
        // 将数据转换为JSON格式
        String json = "{\"categories\": " + toJson(categories) + ", \"data\": " + toJson(data) + "}";
 
        // 设置响应内容类型
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
 
        // 发送响应数据
        response.getWriter().write(json);
    }
 
    private String toJson(Object obj) {
        // 这里使用简单的字符串连接，实际项目中应使用JSON库，如Jackson或Gson

Ajax+Servlet实现ECharts的数据实时刷新，没错就是你要的那种效果！

评论已关闭

推荐阅读