ECharts+Ajax动态制图

最新推荐文章于 2024-06-28 14:58:31 发布

QChess

最新推荐文章于 2024-06-28 14:58:31 发布

阅读量2.4k

点赞数 1

分类专栏：【web】文章标签： ajax spring mvc jquery

本文链接：https://blog.csdn.net/ajax_mt/article/details/75533484

版权

本文总结了使用ECharts结合Ajax从SpringMVC后台动态获取数据并生成柱状图的过程。首先，介绍如何引入ECharts库，接着详细讲解SpringMVC后台的数据获取流程，然后阐述在前端通过Ajax请求数据并利用ECharts进行制图的方法。最后，针对在更新图表时遇到的问题——数据叠加而非替换，分析原因并提出解决方案：在赋值时重新声明变量以清除旧数据。

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

今天自己在做小东西的时候，需要一个功能，需要接收数据库的记录并显示在柱状图上，以前写过一次但是没总结，下面我总结一下实现过程。

一、准备js

下载ECharts的js文档，导入在项目中。这里也准备了链接http://echarts.baidu.com/download.html

二、实现

SpringMVC后台获取数据

1.Controller控制层调用service业务层

    /**
     * @ResponseBody：返回JSON格式内容
     * @RequestMapping("/findNgMonth/{ngMonth}"):映射路径，即ajax请求的url地址
     * */
    @ResponseBody
    @RequestMapping(value = "/findNgMonth/{ngMonth}",produces = "text/html;charset=UTF-8",method = RequestMethod.GET)
    public String findNgMonth(@PathVariable("ngMonth")String ngMonth)throws Exception{
        List<NgBills> ngBillsList=null;
        try{
            System.out.println("获取日期："+ngMonth);
            //调用service业务层的findNgMonth()方法
            ngBillsList=billsService.findNgMonth(ngMonth);
            //返回结果
            return JSON.toJSONString(ngBillsList);
        }catch (ExceptionCountents ec){
            ec.printStackTrace();
            return