【echart】showLoading hideLoading 无数据时显示正在加载

1.要实现的功能当echart无数据时显示数据加载中！有数据显示echarts图形

 2.实现步骤（showLoading可根据要求设置样式）

myChart.showLoading({
    text: '数据加载中...',
    color: '#c23531',
    textColor: '#ffffc2',
    maskColor: 'rgba(255, 255, 255, 0)',
    zlevel: 0
});

 3.全部代码

<template>
    <div >
        <div  id="top" style=" 100%;height: 100%" ></div>
    </div>
</template>

<script>
    import {getFlow} from '@/api/dashboard';
    export default {
        name: "TopRightChart",
        data(){
            return{
                dataFlow:{},
            }
        },
        mounted(){
            this.drawLine()
        },
        methods:{
            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                var myChart = this.$echarts.init(document.getElementById('top'))
                myChart.showLoading({
                    text: '数据加载中...',
                    color: '#c23531',
                    textColor: '#ffffc2',
                    maskColor: 'rgba(255, 255, 255, 0)',
                    zlevel: 0
                });
                getFlow('60').then(res=>{
                    this.dataFlow=res.data.data
                    myChart.hideLoading();
                    myChart.setOption({
                        xAxis: {
                            data:  this.dataFlow.xdata
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            data:  this.dataFlow.deny
                        }]
                    });
                })
                var option={
                        xAxis: [      //部分样式省略
                            {
                                data:[],   
                            }
                        ],
                        series: [
                            {
                                data: []  //部分样式省略
                            }

                        ]
                    }
                myChart .setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            }
        }
    }
</script>
<style scoped>
</style>