ECharts+springboot项目，前端不显示数据，找错误，找了一下午

已于 2023-02-23 11:38:54 修改
阅读量1.3w 收藏 4
点赞数
分类专栏： 前端 文章标签： java
于 2022-06-04 21:34:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55229531/article/details/125125786
版权

项目场景：

        因为想做一个大五人格心理分析的项目，因此结合了ECharts+springboot做了一个后台管理系统。

问题描述：

前端ECharts部分不显示后端传送的数据，并且不提示任何错误信息。后端要进行交互的数据因为没有数据所以缩成了一个点。

问题排查：

1、后端排查

后端可以正常发送数据，并且数据正确。 

2、前端排查

（1）相关依赖

没问题

    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <script src="/js/element-ui/lib/index.js"></script>
    <script src="../js/echarts.js"></script>

（2）图表作用域

        没问题

<div id="app" style="width: 600px;height:400px;">

 （3）Vue中的数据

没问题

option: {
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    left: 'center',
                    data: [
                        'personality standard',
                        'personality interviewee',
                        'animal interviewee'
                    ]
                },
                radar: [
                    {
                        indicator: [
                            { text: 'tiger', max: 30 },
                            { text: 'peacock', max: 30 },
                            { text: 'koala', max: 30 },
                            { text: 'owl', max: 30 },
                            { text: 'chameleon', max: 30 }

                        ],
                        center: ['25%', '40%'],
                        radius: 80
                    },
                    {
                        indicator: [
                            { text: 'extraversion', max: 20 },
                            { text: 'agreeableness', max: 20 },
                            { text: 'seriousness', max: 20 },
                            { text: 'neuroticism', max: 20 },
                            { text: 'experienceopenness', max: 20 }

                        ],
                        center: ['75%', '40%'],
                        radius: 80
                    },

                ],
                series: [
                    {
                        type: 'radar',
                        tooltip: {
                            trigger: 'item'
                        },
                        data: [

                            {
                                value: [0, 0, 0, 0,0],
                                name: 'animal interviewee'
                            }
                        ]
                    },
                    {
                        type: 'radar',
                        radarIndex: 1,
                        tooltip: {
                            trigger: 'item'
                        },
                        data: [
                            {
                                value: [13, 16, 13.5, 10,15],
                                name: 'personality standard'
                            },
                            {
                                value: [0, 0, 0, 0,0],
                                name: 'personality interviewee'
                            }
                        ]
                    }

                ]
            },
            animal: {
                tiger: 0,
                peacock: 0,
                koala: 0,
                owl: 0,
                chameleon: 0,
                personalityHandled: {
                    extraversion: 0,
                    agreeableness: 0,
                    seriousness: 0,
                    neuroticism: 0,
                    experienceopenness: 0,
                }
            },

（3）数据转化

既然前端可以拿到数据，那么一定是数据转化出现了问题。经过排查，果不其然是数据转化的问题。我之前写的代码结构如下。因为Vue和下面的myChart 是在script块是平行的，因此两者是异步进行处理的，所以就发生了，Vue还没有处理好数据，但是myChart已经完成了初始化的这个情况，因为myChart已经完成了初始化，所以Vue的数据就无法注入了。因此只要把myChart初始化的操作放入Vue中就可以了。

 let app=new Vue({

    data：{
        option：{

        }

    }


//数据接收并转化的代码

})

   var myChart = echarts.init(document.getElementById('app'));
    myChart.setOption(app.option);

（4）全部错误代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <script src="/js/element-ui/lib/index.js"></script>
    <script src="../js/echarts.js"></script>

</head>
<body>
<div id="app" style="width: 600px;height:400px;">

</div>

