综合网上找到的一些方法,大致如下:
- 借用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'
}
}