我們從后端獲取數據動態渲染圖表時，難免會遇到數據為空的情況（雖然實際應用中這樣的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代碼塊內部。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。