<script type="text/javascript">

    let app=new Vue({
        el:"#app",
        data: {
          option: {
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    left: 'center',
                    data: [
                        'personality standard',
                        'personality interviewee',
                        'animal interviewee'
                    ]
                },
                radar: [
                    {
                        indicator: [
                            { text: 'tiger', max: 30 },
                            { text: 'peacock', max: 30 },
                            { text: 'koala', max: 30 },
                            { text: 'owl', max: 30 },
                            { text: 'chameleon', max: 30 }

                        ],
                        center: ['25%', '40%'],
                        radius: 80
                    },
                    {
                        indicator: [
                            { text: 'extraversion', max: 20 },
                            { text: 'agreeableness', max: 20 },
                            { text: 'seriousness', max: 20 },
                            { text: 'neuroticism', max: 20 },
                            { text: 'experienceopenness', max: 20 }

                        ],
                        center: ['75%', '40%'],
                        radius: 80
                    },

                ],
                series: [
                    {
                        type: 'radar',
                        tooltip: {
                            trigger: 'item'
                        },
                        data: [

                            {
                                value: [0, 0, 0, 0,0],
                                name: 'animal interviewee'
                            }
                        ]
                    },
                    {
                        type: 'radar',
                        radarIndex: 1,
                        tooltip: {
                            trigger: 'item'
                        },
                        data: [
                            {
                                value: [13, 16, 13.5, 10,15],
                                name: 'personality standard'
                            },
                            {
                                value: [0, 0, 0, 0,0],
                                name: 'personality interviewee'
                            }
                        ]
                    }

                ]
            },
            animal: {
                tiger: 0,
                peacock: 0,
                koala: 0,
                owl: 0,
                chameleon: 0,
                personalityHandled: {
                    extraversion: 0,
                    agreeableness: 0,
                    seriousness: 0,
                    neuroticism: 0,
                    experienceopenness: 0,
                }
            },
        },
        methods:{
            findAnimalById(id){
                axios.get("http://localhost:8080/container/id/"+id)
                    .then(resp =>{
                        if(resp.data.code===20041){
                            this.animal= resp.data.data;
                            this.$message({
                                showClose: true,
                                message: '查询成功',
                                type: 'success'

                            });
                            // 设置数据
                            this.option.series[0].data[0].value[0]=this.$data.animal.tiger;
                            this.option.series[0].data[0].value[1]=this.$data.animal.peacock;
                            this.option.series[0].data[0].value[2]=this.$data.animal.koala;
                            this.option.series[0].data[0].value[3]=this.$data.animal.owl;
                            this.option.series[0].data[0].value[4]=this.$data.animal.chameleon;

                            this.option.series[1].data[1].value[0]=this.$data.animal.personalityHandled.extraversion;
                            this.option.series[1].data[1].value[1]=this.$data.animal.personalityHandled.agreeableness;
                            this.option.series[1].data[1].value[2]=this.$data.animal.personalityHandled.seriousness;
                            this.option.series[1].data[1].value[3]=this.$data.animal.personalityHandled.neuroticism;
                            this.option.series[1].data[1].value[4]=this.$data.animal.personalityHandled.experienceopenness;


                           

                        }else {
                            console.log(resp.data);
                            this.$message({
                                showClose: true,
                                message: '查询失败',
                                type: 'error'
                            });
                        }
                    })
            },

        },
        created(){
            // 拿到id
            let id = localStorage.getItem("id");
            // 查询
            this.findAnimalById(id);
        }

    });

    var myChart = echarts.init(document.getElementById('app'));
    myChart.setOption(app.option);

</script>



</body>
</html>

解决方案：

1、伪代码

 let app=new Vue({

    data：{
        option：{

        }

    }

   var myChart = echarts.init(document.getElementById('app'));
    myChart.setOption(app.option);
//数据接收并转化的代码

})

2、全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <script src="/js/element-ui/lib/index.js"></script>
    <script src="../js/echarts.js"></script>

</head>
<body>
<div id="app" style="width: 600px;height:400px;">

</div>

