spring boot 动态加载Echart饼状图

最新推荐文章于 2024-08-21 15:17:44 发布

Amustrming

最新推荐文章于 2024-08-21 15:17:44 发布

阅读量2.1k

点赞数 3

本文链接：https://blog.csdn.net/Amustrming/article/details/84101182

版权

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

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

先从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 valu