echarts增加loading加载效果，以免界面上出现长时间空白

最新推荐文章于 2025-04-10 08:51:22 发布

craftsman2020

最新推荐文章于 2025-04-10 08:51:22 发布

阅读量2.1k

点赞数

分类专栏： Echarts 文章标签： echarts 前端 javascript

原文链接：https://blog.youkuaiyun.com/weixin_42995083/article/details/107379294

版权

Echarts 专栏收录该内容

5 篇文章

订阅专栏

这篇博客详细介绍了如何在ECharts图表中显示和隐藏加载动画，通过`bei_bot1_myChart.showLoading()`和`bei_bot1_myChart.hideLoading()`方法实现。文章探讨了在数据加载前后调整用户体验的方法，并提供了实际效果图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 bei_bot1_myChart.showLoading({
            text: 'loading',
            color: '#c23531',
            textColor: '#fff',
            maskColor: 'rgba(255, 255, 255, 0.2)',
            zlevel: 0,
          });

  // setOption前隐藏loading事件 
  bei_bot1_myChart.hideLoading();

效果图：

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

craftsman2020

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Echarts 图表在异步加载数据时，增加loading动画，提升用户体验感

Nick.Peng's Blogs

02-25

9524

文章目录一、简介二、新增loading加载动效2.1 实现原理2.2三、好文章记得收藏+点赞+关注额！！！ ---- Nick.Peng 一、简介 Echarts 图表在异步请求数据时，如果加载时间较长，一个空的坐标轴放在画布上会让用户觉得是不是产生 bug 了，因此需要一个 loading 的动画来提示用户数据正在加载。二、新增loading加载动效 2.1 实现原理利用 E...

echarts 自带loading属性配置，echarts实例属性详解

红烧咸咸鱼

04-07

3397

echarts 自带loading属性配置，echarts实例属性详解

参与评论您还未登录，请先登录后发表或查看评论

echarts系列：echarts增加loading

浪潮行舟_chenjin2136

03-21

2629

可以在加载数据前手动调用该接口显示加载动画，在数据加载完成后调用 hideLoading 隐藏加载动画。最近在大屏项目研发时，存在多个echarts图表，有些接口获取数据较慢，需要加loading样式；可选，加载动画类型，目前只有一种’default’翻阅api，找到showLoading可进行设置。

ECharts大数据量的分批加载：提升图表渲染性能

热门推荐

qq_38519358的博客

07-23

2万+

