echarts設(shè)置暫無數(shù)據(jù)方法實例及遇到的問題

更新時間：2022年12月12日 10:57:56 作者：我的div丟了腫么辦

Echarts是百度旗下的一款開源的商業(yè)級數(shù)據(jù)可視化產(chǎn)品,具有豐富的圖表類型,下面這篇文章主要給大家介紹了關(guān)于echarts設(shè)置暫無數(shù)據(jù)方法及遇到的問題的相關(guān)資料,需要的朋友可以參考下

場景描述

我們在項目中，很多時候都會使用echarts進(jìn)行數(shù)據(jù)展示。

當(dāng)沒有數(shù)據(jù)的時候，echarts的展示就會特別的難看。

這個時候我們就會優(yōu)化界面的顯示，在echarts中展示暫無數(shù)據(jù)。

有很多中方法：

1.只設(shè)置echarts中的title選項，其他選擇都不進(jìn)行設(shè)置

2.在頁面中使用v-show或者v-if。有數(shù)據(jù)的時候展示echarts，沒有數(shù)據(jù)的時候使用其他作為提示

現(xiàn)在我們使用第1種方式來看下，會出現(xiàn)什么樣的情況？

使用echarts中的title選項來處理暫無數(shù)據(jù)

代碼功能描述：

最初的時候是有數(shù)據(jù)的，點擊按鈕后會顯示暫無數(shù)據(jù)。

然后再次點擊，會有數(shù)據(jù)。以此循環(huán)

<template>
  <div>
    <el-button @click="showEcharts">切換</el-button>
    <div id="myChart1"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      backData: {
        dataX: ['卿卿日常', '瑯琊榜', '仙劍奇?zhèn)b傳三', '射雕英雄傳', '偽裝者', '聊齋志異', '縣委大院'],
        dataY:[820, 932, 901, 934, 1290, 1330, 1320]
      },
      indexOrder:1,   
    }
  },
  mounted() {
    this.showEcharts()
  },
  methods: {
    showEcharts() {
      this.indexOrder++
      let myChart1 = echarts.init(document.getElementById('myChart1'))
      let option = {}
      //通過控制 indexOrder 來實現(xiàn)是否展示數(shù)據(jù)
      if (this.indexOrder % 2 ==0) {
        option = {
          xAxis: {
            type: 'category',
            data: this.backData.dataX
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: this.backData.dataY,
              type: 'line',
              smooth: true
            }
          ]
        }
      } else {
        option = {
          title: {
            text: '暫無數(shù)據(jù)',
            x: 'center',
            y: 'center',
            textStyle: {
              fontSize: 16,
              fontWeight: 'normal',
            }
          }
        }
      }
      myChart1.setOption(option)
    },
  }
}
</script>

實際上遇見的情況

當(dāng)我們第2次點擊按鈕的時候。雖然視圖上顯示了"暫無數(shù)據(jù)"。

但是仍然有圖表展示的信息。與我們最初的想法是相違背的。

它出現(xiàn)了數(shù)據(jù)和"暫無數(shù)據(jù)"同時出現(xiàn)了。我們只希望出現(xiàn)一種。

怎么會出現(xiàn)這樣的情況呢？不是應(yīng)該只展示其中一種情況嗎？

解決問題的三種辦法

代碼中的 myChart1.setOption(option)

默認(rèn)情況ECharts 會合并新的參數(shù)和數(shù)據(jù)，然后刷新圖表。

當(dāng)它合并之后，就會出現(xiàn)數(shù)據(jù)和"暫無數(shù)據(jù)"同時顯示在界面中。

如何解決這樣的情況呢？

1.使用 echarts中setOption(option,notMerge)的第二個參數(shù)來解決

chart.setOption(option, notMerge:boolean, lazyUpdate:boolean);

option 圖表的配置項和數(shù)據(jù)

notMerge 可選，是否不跟之前設(shè)置的 option 進(jìn)行合并，默認(rèn)為 false (即合并)。

lazyUpdate 可選，在設(shè)置完 option 后是否不立即更新圖表，默認(rèn)為 false(即立即更新)。

2.echarts.clear() 清空當(dāng)前實例，會移除實例中所有的組件和圖表。

我們可以在渲染圖標(biāo)前，先清空一下實例.

let myChart1 = echarts.init(document.getElementById('myChart1'))
myChart1.clear()

3.echarts.dispose()銷毀實例，銷毀后實例無法再被使用。

let myChart1 = echarts.init(document.getElementById('myChart1'))
myChart1.dispose()

echarts.clear() 與 echarts.dispose()的區(qū)別

echarts.clear()是清空實例，實例任然是存在的，類似于v-show
echarts.dispose()是銷毀，銷毀后實例不存在，類似于v-if

使用 echarts 中setOption(option,notMerge)的第二個參數(shù)來解決

showEcharts() {
  this.indexOrder++
  let myChart1 = echarts.init(document.getElementById('myChart1'))
  let option = {}
  if (this.indexOrder % 2 ==0) {
    option = {
      xAxis: {
        type: 'category',
        data: this.backData.dataX
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: this.backData.dataY,
          type: 'line',
          smooth: true
        }
      ]
    }
  } else {
    option = {
      title: {
        text: '暫無數(shù)據(jù)',
        x: 'center',
        y: 'center',
        textStyle: {
          fontSize: 16,
          fontWeight: 'normal',
        }
      }
    }
  }
  //不進(jìn)行合并
  myChart1.setOption(option,true)
},

總結(jié)

到此這篇關(guān)于echarts設(shè)置暫無數(shù)據(jù)方法及遇到的問題的文章就介紹到這了,更多相關(guān)echarts設(shè)置暫無數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: