場景描述

我們在專案中，很多時候都會使用echarts進行資料展示。
當沒有資料的時候，echarts的展示就會特別的難看。
這個時候我們就會優化介面的顯示，在echarts中展示暫無資料。
有很多中方法：
1.只設置echarts中的title選項，其他選擇都不進行設定
2.在頁面中使用v-show或者v-if。有資料的時候展示echarts，沒有資料的時候使用其他作為提示
現在我們使用第1種方式來看下，會出現什麼樣的情況？

使用echarts中的title選項來處理暫無資料

程式碼功能描述：
最初的時候是有資料的，點選按鈕後會顯示暫無資料。
然後再次點選，會有資料。以此迴圈

<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: ['卿卿日常', '琅琊榜', '仙劍奇俠傳三', '射鵰英雄傳', '偽裝者', '聊齋志異', '縣委大院'],
        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 來實現是否展示資料
      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: '暫無資料',
            x: 'center',
            y: 'center',
            textStyle: {
              fontSize: 16,
              fontWeight: 'normal',
            }
          }
        }
      }
      myChart1.setOption(option)
    },
  }
}
</script>
 

實際上遇見的情況

當我們第2次點選按鈕的時候。雖然檢視上顯示了"暫無資料"。
但是仍然有圖表展示的資訊。與我們最初的想法是相違背的。
它出現了資料和"暫無資料"同時出現了。我們只希望出現一種。
怎麼會出現這樣的情況呢？不是應該只展示其中一種情況嗎？

解決問題的三種辦法

程式碼中的 myChart1.setOption(option)
預設情況ECharts 會合並新的引數和資料，然後重新整理圖表。
當它合併之後，就會出現資料和"暫無資料"同時顯示在介面中。
如何解決這樣的情況呢？

1.使用 echarts中setOption(option,notMerge)的第二個引數來解決
chart.setOption(option, notMerge:boolean, lazyUpdate:boolean);
option 圖表的配置項和資料
notMerge 可選，是否不跟之前設定的 option 進行合併，預設為 false (即合併)。
lazyUpdate 可選，在設定完 option 後是否不立即更新圖表，預設為 false(即立即更新)。

2.echarts.clear() 清空當前例項，會移除例項中所有的元件和圖表。
我們可以在渲染圖示前，先清空一下例項.
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()的區別

echarts.clear()是清空例項，例項任然是存在的，類似於v-show
echarts.dispose()是銷燬，銷燬後例項不存在，類似於v-if

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

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: '暫無資料',
        x: 'center',
        y: 'center',
        textStyle: {
          fontSize: 16,
          fontWeight: 'normal',
        }
      }
    }
  }
  //不進行合併
  myChart1.setOption(option,true)
},