echarts设置数据加载前显示loading动画效果：划重点：利用echart自带showLoading()方法； eg: 在调用setoption方法之前调用showLoadin()方法；之后再调用hideLoading()方法 import echarts from 'echarts'; const mycharts = echarts.init(document.getEle...

Vue2 项目首屏加载缓慢？这些优化技巧快收藏！

yan1915766026的博客

01-10

1790

通过以上多种优化方法的综合运用，我们能够显著提升 Vue2 应用的首屏加载速度，为用户带来流畅、高效的浏览体验。但优化工作并非一劳永逸，随着项目的迭代、业务的拓展以及技术的演进，我们需要持续关注首屏加载性能。一方面，不断审视项目中的新模块、新依赖，看是否有潜在的性能瓶颈，及时运用本文所讲方法进行处理。例如，后续引入新的第三方组件库时，立刻考虑按需引入策略，避免包体积膨胀。另一方面，密切关注前端技术领域的新动态，像新的打包优化算法、图片处理技术等，适时将其融入项目。

【PyEcharts性能优化】：浏览器渲染空白页的快速修复与优化

本文对PyEcharts的性能问题进行了系统分析，重点研究了浏览器渲染机制，特别是空白页的成因，包括代码层面和资源加载处理问题，以及网络与硬件的限制。接着，文章从理论基础出发，讨论了性能优化原则和渲染优化技

【Vue项目优化】：如何优雅地动态加载第三方库

![【Vue项目优化】：如何优雅地动态加载第三方库]...接着，本文详细论述了如何在Vue项目中实施第三方库的动态加载，包括策略选择与技术实现，并通过实际案例演示了动

【Django Admin可视化工具】：数据可视化技巧，提升数据展示效果

# 1. Django Admin可视化工具概述 Django Admin是Django框架内置的一个强大的后台管理系统，它提供了丰富的功能来帮助开发者管理和维护数据。在这一章中，我们将概述Django Admin，并探讨其可视化工具的能力。...

m0_54854317的博客

03-03

932

HTML和Css部分 1、对BFC规范（块级格式化上下文）的理解 BFC 块级格式化上下文一块独立的区域，有自己的规则，bfc中的元素与外界的元素互不影响 BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。怎么触发BFC 1. float的值left或right 2. overflow的值不为visible（默认） 3. display的值为inline-block、table-cell、table-caption 4. position的值为absolute（绝对定位）或f

echarts环形图修改高亮部分的凸起高度

mentalitys的博客

11-22

3397

app.title = '环形图'; option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, legend: { orient: 'vertical', x: 'left', ...

【echarts添加加载中效果】

Min_Fox的博客

02-11

2537

echarts添加加载中效果 // 1、获取div this.echart = echarts.init(document.getElementById("rate-retention-echart")); // 2、在调用接口之前，使用shiowLoading()方法 this.echart.showLoading({ text: "",color: "#8870eb" }); // 3、在画完echarts之后，使用hideLoading()方法 this.echart.hideLoading();

echarts 加载loading 动画

简析的博客

07-20

5602

echarts 加载慢，想要loading动画，但是自带的不能修改那个图表的样式，只能修改文字样式。样式不是去我想要的如下 //echarts3 加载动画 showLoading(); hideLoading();//关闭loading 写到ajax里，成功调用后加 layui自带loading效果，于是改用layui的loading //注意，layer.msg默认3秒自动...

ECharts 使用 showLoading

yijiupingfan0914的博客

11-26

1万+

使用ECharts自带的showLoading方法进行提示： var dom = document.getElementById('container'); var myChart = echarts.init(dom); function chart() { option = { /****/ } } myChart.showLoading({ text: '正在加载数据' }); //...

echars加载动画loading，showLoading(), hideLoading()

honeymoon_的博客

07-01

2807

记录echars加载动画loading需求的完成过程注：绘制echars图表和请求接口不在同一个组件基于准备好的dom，初始化echarts实例 myChart = echarts.init(document.getElementById('kLine')); 告诉父组件可以请求数据了 this.$emit('initSuccess'); //父组件监听这个方法 handleKLineSuccess() { //调用封装好的请求接口方法，请求数据 this.getFirs

ECharts 异步加载数据及loading 动画

grootbaby

12-03

1万+

异步加载 echarts 示例中的数据是在初始化后setOption中直接填入的，但是很多时候可能数据需要异步加载后再填入。ECharts 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。 var myChart = echarts.init(document.getElementById('...

echarts loading加载页&工具栏及异步多条曲线实现

wchqzhy99的专栏

01-20

487

echarts的loading加载和工具栏 1.toolbox：这是ECharts中的工具栏。内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。 2.toolbox中的属性，不包含五个工具。里面最主要的就是feature这个，这是toolbox的配置项，五个工具的配置就是在这个里面实现的。属性类型说明 show boo...

Echarts封装动态加载组件，并且添加循环效果

weixin_54165147的博客

01-12

942

基于 Echarts 框架的组件，用于实现数据滚动效果。在该组件中，我们首先引入了 Echarts 库，并定义了组件的名称和所需的 props 属性。在 mounted 钩子函数中，我们调用 initChart 方法来初始化图表，并使用 setInterval 定时器来触发 updateChart 方法，以实现数据滚动效果。在 updateChart 方法中，我们通过复制数据、移除数据、截取数据等操作来更新图表，并计算出当前数据索引。