<script type="text/javascript">

    let app=new Vue({
        el:"#app",
        data: {
          option: {
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    left: 'center',
                    data: [
                        'personality standard',
                        'personality interviewee',
                        'animal interviewee'
                    ]
                },
                radar: [
                    {
                        indicator: [
                            { text: 'tiger', max: 30 },
                            { text: 'peacock', max: 30 },
                            { text: 'koala', max: 30 },
                            { text: 'owl', max: 30 },
                            { text: 'chameleon', max: 30 }

                        ],
                        center: ['25%', '40%'],
                        radius: 80
                    },
                    {
                        indicator: [
                            { text: 'extraversion', max: 20 },
                            { text: 'agreeableness', max: 20 },
                            { text: 'seriousness', max: 20 },
                            { text: 'neuroticism', max: 20 },
                            { text: 'experienceopenness', max: 20 }

                        ],
                        center: ['75%', '40%'],
                        radius: 80
                    },

                ],
                series: [
                    {
                        type: 'radar',
                        tooltip: {
                            trigger: 'item'
                        },
                        data: [

                            {
                                value: [0, 0, 0, 0,0],
                                name: 'animal interviewee'
                            }
                        ]
                    },
                    {
                        type: 'radar',
                        radarIndex: 1,
                        tooltip: {
                            trigger: 'item'
                        },
                        data: [
                            {
                                value: [13, 16, 13.5, 10,15],
                                name: 'personality standard'
                            },
                            {
                                value: [0, 0, 0, 0,0],
                                name: 'personality interviewee'
                            }
                        ]
                    }

                ]
            },
            animal: {
                tiger: 0,
                peacock: 0,
                koala: 0,
                owl: 0,
                chameleon: 0,
                personalityHandled: {
                    extraversion: 0,
                    agreeableness: 0,
                    seriousness: 0,
                    neuroticism: 0,
                    experienceopenness: 0,
                }
            },
        },
        methods:{
            findAnimalById(id){
                axios.get("http://localhost:8080/container/id/"+id)
                    .then(resp =>{
                        if(resp.data.code===20041){
                            this.animal= resp.data.data;
                            this.$message({
                                showClose: true,
                                message: '查询成功',
                                type: 'success'

                            });
                            // 设置数据
                            this.option.series[0].data[0].value[0]=this.$data.animal.tiger;
                            this.option.series[0].data[0].value[1]=this.$data.animal.peacock;
                            this.option.series[0].data[0].value[2]=this.$data.animal.koala;
                            this.option.series[0].data[0].value[3]=this.$data.animal.owl;
                            this.option.series[0].data[0].value[4]=this.$data.animal.chameleon;

                            this.option.series[1].data[1].value[0]=this.$data.animal.personalityHandled.extraversion;
                            this.option.series[1].data[1].value[1]=this.$data.animal.personalityHandled.agreeableness;
                            this.option.series[1].data[1].value[2]=this.$data.animal.personalityHandled.seriousness;
                            this.option.series[1].data[1].value[3]=this.$data.animal.personalityHandled.neuroticism;
                            this.option.series[1].data[1].value[4]=this.$data.animal.personalityHandled.experienceopenness;


                            var myChart = echarts.init(document.getElementById('app'));
                            myChart.setOption(app.option);

                        }else {
                            console.log(resp.data);
                            this.$message({
                                showClose: true,
                                message: '查询失败',
                                type: 'error'
                            });
                        }
                    })
            },

        },
        created(){
            // 拿到id
            let id = localStorage.getItem("id");
            // 查询
            this.findAnimalById(id);
        }

    });



</script>



</body>
</html>

