使用AJAX请求JSON数据动态绑定到ECharts

JavaScript库的引入路径：

• 确保加载echarts.common.min.js和showChart.js库的正确路径。
• 引用jquery-1.8.3.min.js以支持AJAX请求。

页面结构：

• 使用Thymeleaf模板引擎渲染页面，确保HTML结构的清晰性。
• 在页面中添加两个ECharts容器，分别用于显示不同类型的数据可视化。

AJAX数据请求：

• 使用jQuery的$.get方法发送AJAX请求，获取后台接口返回的JSON数据。
• 根据请求结果，动态创建或更新ECharts图表。

Spring Boot控制器配置：

• 使用@RestController注解定义API接口。
• 使用@RequestMapping指定路径，@RequestBody注解处理HTTP请求体。

数据处理逻辑：

• 在/load/nodedata接口中，接收前台传递的IP地址信息。
• 返回包含系统运行数据的JSON对象，例如CPU使用率、内存容量等。

数据示例：

{    "msg": {        "cpuPercent": 1.79728,        "physical_sockets": 2,        "cpu_cores_per_socket": 6,        "cpu_thread_per_core": 2,        "mem_total": 81920,        "mem_used": 15705,        "disk_sys_await": 1.00228,        "disk_sys_total": 110,        "disk_sys_used": 2.5,        "uptime": 0.286491,        "loadAvg": "0.02,0.29,0.34"    },    "ipjsonstring": {        "alreadyUsedNum": 2,        "surplusNum": 61    }}

Spring Boot核心组件：

        
     
      org.springframework.boot
         
     
      spring-boot-starter-parent
         
     
      2.1.1.RELEASE
     
    

ECharts图表库：

        
     
      com.alibaba
         
     
      fastjson
         
     
      1.2.7
     
    

其他必要依赖：

        
     
      org.springframework.boot
         
     
      spring-boot-starter-thymeleaf
     
    
        
     
      org.springframework.boot
         
     
      spring-boot-starter-web