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

文章目录

  • 一、简介
  • 二、增加loading加载动效
    • 2.1 实现原理
    • 2.2 实现步骤
    • 2.3 实现效果图
  • 三、完整源代码及解析

一、简介

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

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

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

---- Nick.Peng


二、增加loading加载动效

2.1 实现原理

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

2.2 实现步骤

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

2.3 实现效果图

  • Echarts 图表在异步加载数据时,增加loading动画,提升用户体验感_第1张图片

三、完整源代码及解析

  • 可作为模板,使用时只需要修改其中的配置项即可
    
    <html>
    <head>
        <meta charset="utf-8">
        <title>异步加载loading动效title>
        
        <div id="main" style="width: 600px;height:400px;">div>
        
        <script src="https://libs.cdnjs.net/jquery/3.4.1/jquery.js">script>
        
        <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>
    

你可能感兴趣的:(Echarts,Echarts异步加载数据,增加loading动画)