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

最新推荐文章于 2024-04-07 10:59:37 发布
最新推荐文章于 2024-04-07 10:59:37 发布
阅读量9.3k 收藏 29
点赞数 5
分类专栏： Echarts 文章标签： Echarts异步加载数据 增加loading动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/PY0312/article/details/104506990
版权

文章目录

一、简介

Echarts 图表在异步请求数据时，如果加载时间较长，一个空的坐标轴放在画布上会让用户觉得是不是产生 bug 了，

因此需要一个 loading 的动画来提示用户数据正在加载。

好文章 记得收藏+点赞+关注额 ！！！

---- Nick.Peng


二、增加loading加载动效

2.1 实现原理

  • 利用 ECharts 提供的 showLoading方法显示动画，数据加载完成后再调用 hideLoading 方法隐藏加载动画。

2.2 实现步骤

  • 定义一个function()，完成配置项，定义一个空模板，并显示一个空坐标；
  • 调用myChart.showLoading();方法显示 loading 动画；
  • 调用fetchData();方法，发起异步请求；
  • 定义一个fetchData();方法，动态加载数据，并将成功返回的数据添加到空模板中；
  • 在异步请求成功返回后，调用myChart.hideLoading();方法隐藏加载动画；

2.3 实现效果图

  • 在这里插入图片描述

