您现在的位置是：网站首页> 编程资料编程资料

echarts图表无数据/空数据如何展示"暂无数据"_javascript技巧_

2023-05-24 308人已围观

简介 echarts图表无数据/空数据如何展示"暂无数据"_javascript技巧_

前言

我们从后端获取数据动态渲染图表时，难免会遇到数据为空的情况（虽然实际应用中这样的bug极少遇到），但考虑周全一点也好，看如何实现吧。

正常情况渲染图表：

我们只需要：在定义option的外面加一个if条件判断，判断动态获取的数据是否有值，有则渲染图表，无则渲染指定内容——可以是暂无数据的图片，也可以是文字

1、显示“暂无数据”文字

效果如下：

需要注意的是，如果有值的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代码块内部。