从后端取出来的数据无法放入echarts图表中

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量599 收藏 2
点赞数 1
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52851472/article/details/126636261
版权

        原本通过第一个方法mysq（）获取数据，在赋值给data中的temp，结果可以console.log（）打印出来但是不能放在下面echarts中的数据里面，一放进去就会报错，页面显示的是temp的初始值，而从后端读的值怎么也获取不到。

 解决：

不要把获取数据和echarts图表分为两个方法，而是把他俩合二为一，直接在初始化echarts方法中获取数据，然后赋值，把mysql方法删了，里面内容直接放在initchart中完美解决。如下图

最后把获取到的数据直接放入echarts所需填数据的地方就好了！大功告成！

 可以显示啦~

 

 

 

weixin_52851472
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
怎么样让ECharts从后台获取数据并展示
08-11
今天有空，把项目中用到的几个报表图形拿出来分享一下。 主要是饼图和柱状图，结合点击事件获取点击的数据。
echarts 图表无数据/空数据 展示“暂无数据”
热门推荐
细节怪的博客
08-15 2万+
我们从后端获取数据动态渲染图表时，难免会遇到数据为空的情况（虽然实际应用中这样的bug极少遇到），但考虑周全一点也好，看如何实现吧。
echarts 图表引入报错怎么回事，经验分享，太牛了
m0_60388149的博客
03-18 261
data: [‘第一次’, ‘第二次’, ‘第三次’, ‘第四次’, ‘第五次’, ‘第六次’, ‘第七次’]data: [‘李士乐’, ‘黄金鹏’, ‘王圳森’, ‘刘燕飞’, ‘韩洋’]name: ‘李士乐’,name: ‘黄金鹏’,name: ‘王圳森’,name: ‘刘燕飞’,name: ‘韩洋’,
Echarts封装组件及请求数据后没有加载
Circle666的博客
11-25 1810
1.引用加载失败解决方案 <bar :bardata="pieData" charts="chartsOne" styleDir="right" v-if="flag" ></bar> flag标志判断，在接口请求成功之后改变flag为true即可 2.具体代码记录 <div style="width:100%;height:50%;clear:both;"> <div :style="{ float: echartsDir }" ref="
如何用axios调接口数据赋给echarts（中国疫情地图）
qq_56989560的博客
04-29 1942
如何用axios调接口数据赋给echarts（中国疫情地图）
关于Vue中使用Echarts获取不到接口的动态数据问题
weixin_65321799的博客
07-27 432
当我们直接在 setup 中使用 echart时 或则 onMounted中时， 此时数据还没返回就已经挂载了。// 当接口请求成功后， 在设置echarts配置， 这样就能解决数据获取不到问题。这就牵扯到同步和异步问题，
Echarts 后台拿到的数据 x 和数据 y 在页面上对应 y 和 x
虎康的博客
04-20 466
当我们拿到后台数据并已经固定了x 轴和 y 轴的 data，但返回的数据和我们想要的 x 和 y 是相反的，这个时候不需要后端再去重新处理，我们可以使用 option 中的 series[i].encode 配置项， 指定数组中每个元素所对应的可视化属性，然后在 xAxis 中指定对应维度对应的坐标轴轴标签名称即可。Echarts 后台拿到的数据 x 和数据 y 在页面上对应 y 和 x。
从后端数据库获取数据并传值到前端vue项目的echarts柱状图/折线图/饼图里
Ava_16的博客
07-17 1万+
不同图表的数据获取有一定的区别 在这些区别上花了不少功夫试验，把最后成功的方法做个记录，如果有类似项目要做的话，也可看看当个参考。 后端 后端都大同小异，方法上没有区别，在这里以柱状图为例。 sql：数据库的表格先写好，名称、类型、数据，然后连接数据库 用的是Navicat写，表名：sys_mapbar 在IDEA里，写XML文件，与数据库调用直接相关的语句 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper
vue整合echarts图表动态赋值没有效果的问题解决方法
weixin_46448867的博客
01-16 2816
vue整合echarts图表动态赋值没有效果的问题解决方法
Echarts图表使用后台数据不显示问题解决
yrrjiayou的博客
05-13 8535
Echarts图表使用后台数据不显示问题解决
Ajax获取到数据放入echarts里不显示的原因分析及解决办法
10-22
在做一个需要用到echarts地图的项目的时候，成功通过ajax...但是，放到echarts option.series[0].data里，获取不到数据。在生成的地图上无法看到你从后台获取到的值，下面小编给大家分享我的解决办法，需要的朋友参考下
Vue 之 echarts 图表数据可视化常用的一些图表动态图表3D图表的简单整理
08-05
相关说明地址： vue 中添加 echarts ，然后在 vue 中简单使用一些 echarts中常用的图表，包括一些动态的图表、3D的图表等 ，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。
vue+echarts实现动态绘制图表及异步加载数据的方法
10-17
vue写的后台管理，需要将表格数据绘制成图表（折线图，柱状图），图表数据都是通过接口请求回来的。这篇文章主要介绍了vue+echarts 动态绘制图表及异步加载数据的相关知识,需要的朋友可以参考下
HTML按钮控制数据源 + echarts图表展示
12-26
此小demo是一个有关按钮控制数据源（点击不同的按钮显示不同的数据），最后利用echarts将数据展示在前端
java后台生成echarts图表
11-13
echarts-java 通过phantomjs java后台生成echats图表，echartspoi相关jar包及phantomjs都在压缩包内
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 621
步骤很详细，直接上教程……
vue2---修饰符
weixin_45503872的博客
04-24 1060
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
Redux 状态持久化之 redux-persist 使用示例
笔记、经验、日常分享
04-24 358
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。
echarts图表是怎么和后端接口数据动态显示出来的 详细步骤写法
05-31
ECharts图表是通过JavaScript代码动态生成的，而数据则通过与后端接口进行交互获取。以下是ECharts图表与后端接口数据动态显示的详细步骤： ...通过以上步骤，ECharts图表就可以与后端接口数据动态显示出来了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值