基于Spring MVC的ECharts动态数据实时展示

最新推荐文章于 2024-08-12 02:46:45 发布

General_du

最新推荐文章于 2024-08-12 02:46:45 发布

阅读量6.7k

点赞数 6

分类专栏： js 文章标签： spring mvc ajax

本文链接：https://blog.csdn.net/duloveyue/article/details/50263407

版权

本文介绍如何使用Spring MVC和Ajax实现ECharts图表的动态实时数据展示。通过配置web.xml，设置Servlet和Filter，然后在JSP页面中嵌入ECharts并编写ajax请求交互代码，调用后端Controller进行数据处理。Controller类中使用@RequestMapping匹配请求，返回数据到前端，完成数据交互，实现实时更新。

摘要由CSDN通过智能技术生成

基于SpringMVC进行ECharts动态实时数据展示，ECharts的官网示例是前端的js动态随机数据，没有与后端程序进行交互，由于本人之前对Spring MVC和ajax不太了解，所以，走了很多弯路，通过这部分的学习，让自己对MVC架构和简单的ajax有了初步的了解，下面就记录一下自己搭建的这部分程序。

首先需要配置web.xml，设置好servlet和filter，这部分可以参考众多spring示例，这里就不赘述了。

接下来就是需要将echarts的相关代码写入到一个jsp文件，代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
    <html> 
    <head> 
    <title>line</title> 
     <script src="plugin/echarts.js"></script>
     <script src="plugin/jquery-1.8.2.min.js"></script>
    </head> 

    <body> 
           <h1>动态数据图表展示</h1>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom --> 
         <div id="main" style="height:400px"></div> 

        <script type="text/javascript" language="javascript"> 
            var myChart; 
            var eCharts; 

            require.config({ 
                paths : { 
                    'echarts' : 'plugin' , 
                } 
            }); 

            require( 
                [ 'echart