快捷導(dǎo)航

Vue使用Echarts圖表多次初始化報(bào)錯(cuò)問題的解決方法

更新時(shí)間：2022年05月09日 16:42:20 作者：蘭兒蘭上天太陽肩并肩

最近在學(xué)習(xí)Vue的時(shí)候,正好學(xué)到了引入echarts圖表做數(shù)據(jù)統(tǒng)計(jì)的內(nèi)容,所以下面這篇文章主要給大家介紹了關(guān)于Vue使用Echarts圖表多次初始化報(bào)錯(cuò)問題的解決方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

問題

Vue項(xiàng)目中需要用Echarts的柱狀圖顯示數(shù)據(jù)，并且每次搜索要更新柱狀圖。

這時(shí)候小編發(fā)現(xiàn)在控制臺(tái)會(huì)出現(xiàn)這樣的報(bào)錯(cuò)：

原來的代碼是這樣的，頁面掛載和搜索時(shí)都會(huì)調(diào)用init方法

initChart (dataSet = [5, 20, 36, 10, 10, 20]) {
      this.barChart = echarts.init(this.$refs.chartBox)
      const option = {
        title: {
          text: 'ECharts 入門示例'
        },
        tooltip: {},
        legend: {
          data: ['銷量']
        },
        xAxis: {
          data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
        },
        yAxis: {},
        series: [
          {
            name: '銷量',
            type: 'bar',
            data: dataSet
          }
        ]
      }
      this.barChart.setOption(option)

方法一銷毀實(shí)例

在initChart()內(nèi)第一行打印 console.log(this.barChart)，發(fā)現(xiàn)頁面掛載的時(shí)候輸出是：

點(diǎn)擊搜索按鈕，觸發(fā)第二次初始化是輸出是：

因此考慮在每次初始化echarts實(shí)例之前銷毀已經(jīng)存在的實(shí)例：

initChart (dataSet = [5, 20, 36, 10, 10, 20]) {
      if (this.barChart) {
        this.barChart.dispose()
        this.barChart = null
      }
      this.barChart = echarts.init(this.$refs.chartBox)
      const option = {
        title: {
          text: 'ECharts 入門示例'
        },
        tooltip: {},
        legend: {
          data: ['銷量']
        },
        xAxis: {
          data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
        },
        yAxis: {},
        series: [
          {
            name: '銷量',
            type: 'bar',
            data: dataSet
          }
        ]
      }
      this.barChart.setOption(option)
    }

方法二不要頻繁創(chuàng)建實(shí)例

再找解決辦法的過程中，小編發(fā)現(xiàn)更新數(shù)據(jù)用setOption就可以，不必頻繁創(chuàng)建echarts實(shí)例。真是愚蠢的小編。

handleSubmit () {
      this.barChart.setOption({ series: [{ data: [12, 12, 36, 12, 12, 12] }] })
    }

雖然setOption可以在這種場景規(guī)避多次實(shí)例化，但是有一種場景：當(dāng)vue的頁面切換時(shí)echarts實(shí)例的dom容器元素被銷毀又重新創(chuàng)建了，echarts會(huì)因?yàn)檎也坏饺萜髟囟鴪?bào)錯(cuò)。

這種場景可以在init前dispose實(shí)例。

之后有時(shí)間小編試試重現(xiàn)容器元素重新創(chuàng)建引發(fā)問題的這種場景。

總結(jié)

vue使用echarts初始化報(bào)錯(cuò)可以考慮銷毀echarts實(shí)例，clear（）方法并不徹底，考慮使用dispose（）。

到此這篇關(guān)于Vue使用Echarts圖表多次初始化報(bào)錯(cuò)問題解決的文章就介紹到這了,更多相關(guān)Vue Echarts圖表初始化報(bào)錯(cuò)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: