echarts圖表無數(shù)據(jù)/空數(shù)據(jù)如何展示"暫無數(shù)據(jù)"

更新時間：2022年10月28日 09:17:11 作者：貝小米在前端

在開發(fā)echarts的時候我們不得不考慮數(shù)據(jù)為空的情況,其實有很多種解決辦法,下面這篇文章主要給大家介紹了關于echarts圖表無數(shù)據(jù)/空數(shù)據(jù)如何展示“暫無數(shù)據(jù)”的相關資料,需要的朋友可以參考下

前言

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

正常情況渲染圖表：

<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'));
 
    // 指定圖表的配置項和數(shù)據(jù)
    var option = {
        title: {
          text: 'ECharts 入門示例'
        },
        tooltip: {},
        legend: {
          data: ['銷量']
        },
        xAxis: {
          data: ['襯衫', '羊毛衫']
        },
        yAxis: {},
        series: [
          {
            name: '銷量',
            type: 'bar',
            data: chartData          //動態(tài)數(shù)據(jù)
          }
        ]
    };
 
    // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
    myChart.setOption(option);
</script>

我們只需要：在定義option的外面加一個if條件判斷，判斷動態(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];
    // 基于準備好的dom，初始化echarts實例
    var myChart = echarts.init(document.getElementById('test_chart'));
    
    var option;
    // 指定圖表的配置項和數(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          //動態(tài)數(shù)據(jù)
              }
            ]
        };
    }
 
    
    // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
    myChart.setOption(option);
</script>

效果如下：

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

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

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

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

// 暫無數(shù)據(jù)處理函數(shù)
noDataChart(dom){   //傳入圖表所在的dom節(jié)點
   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é)點，獲取已有的echarts實例的dom節(jié)點
    if ( myChart == null ) {  //不存在，進行初始化操作
        myChart = echarts.init(dom);
    }
   
    // 指定圖表的配置項和數(shù)據(jù)
    if (chartData.length == 0 ) {  //暫無數(shù)據(jù)
        this.noDataChart(dom)   //---調(diào)用暫無數(shù)據(jù)處理函數(shù)
    } else {
      var option = {
          title: {
             text: 'ECharts 入門示例'
          },
          /*圖表相關配置*/      
      }
    
      myChart.setOption(option)
    }
}

注意點：

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

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

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

總結

到此這篇關于echarts圖表無數(shù)據(jù)/空數(shù)據(jù)如何展示“暫無數(shù)據(jù)”的文章就介紹到這了,更多相關echarts圖表無數(shù)據(jù)/空數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

訪問百度和谷歌網(wǎng)速測試的javascript代碼
訪問百度和谷歌網(wǎng)速測試的javascript代碼...
2007-08-08
JavaScript函數(shù)IIFE使用詳解
這篇文章主要介紹了JavaScript函數(shù)IIFE使用詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-10-10
延時重復執(zhí)行函數(shù) lLoopRun.js
延時重復執(zhí)行函數(shù) lLoopRun.js...
2007-05-05
ES6中async函數(shù)與await表達式的基本用法舉例
async和await是我們進行Promise時的一個語法糖,async/await為了讓我們書寫代碼時更加流暢,增強了代碼的可讀性,下面這篇文章主要給大家介紹了關于ES6中async函數(shù)與await表達式的基本用法,需要的朋友可以參考下
2022-07-07
antd upload控件的data參數(shù)使用
這篇文章主要介紹了antd upload控件的data參數(shù)使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-02-02
ElementPlus?Tag標簽用法小結
這篇文章主要介紹了ElementPlus?Tag標簽用法,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-09-09
一文總結JavaScript中常見的設計模式
在程序設計中有很多實用的設計模式，而其中大部分語言的實現(xiàn)都是基于“類”。在程序設計中有很多實用的設計模式，而其中大部分語言的實現(xiàn)都是基于“類”。，本文將總結了JavaScript中常見的十五種設計模式，感興趣的朋友可以參考下
2023-05-05
使用Javascript監(jiān)控前端相關數(shù)據(jù)的代碼
本篇文章詳細的介紹了使用Javascript監(jiān)控前端相關數(shù)據(jù)，可以及時的監(jiān)控前端的錯誤，加載時間等，有需要的可以了解一下。
2016-10-10
javascript實現(xiàn)2016新年版日歷
這篇文章主要為大家介紹了javascript實現(xiàn)2016新年版日歷的詳細代碼，感興趣的小伙伴們可以參考一下
2016-01-01
require導入module.exports 或 exports導出的使用方法
module.exports用于導出整個模塊的內(nèi)容,可以通過賦值給 module.exports 導出一個對象、函數(shù)或值,導出的內(nèi)容可以被其他模塊通過require 導入,本文給大家介紹require導入module.exports 或 exports導出的使用,感興趣的朋友一起看看吧
2023-11-11