spring boot 动态加载Echart饼状图

最新推荐文章于 2022-11-29 15:43:01 发布

原创

最新推荐文章于 2022-11-29 15:43:01 发布 · 2.1k 阅读

5 ·

CC 4.0 BY-SA版权

本文介绍了如何在Spring Boot应用中动态加载Echarts饼状图。首先从Echarts官网下载所需版本并引入，然后尝试通过在Controller中拼接查询结果到map中，但因数据类型不匹配导致前端显示错误。接着，采用ajax方式，后台查询数据转化为json数组返回，成功实现了饼状图的数据动态加载。具体步骤包括：构造data实体、查询并转化数据为json、在前端使用ajax返回的data加载图表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先从Echart官网上根据需要下载所需Echart版本，在页面中用script标签引入，这些在Echart官网上有教程。官网上有异步加载和更新Echart图，知道了是动态把查询到的结果按格式拼接到饼状图series里面的data中。

尝试一：在springboot的controller中把查询到的结果拼接好放在map里，跳转到页面，然后在前台javascript中获取完成动态加载，发现饼状图中data是数组类型，后台拼接的String类型传到javascript中，然后在页面中显示会出现单引号解析错误。

尝试二：使用ajax，后台跳转到页面后自动执行ajax查询出饼状图所需的data数据，返回json格式数据

1.饼状图的data数据格式为[{value:235, name:'视频广告'},{value:274, name:'联盟广告'},{value:310, name:'邮件营销'} ]

构造data实体

public class EchartData {
    private String name;
    private Float value;

    public EchartData(){}
    public EchartData(String name, Float value){
        this.value = value;
        this.name = name;
    }
    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Float getValue() {
        return value;
    }

    public void setValue(Float value) {
        this.value = value;
    }
}

2.后台查询出数据并放入EchartData的list并转化为json数组返回到ajax

@RequestMapping("/dwcb")
@ResponseBody
private String dwcb(@RequestParam("scrq1") String scrq1,@RequestParam("scrq2") String scrq2,
@RequestParam("dwmc") String dwmc,Map map) throw