ECharts 异步加载数据，显示加载状态ECharts 异步加载数据，显示加载状态 showloading & hid

参考文档

具体实现

通过官方提供的两个api方法

showLoading 显示load状态

通过option可以自定义加载的文字和状态

hideLoading 关闭load状态

代码参考如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>chart</title>
    <style>
        #main {
            width: 500px;
            height: 400px;
        }
    </style>
    <script type="text/javascript"
        src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/echarts.min.js"></script>
</head>

<body>
    <div id="main"></div>
</body>
<script>
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [],
                type: 'line'
            }
        ]
    };
    // 展示load
    myChart.showLoading(
        // 有默认设置
        // 下面是自定义设置
        {
            text: '正在加载中...',
            color: '#c23531',
            textColor: '#000',
            maskColor: 'rgba(255, 255, 255, 0.8)',
            zlevel: 0
        }
    );
    // 模拟接口
    setTimeout(() => {
        // 接口返回，关闭load
        myChart.hideLoading();
        // 返回的数据渲染图表
        myChart.setOption({
            xAxis: {
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                }
            ]
        })
    }, 3000);
    option && myChart.setOption(option);
</script>

</html>

自定义加载的动画

官方教程-自定义加载动画
tips：通过自定义动画也可以实现数据为空的时候显示的空状态