您的位置:

深入分析echarts暂无数据

一、概述

echarts是一个基于JavaScript的数据可视化库,它可以让开发者轻松地在网页上制作出漂亮的图表。然而,在实际的开发过程中,我们难免会遇到一些没有数据的情况,这时候echarts会显示“暂无数据”的提示。

二、显示暂无数据的场景

在echarts中,当我们传入的数据为空时,或者数据的格式有误时,会出现暂无数据的提示。不同的系列类型可能会有不同的提示信息,在这里我们以柱状图为例:

option = {
    title: {
        text: '某地区蒸发量和降水量'
    },
    tooltip: {},
    legend: {
        data:['蒸发量','降水量']
    },
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [
        {
            name: '蒸发量',
            type: 'bar',
            data: []
        },
        {
            name: '降水量',
            type: 'bar',
            data: []
        }
    ]
};
myChart.setOption(option);

在上面的代码中,我们将x轴的数据和两个系列的数据都置为空数组,这时候图表会显示“暂无数据”的提示。

三、定制暂无数据的提示信息

对于echarts的提示信息,我们可以通过设置全局的属性来修改。比如下面的代码可以将图表的背景色设置为浅灰色,并将暂无数据的提示信息改为“暂无数据,请稍后再试”:

option = {
    backgroundColor: '#f8f8f8',
    textStyle: {
        color: '#333'
    },
    noDataLoadingOption: {
        text: '暂无数据,请稍后再试',
        effect: 'bubble',
        effectOption: {
            effect: {
                n: 0
            }
        }
    },
    ...
};
myChart.setOption(option);

我们可以看到,noDataLoadingOption是用来配置暂无数据提示的配置项,text属性表示显示的文本,effect属性表示显示的效果,这里我们使用了“气泡”动画,并将n设为0,使得气泡消失。

四、处理数据为空的情况

在实际的开发中,我们通常需要对数据为空的情况进行处理,比如显示默认值或者显示“暂无数据”的提示。下面是一个处理空数据的示例代码:

function getData() {
    var data = [];//数据数组
    //从服务器获取数据
    ...
    if (data.length == 0) {
        //如果数据为空,则显示暂无数据的提示信息
        myChart.showLoading({
            text: '暂无数据',
            color: '#c23531',
            textColor: '#000',
            maskColor: 'rgba(255, 255, 255, 0.8)',
            zlevel: 0
        });
    } else {
        //如果数据不为空,则渲染图表
        myChart.hideLoading();
        //渲染图表代码
        ...
    }
}

在上面的代码中,我们使用了echarts内置的showLoading方法来显示暂无数据的提示信息,并使用hideLoading方法来隐藏提示。同时,我们也可以通过配置showLoading的参数来修改提示的样式。

五、小结

通过本文的介绍,我们了解了echarts暂无数据的提示机制,并学会了如何定制和处理暂无数据的情况。在实际的开发中,我们可以根据自己的需求来合理运用这些技巧,让图表更加完善和友好。