正文

如何在无数据时让ECharts图表优雅地显示“暂无数据”提示

/0 浏览量
0508

在数据可视化领域，ECharts 是一款功能强大且灵活的图表库。然而，在实际应用中，我们经常会遇到数据缺失的情况。这时，如何让图表优雅地显示“暂无数据”提示，不仅关系到用户体验，也体现了产品的专业度。以下是一些实现方法：

1. 使用 ECharts 的内置提示功能

ECharts 提供了 notFound 配置项，可以用来设置当数据为空时显示的提示信息。

var myChart = echarts.init(document.getElementById('main'));

var option = {
    xAxis: {
        type: 'category',
        data: []
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [],
        type: 'bar'
    }],
    tooltip: {},
    notFound: {
        title: '暂无数据',
        left: 'center',
        top: 'center'
    }
};

myChart.setOption(option);

2. 自定义提示信息

如果内置的提示信息无法满足需求，可以自定义提示信息。

var myChart = echarts.init(document.getElementById('main'));

var option = {
    xAxis: {
        type: 'category',
        data: []
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [],
        type: 'bar'
    }],
    tooltip: {},
    notFound: {
        title: '非常抱歉，当前没有可展示的数据。',
        left: 'center',
        top: 'center'
    }
};

myChart.setOption(option);

3. 使用 legend.data 和 series.data 控制显示

在某些情况下，可能只需要控制图例或系列数据的显示。这时，可以通过设置 legend.data 和 series.data 来实现。

var myChart = echarts.init(document.getElementById('main'));

var option = {
    xAxis: {
        type: 'category',
        data: []
    },
    yAxis: {
        type: 'value'
    },
    legend: {
        data: []
    },
    series: [{
        name: '系列1',
        type: 'bar',
        data: []
    }],
    tooltip: {},
    notFound: {
        title: '当前没有可展示的数据。',
        left: 'center',
        top: 'center'
    }
};

myChart.setOption(option);

4. 使用 ECharts 的 dataZoom 功能

当图表数据量较大时，可以使用 dataZoom 功能进行缩放。如果数据为空，可以设置 dataZoom 的 start 和 end 为 0，从而隐藏缩放区域。

var myChart = echarts.init(document.getElementById('main'));

var option = {
    xAxis: {
        type: 'category',
        data: []
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [],
        type: 'bar'
    }],
    tooltip: {},
    dataZoom: [{
        type: 'slider',
        start: 0,
        end: 0
    }],
    notFound: {
        title: '当前没有可展示的数据。',
        left: 'center',
        top: 'center'
    }
};

myChart.setOption(option);

总结

通过以上方法，可以在 ECharts 图表中优雅地显示“暂无数据”提示。在实际应用中，可以根据具体需求选择合适的方法。希望这些方法能对您有所帮助！

-- 展开阅读全文 --