一、简介

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>

Nick Peng

发布了162 篇原创文章 · 获赞 490 · 访问量 31万+

私信关注

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

文章目录

一、简介

二、增加loading加载动效

2.1 实现原理

2.2 实现步骤

2.3 实现效果图

三、完整源代码及解析

猜你喜欢