我们从后端获取数据动态渲染图表时,难免会遇到数据为空的情况(虽然实际应用中这样的bug极少遇到),但考虑周全一点也好,看如何实现吧。
正常情况渲染图表:
<div id="test_chart" style="width: 600px;height:400px;"></div>
<script>
let chartData = [5, 20, 36, 10, 10, 20];
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('test_chart'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: chartData //动态数据
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
我们只需要:在定义option的外面加一个if条件判断,判断动态获取的数据是否有值,有则渲染图表,无则渲染指定内容——可以是暂无数据的图片,也可以是文字
1、显示“暂无数据”文字
<div id="test_chart" style="width: 600px;height:400px;"></div>
<script>
let chartData = [5, 20, 36, 10, 10, 20];
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('test_chart'));
var option;
// 指定图表的配置项和数据
if (chartData.length == 0 ) { //暂无数据
option = {
title: {
text: '暂无数据',
x: 'center',
y: 'center',
textStyle: {
fontSize: 14,
fontWeight: 'normal',
}
}
}
} else {
option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: chartData //动态数据
}
]
};
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
效果如下:
需要注意的是,如果有值的option里面没有定义title属性,那么就无法覆盖无值的情况渲染的“暂无数据”title,我们可以给它赋空值。
option = {
title:{
text:''
},
xAxis:{},
yAxis:{},
series:{},
}
2、显示“暂无数据”图片
封装了一个noDataChart函数(可以直接复制使用),在上面的if判断为真的时候,调用这个函数,显示暂无数据图片即可。
// 暂无数据处理函数
noDataChart(dom){ //传入图表所在的dom节点
dom.removeChild(dom.firstChild)
const mainImg = document.createElement('img')
dom.appendChild(mainImg) // 定义要显示的图片
mainImg.style.width = 'auto'
mainImg.style.height = 'auto'
mainImg.src = noDataImg // 要显示图片的src路径,由外部统一定义,或直接写在这里也可以
const mainText = document.createElement('h3') //定义显示文字
dom.appendChild(mainText)
dom.style.display = 'flex'
dom.style.flexDirection = 'column'
dom.style.justifyContent = 'center'
dom.style.alignItems = 'center'
mainText.innerHTML = '暂无数据'
mainText.style.color = '#999999'
dom.removeAttribute('_echarts_instance_')
},
// 图表绘制函数
function myChartFunc(){
let dom = document.getElementById('test_chart')
var myChart = echarts.getInstanceByDom(dom); //存在dom节点,获取已有的echarts实例的dom节点
if ( myChart == null ) { //不存在,进行初始化操作
myChart = echarts.init(dom);
}
// 指定图表的配置项和数据
if (chartData.length == 0 ) { //暂无数据
this.noDataChart(dom) //---调用暂无数据处理函数
} else {
var option = {
title: {
text: 'ECharts 入门示例'
},
/*图表相关配置*/
}
myChart.setOption(option)
}
}
注意点:
1、noDataChart函数中使用的暂无数据图片noDataImg由外部定义,此处直接使用,可以根据需要选择外部定义或者是直接将图片路径写在对应位置;
2、在图表绘制函数内部,判断有无数据之前,新增了一条if语句,判断图表dom节点是否存在,存在则直接获取echarts实例,否则进行初始化操作;
3、因为在这种情况下,图表无数据时,我们没有使用到option变量,如果还是将option的声明写在if条件外侧(且myChart.setOption(option)也在外侧),那暂无数据的情况会导致setOption语句获取到option为undefined报错,所以直接将option的声明和定义、以及myChart.setOption(option)语句写在有数据的else代码块内部。文章来源:https://www.toymoban.com/news/detail-735185.html
文章来源地址https://www.toymoban.com/news/detail-735185.html
到了这里,关于echarts 图表无数据/空数据 展示“暂无数据”的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!