新版ECharts实现“暂无数据”的完美解决方案

在旧版ECharts中，此功能是通过配置noDataLoadingOption来实现的，但此配置项在新版中已经被移除综合网上找到的一些方法，大致如下：借用Title来显示“暂无数据”通过showLoading的方法来显示通过graphic来配置第一种方法属于取巧的方法，如果不使用统计图自带标题的话，是没问题的。但如果使用了标题的话，就会产生冲突了title: {show: data.length

Harryfin

13757人浏览 · 2021-09-22 14:20:34

Harryfin · 2021-09-22 14:20:34 发布

在旧版ECharts中，此功能是通过配置noDataLoadingOption来实现的，但此配置项在新版中已经被移除

综合网上找到的一些方法，大致如下：

借用Title来显示“暂无数据”
通过showLoading的方法来显示
通过graphic来配置（最佳方案）

第一种方法属于取巧的方法，如果不使用统计图自带标题的话，是没问题的。但如果使用了标题的话，就会产生冲突了

title: {
    show: data.length == 0,   // 没数据才显示
    extStyle: {
        color: "grey",
        fontSize: 20
    },
    text: "暂无数据",
    left: "center",
    top: "center"
}

第二种方法是借用了“加载中”提示的遮罩层来实现的。这种方法不会和自带标题产生冲突，但是要注意下次加载出数据时，要用hideLoading把遮罩层隐藏起来，并且要把提示等待的那个转圈隐藏起来。由于是遮罩层，所以会导致原统计图的标题变灰，显示效果受到影响

myChart.showLoading({
    text: '暂无数据',
    showSpinner: false,    // 隐藏加载中的转圈动图
    textColor: '#9d9d9d',
    maskColor: 'rgba(255, 255, 255, 0.8)',
    fontSize: '25px',
    fontWeight: 'bold',
    fontFamily: 'Microsoft YaHei'
});

第三种方法是在统计图上创建一个图片（可以理解为图层），然后在上面写上“暂无数据”的提示。这种方法也不会和自带标题产生冲突，同时不会像遮罩层那样导致标题变灰，是我认为比较完美的方法

graphic: {
    type: 'text',     // 类型：文本
    left: 'center',
    top: 'middle',
    silent: true,     // 不响应事件
    invisible: data.length > 0,   // 有数据就隐藏
    style: {
        fill: '#9d9d9d',
        fontWeight: 'bold',
        text: '暂无数据',
        fontFamily: 'Microsoft YaHei',
        fontSize: '25px'
    }
}