三、完整源代码及解析

  • 可作为模板，使用时只需要修改其中的配置项即可
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>异步加载loading动效</title>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;">
最低0.47元/天 解锁文章
ECharts 异步加载数据及loading 动画
grootbaby
12-03 1万+
异步加载 echarts 示例中的数据是在初始化后setOption中直接填入的，但是很多时候可能数据需要异步加载后再填入。ECharts 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。 var myChart = echarts.init(document.getElementById('...
echarts异步数据加载和动画加载
2301_80975885的博客
05-15 332
.get("咖啡店各年订单.json",function(data){在属性里添加这一段 --allow-file-access-from-files。加载数据完成后，隐藏加载动画 myChart.hideLoading();设置动画时间setTimeout()函数（1000就是动画设置为1秒）组件设置，数据之类的都包在mychart.setOption里。如果需要在谷歌浏览器中运行则需要更改浏览器设置。调用json文件里的data数据。
echarts
u010004858的专栏
09-21 444
var data = [ {name: '海门', value: 9}, {name: '鄂尔多斯', value: 12}, {name: '招远', value: 12}, {name: '舟山', value: 12}, {name: '齐齐哈尔', value: 14}, {name: '盐城', value: 15}, {name: '赤峰', value: 16}, {name: '青岛', value: 18}, {na...
echarts系列：echarts增加loading
浪潮行舟_chenjin2136
03-21 2458
可以在加载数据前手动调用该接口显示加载动画，在数据加载完成后调用 hideLoading 隐藏加载动画。最近在大屏项目研发时，存在多个echarts图表，有些接口获取数据较慢，需要加loading样式；可选，加载动画类型，目前只有一种’default’翻阅api，找到showLoading可进行设置。
echarts 自带loading属性配置，echarts实例属性详解
红烧咸咸鱼
04-07 3168
echarts 自带loading属性配置，echarts实例属性详解
echarts增加loading加载效果
qq_38519358的博客
07-23 2万+
echarts设置数据加载前显示loading动画效果： 划重点：利用echart自带showLoading()方法； eg: 在调用setoption方法之前调用showLoadin()方法；之后再调用hideLoading()方法 import echarts from 'echarts'; const mycharts = echarts.init(document.getEle...
echarts环形图修改高亮部分的凸起高度
mentalitys的博客
11-22 3367
app.title = '环形图'; option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, legend: { orient: 'vertical', x: 'left', ...
echarts增加loading加载效果，以免界面上出现长时间空白
craftsman2020的博客
02-08 2088
https://blog.youkuaiyun.com/weixin_42995083/article/details/107379294
Echarts通过Ajax实现动态数据加载
03-29
// 数据加载完之前先显示一段简单的loading动画 myChart.showLoading(); // 准备接收数据的数组 var names = []; // 类别数组（实际用来盛放X轴坐标值） var nums = []; // 销量数组（实际用来盛放Y坐标值） ...
在一个html加载多个echarts,Echarts一个页面加载多个图表及图表自适应
weixin_28687415的博客
06-09 3199
Echarts一个页面加载多个图表及图表自适应模块化加载//入口require.config({paths: {echarts: 'http://echarts.baidu.com/build/dist'}});//按需加载=====================================================require(['echarts','echarts/chart/b...
echarts地图加载demo
08-12
实现了一个地图加载的demo,感觉行的话就行,共同学习进步嘛,积分就不多要了
Echarts loading 动画
懿_51335316的博客
03-29 1609
Echarts showLoading hideLoading import echarts from "echarts"; methods: { //调用 showLoading 方法显示 load(){ let myChart = echarts.init(document.getElementById('histogram_2_center_1')); myChart.showLoading({ text: "数据加载中...", c
ajax 异步加载加载动画
浮華落尽
08-02 323
ajax 异步加载加载动画 $.ajax({ url: '${pageContext.request.contextPath}/id',//地址 dataType: 'json',//数据类型 type: 'Post',//类型 contentType: "application/json;charset=UTF-8", // data:JSON.stringify(data),//参数 JSON.st.
echarts loading加载页&工具栏
iamapsycho的博客
08-31 8388
echarts的loading加载和工具栏
Vue中echarts图表实现loading效果实例
热门推荐
June.1
03-20 2万+
data() 初始化数据调用数据 mounted() 周期函数内获取画布节点,并且调用加载loading和图表渲染 computed计算属性内定义echarts渲染内容以及数据请求 当服务器返回数据 hideLoading() 注意：loading方法要定义在计算属性的get方法中,set可以不做任何定义。这样图表于loading样式在画布上不会冲突 <template> ...
ECharts——异步加载与loading界面
娓娓道来
08-28 1965
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="echarts/echarts.min.js" type="text/javascript" charset="utf-8"></...
echarts 加载loading 动画
简析的博客
07-20 5581
echarts 加载慢，想要loading动画，但是自带的不能修改那个图表的样式，只能修改文字样式。样式不是去我想要的 如下 //echarts3 加载动画 showLoading(); hideLoading();//关闭loading 写到ajax里，成功调用后 加 layui自带loading效果，于是改用layui的loading //注意，layer.msg默认3秒自动...
echarts loading加载页&工具栏及异步多条曲线实现
wchqzhy99的专栏
01-20 473
echarts的loading加载和工具栏 1.toolbox：这是ECharts中的工具栏。内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。 2.toolbox中的属性，不包含五个工具。里面最主要的就是feature这个，这是toolbox的配置项，五个工具的配置就是在这个里面实现的。 属性 类型 说明 show boo...
ECharts两种动画效果
ZHI_MO_WEN的博客
03-03 8073
实现echarts桑基图两种动画效果
echarts柱状图 等待加载动画
最新发布
01-16
### 实现 ECharts 柱状图中的等待加载动画 为了提升用户体验，在数据尚未准备好之前展示一个等待加载的提示是非常重要的。可以通过设置 `loading` 属性来显示默认样式或自定义样式的加载指示器。 #### 使用内置加载动画 最简单的方式是利用 ECharts 自带的支持，只需一行代码即可开启： ```javascript chart.showLoading(); ``` 当数据准备完毕并完成渲染之后，记得关闭加载状态： ```javascript chart.hideLoading(); ``` 这段简单的 JavaScript 语句会在图表实例上启用标准的 HTML5 加载图标[^1]。 #### 定制化加载效果 如果希望提供更加个性化的加载体验，则可以在调用上述方法时传递额外参数来自定义加载选项： ```javascript // 显示带有特定样式的加载层 myChart.showLoading({ text: '正在努力加载...', // 文字说明 color: '#c23531', // 转圈颜色 maskColor: 'rgba(255, 255, 255, 0.8)', // 遮罩背景色，默认透明度为0.7 }); // 数据处理完成后隐藏加载层 setTimeout(function () { myChart.setOption(option); myChart.hideLoading(); }, 3000); // 延迟模拟异步操作时间 ``` 此段脚本不仅设置了文字描述和色彩方案，还通过延迟函数模仿了一个耗时的数据请求过程[^2]。 对于更复杂的场景，比如从服务器端拉取 JSON 格式的数据源，可以结合 AJAX 请求或其他 HTTP 库来进行实际开发工作[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值