我們從后端獲取數(shù)據(jù)動(dòng)態(tài)渲染圖表時(shí)，難免會遇到數(shù)據(jù)為空的情況（雖然實(shí)際應(yīng)用中這樣的bug極少遇到），但考慮周全一點(diǎn)也好，看如何實(shí)現(xiàn)吧。

?正常情況渲染圖表：

<div id="test_chart" style="width: 600px;height:400px;"></div><script>let chartData = [5, 20, 36, 10, 10, 20];// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('test_chart'));// 指定圖表的配置項(xiàng)和數(shù)據(jù)var option = {title: {text: 'ECharts 入門示例'},tooltip: {},legend: {data: ['銷量']},xAxis: {data: ['襯衫', '羊毛衫']},yAxis: {},series: [{name: '銷量',type: 'bar',data: chartData //動(dòng)態(tài)數(shù)據(jù)}]};// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。myChart.setOption(option); </script>

我們只需要：在定義option的外面加一個(gè)if條件判斷，判斷動(dòng)態(tài)獲取的數(shù)據(jù)是否有值，有則渲染圖表，無則渲染指定內(nèi)容——可以是暫無數(shù)據(jù)的圖片，也可以是文字

1、顯示“暫無數(shù)據(jù)”文字?

<div id="test_chart" style="width: 600px;height:400px;"></div><script>let chartData = [5, 20, 36, 10, 10, 20];// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('test_chart'));var option;// 指定圖表的配置項(xiàng)和數(shù)據(jù)if (chartData.length == 0 ) { //暫無數(shù)據(jù)option = {title: {text: '暫無數(shù)據(jù)',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 //動(dòng)態(tài)數(shù)據(jù)}]};}// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。myChart.setOption(option); </script>

效果如下：?

需要注意的是，如果有值的option里面沒有定義title屬性，那么就無法覆蓋無值的情況渲染的“暫無數(shù)據(jù)”title，我們可以給它賦空值。

option = {title:{text:''},xAxis:{},yAxis:{},series:{}, }

2、顯示“暫無數(shù)據(jù)”圖片

?封裝了一個(gè)noDataChart函數(shù)（可以直接復(fù)制使用），在上面的if判斷為真的時(shí)候，調(diào)用這個(gè)函數(shù)，顯示暫無數(shù)據(jù)圖片即可。

// 暫無數(shù)據(jù)處理函數(shù) noDataChart(dom){ //傳入圖表所在的dom節(jié)點(diǎn)dom.removeChild(dom.firstChild)const mainImg = document.createElement('img')dom.appendChild(mainImg) // 定義要顯示的圖片mainImg.style.width = 'auto'mainImg.style.height = 'auto'mainImg.src = noDataImg // 要顯示圖片的src路徑，由外部統(tǒng)一定義，或直接寫在這里也可以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 = '暫無數(shù)據(jù)'mainText.style.color = '#999999'dom.removeAttribute('_echarts_instance_') },// 圖表繪制函數(shù) function myChartFunc(){let dom = document.getElementById('test_chart')var myChart = echarts.getInstanceByDom(dom); //存在dom節(jié)點(diǎn)，獲取已有的echarts實(shí)例的dom節(jié)點(diǎn)if ( myChart == null ) { //不存在，進(jìn)行初始化操作myChart = echarts.init(dom);}// 指定圖表的配置項(xiàng)和數(shù)據(jù)if (chartData.length == 0 ) { //暫無數(shù)據(jù)this.noDataChart(dom) //---調(diào)用暫無數(shù)據(jù)處理函數(shù)} else {var option = {title: {text: 'ECharts 入門示例'},/*圖表相關(guān)配置*/ }myChart.setOption(option)} }

?注意點(diǎn)：

? ? ? ? 1、noDataChart函數(shù)中使用的暫無數(shù)據(jù)圖片noDataImg由外部定義，此處直接使用，可以根據(jù)需要選擇外部定義或者是直接將圖片路徑寫在對應(yīng)位置；

? ? ? ? 2、在圖表繪制函數(shù)內(nèi)部，判斷有無數(shù)據(jù)之前，新增了一條if語句，判斷圖表dom節(jié)點(diǎn)是否存在，存在則直接獲取echarts實(shí)例，否則進(jìn)行初始化操作；

? ? ? ? 3、因?yàn)樵谶@種情況下，圖表無數(shù)據(jù)時(shí)，我們沒有使用到option變量，如果還是將option的聲明寫在if條件外側(cè)（且myChart.setOption(option)也在外側(cè)），那暫無數(shù)據(jù)的情況會導(dǎo)致setOption語句獲取到option為undefined報(bào)錯(cuò)，所以直接將option的聲明和定義、以及myChart.setOption(option)語句寫在有數(shù)據(jù)的else代碼塊內(nèi)部。

總結(jié)

以上是生活随笔為你收集整理的echarts 图表无数据/空数据 展示“暂无数据”的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。