关于 echats showLoading 无法显示的问题

最新推荐文章于 2024-05-15 17:13:36 发布
最新推荐文章于 2024-05-15 17:13:36 发布
阅读量1k 收藏
点赞数
分类专栏： echats 文章标签： echats
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42340514/article/details/91383356
版权

 

当使用ajax的时候发现showLoading不生效，造成的原因是因为我们在ajax请求的时候设置的sync为FALSE，这样的话echarts等到数据的时候才会去加载，因此不会显示加载动画。 
但是有人会有这样的疑问，设置sync为true的时候，ajax确实去请求数据了，但是没等到数据返回函数已经执行完毕了，没有数据的option加载出来造成空的图表。其实解决方案很简单，我们可以把整个option和setOption这些全部封装成函数，在ajax返回success的时候去执行
 

格格巫仙女
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[echarts]使用ajax获取数据作图showLoading()失效问题解决
ZhiMaHuyizhi的博客
02-15 626
使用ajax获取数据作图showLoading()失效问题解决
echarts地图省市区三级下钻联动
04-06
// 更新ECharts配置，显示城市地图 this.chart.setOption({ series: [ { name: '城市', type: 'map', mapType: provinceName, roam: false, label: { show: true, }, itemStyle: { normal: { ...
关于Echarts showLoading不生效的解决方案
trnanan的博客
01-03 9758
echarts showLoading不生效的解决方案
echarts异步数据加载和动画加载
最新发布
2301_80975885的博客
05-15 201
.get("咖啡店各年订单.json",function(data){在属性里添加这一段 --allow-file-access-from-files。加载数据完成后，隐藏加载动画 myChart.hideLoading();设置动画时间setTimeout()函数（1000就是动画设置为1秒）组件设置，数据之类的都包在mychart.setOption里。如果需要在谷歌浏览器中运行则需要更改浏览器设置。调用json文件里的data数据。
Echarts 隐藏加载动画再显示,图表缩放问题
m0_74444744的博客
05-09 443
图表是根据你定义的div 的样式来确定图表的大小，当图表隐藏时，Echarts会找不到div的宽和高，再次显示时它会给自己一个默认的宽高,造成宽高缩放问题,进行图表显示时，原本是将关系图先隐藏，然后点击按钮让它再显示出来，但是再显示时，关系图出现了问题，它变得特别小，宽高不跟随父盒子大小,造成缩放问题。在完成绘画echarts后添加代码：$(window).resize(myChart.resize());
echart showLine没有显示的原因
meteorboy2009的博客
10-10 1753
1，如果你是直接页面展示的话，那么可能是你缺少参数基本的一个例子是下面这样： myChart.showLoading({           text : "数据正在统计中...",         textStyle : {fontSize : 18}      }); myChart指的是我放图表的div 2,如果是通过后台获取数据的话，那么可能的原因是： AJAX使
关于echarts进入一直显示loading（代码没错）
qq_42562636的博客
08-12 3899
代码没问题的前提下 还一直出现loading 无效果 方法： jQuery的版本问题 我用的是3.0.0 改成1.7.2之后就好了
Echarts3完全版
03-03
此外，还有`resize`、`dispatchAction`、`showLoading`等API，分别用于图表的大小调整、触发图表的行为以及显示加载动画。 ECharts3的源码分析对于深入理解其工作原理和优化技巧非常有帮助。源码中包含了各种图表的...
echarts.min.js
07-02
myChart.showLoading(); // 引入JSON文件 $.getJSON(uploadedDataURL, function(geoJson) { // 注册地图名字(tongren)和数据(geoJson) echarts.registerMap('tongren', geoJson); // 隐藏动画加载效果。...
Vue+Echarts 项目演练 中心地图容器json数据
04-24
在本项目中，我们将探讨如何在Vue.js框架中结合Echarts库来实现一个中心地图容器，其中涉及到的主要知识点包括Vue.js的基本用法、Echarts的图表渲染以及json数据的处理。首先，我们来详细了解这三个核心概念。 Vue....
在vue中使用Echarts画曲线图的示例
10-14
注意，我们在请求数据前后分别调用了`myChart.showLoading()`和`myChart.hideLoading()`来显示和隐藏加载动画，提升用户体验。 4. **HTML模板**： 最后，别忘了在Vue组件的模板部分添加一个用于渲染ECharts图表的...
echarts3 loading动画无法去除解决方案
weixin_38383877的博客
02-18 3156
解决方案一：                       不使用showloading，判断传入数据是否为空。                       若数据为空，覆盖一层div。                       若数据不为空，则隐藏div 解决方案2：                       利用echarts的graphic。初始化是加入graphic。有数据时再...
ECharts图表首次加载不显示问题
weixin_72018800的博客
06-19 1288
你进页面他是不会显示的所有图表的，你会发现你请求的接口返回的是200。原本页面是一进去就加载所有显示图表，然而现实是这样的。这个时候你就得在你的组件使用v-if判断他是不是有值。
Vue中echarts加载不出问题
weixin_44080648的博客
10-10 1万+
Vue中echarts加载不出问题 最近刚接触echarts，做了些基础的图表，也踩了好几个坑。总结一下echarts图加载出不来可能有以下两方面的问题（目前遇到的）： 1.没有给charts图设置宽高！ 2.项目中echarts的id重复 如果init图表时，使用document.getElementById的方式获取元素的id，此时charts图的id一定不能重复！跨页面不重复！否则可能会出现charts图不显示的问题！！ 较好的init方法是，采用ref的方式，而不要用原生的document.getE
＜ReactEcharts/＞组件属性参数记录
weixin_55763825的博客
09-05 834
echarts-for-react的组件属性参数介绍
echarts增加loading加载效果
热门推荐
qq_38519358的博客
07-23 1万+
echarts设置数据加载前显示loading动画效果： 划重点：利用echart自带showLoading()方法； eg: 在调用setoption方法之前调用showLoadin()方法；之后再调用hideLoading()方法 import echarts from 'echarts'; const mycharts = echarts.init(document.getEle...
flutter 弹窗flutter_easyloading
weixin_44911775的博客
06-08 1694
网上很多自定义弹窗界面，可以通过界面跳转的方式显示和隐藏，但是对于我来说有点难，因为弹窗往往会结合网络请求，这时候用插件的方式会好很多 插件地址如下 首先在界面初始化 然后使用......
echarts showloading
04-10
b'echarts showloading' 是 JavaScript 数据可视化库 echarts 中的一个方法，用于在图表加载数据时显示一个加载中的动画和文本提示。该方法可以增强用户体验，同时也可以防止用户在数据加载过程中进行操作导致程序出错。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值