小海海不怕困难
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
day59 后端传给前端数据，前端不显示的问题。
gaosong0623的博客
01-07 7032
做作业的时候遇到一个非常非常非常奇怪的问题。 后端函数从数据库拿到数据，然而在前端数据却怎么也显示出来。 1.先排查数据库数据有没有问题，没有。 2.检查在后端数据库能不能显示出来，能显示出来。 3.重新写一个前端页面，只显示这个数据，看看能不能显示出来。发现是可以的？？？？ 甚至我重新在后端写个函数，直接返回那个不能显示数据的页面，竟然发现不能显示的数据，显示成功了？ 这特喵的是为什...
springboot项目：console.log后台可以拿到数据，但是前端不可以显示可能是定义封装数据的错误
cxk633018的博客
09-02 1774
console.log后台可以拿到数据，但是前端不可以显示可能是定义封装数据的错误
SpringMVC前后端传值，后端获取数据传值给前端 前端不显示
zddsc的博客
10-15 1196
前后端传值，前端不显示
Vue获取到后台值，但是前端页面不显示、不报错(axios的巨坑)
热门推荐
08-01 1万+
最终原因是axios，then里面是异步返回数据，需要首先整个获取axios，之后再获取返回值获取不到值代码如下。
springboot浏览器不显示数据
最新发布
sdfsdfsdfgdfg的博客
06-06 123
注解@Controller 不返回数据，不能在浏览器查看数据，只能指定一个视图解析器（View Resolver）来解析返回的视图名称，并将其呈现为实际的HTML页面或其他类型的视图。@ResponseBody 它用于将控制器（Controller）方法返回的对象自动转换为 JSON 或 XML 格式的数据，并写入到 HTTP 响应体中。@RestController 将自动转换为JSON或XML格式的响应体（Response Body）
vue3项目一直转圈，没有报错，不显示页面
luweisixsix的博客
07-25 5219
vue3项目一直转圈，没有报错，不显示页面
数据库有数据前端接收的到但是不显示
m0_46850841的博客
05-03 555
怎么弄前端都不显示数据，查了好多遍，控制台打印也没有问题。后面才发现，谁家好人多写一个空格，晕死。
AJAX+echarts+springboot实现前端向后端请求数据
09-26
本项目通过结合AJAX、ECharts和SpringBoot，实现了前端向后端请求数据的功能，为用户提供了一种高效、直观的方式来展示和分析数据。下面我们将详细探讨这三个技术以及它们在实现这一功能中的作用。 **AJAX...
32【源码】数据可视化：基于 Echarts + Java SpringBoot 动态实时大屏 - 银行监管系统.zip
06-08
更多Python&Echarts版的数据可视化大屏源码： ...更多Java SpringBoot&Echarts版的数据可视化大屏源码： https://yydatav.blog.csdn.net/article/details/123652970 更多《工厂订单出入库信息管理系统》案例源码： ...
1【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例-互联网企业数据分析
03-18
在本文中，我们将深入探讨如何使用Echarts与Java SpringBoot框架来实现一个动态实时的数据可视化大屏，这对于互联网企业的数据分析至关重要。数据可视化是现代商业智能的核心组成部分，它可以帮助企业快速理解海量...
metricchart:echarts + springboot + JPA + phantomjs
05-09
metricchart 项目背景 spring boot + jpa + echarts + phantomjs + 本地保存图片 前提 运行 echarts 源文件 src/java/test/sample/lines example 如LineTest5， git clone 地址： test 环境可以直接展现 html 页面...
在springboot整合vue 的前后端分开开发中 后端发送的数据前端能收到 状态码是200 但是不能渲染是什么原因...
weixin_35754962的博客
02-16 439
在Spring Boot整合Vue的前后端分开开发中，如果后端发送的数据前端能够收到并且状态码为200，但是无法渲染，可能存在以下原因： 数据格式问题：后端发送的数据格式可能不符合前端的要求，例如数据格式不是JSON格式或者缺少必要的字段等。 跨域问题：由于跨域限制，前端无法直接访问后端接口，需要在后端进行跨域配置。 路径问题：前端在访问后端接口时，需要确保请求路径与后端接口地址一致，如果路...
从数据库拿数据后 不在前端展示的问题
weixin_42248417的博客
05-31 2356
数据库中的字段必须重命名和前端的字段一致才可以 如果不一致会显示出下面的情况 客户名称就会展示为空
ElasticSearch-head的数据浏览无数据
weixin_49104362的博客
06-08 784
把es-head相关插件安装好后，弄了个索引测试一下，发现es-head竟然没有显示数据：东找找西找找，才发现原来是：elasticsearch 6增加了请求头严格校验的原因，并且返回结果是{ “error” : “Content-Type header [application/x-www-form-urlencoded] is not supported”, “status” : 406 }如果是es 7 版本的，如果出现无数据也是这个原因~~~有两种解决方法：区别就是docker容器里面无法使用vi/
数据库新增一条数据，前端页面却看不到？
大田的博客
08-29 5682
解决方案：可以利用 F12 抓包工具查看下请求 url 等信息与接口文档信息是否一致。4、前端和后端定义的接口字段名不一致，有可能前端取错字段或者未做渲染；数据库新增一条数据，前端页面却看不到？解决方案：需要看下缓存策略，可以询问开发，前后端分别清除缓存再试试。解决方案：利用抓包工具查看接口请求字段信息与接口定义的字段是否一致。3、查看请求接口是否为本次要展示新增数据的目标接口；...
后端查询到数据，前端显示该数据为null
qq_47305937的博客
04-14 2899
出现这个问题的时候，我首先去检查了，前后端以及数据库中的字段名是否匹配。然后考虑是不是前后端缓存的问题，清空前后端缓存之后，前端仍然接收不到数据。我们来看看控制台打印的这个时候form表单里的数据。我们明显的看到，record这个属性在后端是查得到值的。接下来我们来看前端数据。查查我们的mybatis做映射的属性是不是改过来了。数据上来了，家人们~~~，又是被自己蠢哭的一天~xml文件：都报红半天了，你看不见？接下来我们查询订单详情，ID=8的订单。前端没拿到数据，怎么办家人们？接下来，见证奇迹的时刻~
前端获取不到后台数据的解决办法
qq_52117632的博客
02-13 3311
前端获取不到后台数据的解决办法
前端页面拿不到后端传来的数据或者DOM
qq_42371932的博客
10-19 500
还有一种可能，就是你的数据是prop里的，然后利用watch监听，但是第一次打开组件的时候没有触发监听，这个时候需要immediate:true。原因可能有多种，例如接口数据还没传到，页面就已经渲染完成了；或者你给表格赋值哪些行该被选中的时候，表格DOM此时还没有生成。我们想要拿到后端传过来的数据，来判断在el-table中哪些行需要被选中，但是每次打开组件的时候，没有数据被选中。想要的模板结构还没生成怎么解决,例如组件里有个表格，刚打开组件的时候表格还没生成。使用this.$nextTick（（）=>{
记一次前端后端分离的前端页面不显示数据的情况
weixin_39137699的博客
05-01 6001
本来后端 @JsonProperty(“food”) //错误的 @JsonProperty(“foods”) //正确的 将相应的字段传输给前端，但是前端，的确拿到json数据，但是相应的页面并没有被渲染，我之前有碰到这个情况，猜测可能是传输给前端的字段可能和渲染的字段不一样，导致出错不渲染，特地在刚开始看了下前端需要的字段，没错。后来的思路一直以为是代码写错了。导致在项目里检查...
springboot+echarts+monggodb数据可视化分析
06-13
Spring Boot 是一个基于 Spring 框架的开发框架，它可以帮助开发者快速搭建 Web 应用程序。结合 ECharts 和 MongoDB，可以实现数据可视化分析的功能。 下面是一个简单的使用 Spring Boot、ECharts 和 MongoDB 进行数据可视化分析的流程： 1. 创建 Spring Boot 项目，配置 MongoDB 数据库连接。 2. 创建 MongoDB 数据库 DAO 层，读取数据。 3. 创建控制器层，将数据转换为 ECharts 所需的格式，并返回给前端页面。 4. 前端页面使用 ECharts 的 API，在页面中绘制各种类型的图表。 5. 根据实际需求，对图表进行样式、交互、动画等方面的调整和优化。 下面是一个简单的示例代码： ```java // 创建 MongoDB 数据库 DAO 层，读取数据 @Repository public class MyCollectionDAO { @Autowired private MongoTemplate mongoTemplate; public List<MyCollection> findAll() { return mongoTemplate.findAll(MyCollection.class); } } // 创建控制器层，将数据转换为 ECharts 所需的格式，并返回给前端页面 @RestController @RequestMapping("/chart") public class ChartController { @Autowired private MyCollectionDAO myCollectionDAO; @GetMapping("/data") public Map<String, Object> getData() { List<MyCollection> data = myCollectionDAO.findAll(); // 将数据转换为 ECharts 所需的格式 List<String> names = data.stream().map(item->item.getName()).collect(Collectors.toList()); List<Integer> values = data.stream().map(item->item.getValue()).collect(Collectors.toList()); Map<String, Object> result = new HashMap<>(); result.put("names", names); result.put("values", values); return result; } } // 前端页面使用 ECharts 的 API，在页面中绘制图表 <script> $.get("/chart/data", function(data) { var chart = echarts.init(document.getElementById('chart')); chart.setOption({ title: { text: '数据可视化分析' }, tooltip: {}, xAxis: { data: data.names }, yAxis: {}, series: [{ name: '数值', type: 'bar', data: data.values }] }); }); </script> ``` 以上是一个简单的使用 Spring Boot、ECharts 和 MongoDB 进行数据可视化分析的流程和示例代码。实际应用中，还需要更加细致的处理和优化，例如数据筛选、分组、聚合、排序等，以及图表样式、交互、动画等方面的定制和优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小海海不怕困难

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值