一、简介
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;"></div> <!-- 引入jQuery.js文件 --> <script src="https://libs.cdnjs.net/jquery/3.4.1/jquery.js"></script> <!-- 引入 echarts.js --> <script src="js/echarts.js"></script> </head> <body> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); $(function() { // 指定配置项,显示标题和空的坐标轴 myChart.setOption({ title: { text: 'ECharts异步加载loading动效示例' // 图表标题 }, tooltip: {}, legend: { left: 300, // 图例距Dom左侧的距离 data:['销量'] // 图例 }, xAxis: { data: [] }, yAxis: {}, // y轴默认自动 series: [{ // 柱状图 type: 'bar', data: [], // 显示标签数量 label: { normal: { show: true, position: 'top' // 显示位置 } }, //配置样式 itemStyle: { //通常情况下样式 normal:{ //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组 color: function (params){ var colorList = ['#8dc63f','#add8e6','#ffb6c1','#f37b1d','#A6A6D2','#F0E68C','#CA8EC2']; return colorList[params.dataIndex]; } }, //鼠标悬停时,显示强调效果 emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, }], }); // 显示loading动画 myChart.showLoading(); fetchData(); }) // 延迟3秒,模拟动态异步加载数据 function fetchData() { setTimeout(function() { $.get('data/data.json').done(function(data){ // 数据加载完成后,再调用 hideLoading 方法隐藏加载动画 myChart.hideLoading(); // 填入数据到上面空模板 myChart.setOption({ xAxis: { data: data.type_list }, series: [{ // 注意:!!!根据名字对应到相应的系列 name: '销量', data: data.num_list }] }) }) },3000) } </script> </body> </html>