深入分析echarts暂无数据

DIWNM • 2025-04-23 00:48 • 编程

一、概述

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暂无数据的提示机制，并学会了如何定制和处理暂无数据的情况。在实际的开发中，我们可以根据自己的需求来合理运用这些技巧，让图表更加完善和友好。

原创文章，作者：DIWNM，如若转载，请注明出处：https://www.506064.com/n/371398.html