echarts3 loading动画无法去除解决方案

解决方案一：

不使用showloading，判断传入数据是否为空。

若数据为空，覆盖一层div。

若数据不为空，则隐藏div

解决方案2：

利用echarts的graphic。初始化是加入graphic。有数据时再利用id移除掉graphic。

初始化时：

在setoption中加入：

graphic:[{type: 'group',id:'inittext',left: '1%',top: 'center',children: [{type: 'rect',z: 100,left: 'center',top: 'middle',shape: {width: 500,height: 242,},style: {fill: 'rgba(0,0,0,0.01)',}},{type: 'text',z: 100,left: 'center',top: 'middle',style: {fill: '#000',text: ['暂无数据',].join('\n'),font: '14px Microsoft YaHei'}}]}],

在有数据的setoption中加入：

 graphic:[{id:'inittext',$action:'remove',}],

参考链接：https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-3u872dym.html

https://echarts.baidu.com/option.html#graphic.elements-group.bounding

https://www.echartsjs.com/gallery/editor.html?c=line-graphic

https://github.com/apache/incubator-echarts/issues/4829

echarts3 loading动画无法去除解决方案相关推荐

CSS学习--DIY Loading动画
首先要知道什么是CSS3动画?然后才能做出自己想要的动画效果.下面会通过3个简单的Loading动画效果来对CSS3 animation动画做一个简单介绍,希望对你有用. 动画是使元素从一种样式逐渐变 ...
分享web前端七款HTML5 Loading动画特效集锦
以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...
一款炫酷Loading动画--载入成功
简单介绍昨天在简书上看到一篇文章.介绍了一个载入动画的实现过程一款Loading动画的实现思路(一) 仅仅可惜原动画是IOS上制作的.而看了一下.作者的实现思路比較复杂,于是趁着空暇写了一个And ...
loading动画_超干货 CSS3/SVG Loading动画集合
随着css3实现各种炫酷动画效果越来越流行.今天给大家推荐一些css3和SVG实现loading加载动画效果. 先上一波令人愉悦的动画效果. 怎么样,是不是感觉很nice,那就继续往下看吧.这里为大家 ...
android loading封装_我们经常用的Loading动画居然还有这种姿势
背景 Loading动画几乎每个Android App中都有. 一般在需要用户等待的场景,显示一个Loading动画可以让用户知道App正在加载数据,而不是程序卡死,从而给用户较好的使用体验. 同样的 ...
axios vue 加载效果动画_vue中使用axios拦截器实现数据加载之前的loading动画显示 @劉䔳...
首先新建一个 loading.vue组件,写loading动画效果 .loader { width: 100%; height: 100%; display: flex; align-items: c ...
纯CSS3文字Loading动画特效
纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载更多专业前端知识,请上 [猿2048]www.mk2048.com
[Swift通天遁地]五、高级扩展-(11)图像加载Loading动画效果的自定义和缓存
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ➤微信公众号:山青咏芝(shanqingyongzhi) ➤博客园地址:山青咏芝(https://www.cnblog ...
loading窗口动画 web_在页面未加载完之前显示loading动画
在页面未加载完之前显示loading动画 loading动画代码demo use-pseudo-class .loading{ width: 100px; height: 100px; border: ...

echarts3 loading动画无法去除解决方案

解决方案一：

解决方案2：

echarts3 loading动画无法去除解决方案相关推荐

最新文章

热门文章