欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue使用Echarts圖表多次初始化報錯問題的解決方法

 更新時間：2022年05月09日 16:42:20   作者：蘭兒蘭上天太陽肩并肩  
最近在學習Vue的時候,正好學到了引入echarts圖表做數(shù)據(jù)統(tǒng)計的內(nèi)容,所以下面這篇文章主要給大家介紹了關(guān)于Vue使用Echarts圖表多次初始化報錯問題的解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

問題

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

這時候小編發(fā)現(xiàn)在控制臺會出現(xiàn)這樣的報錯：

原來的代碼是這樣的，頁面掛載和搜索時都會調(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)

方法一 銷毀實例

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

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

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

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)建實例

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

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

雖然setOption可以在這種場景規(guī)避多次實例化，但是有一種場景：當vue的頁面切換時echarts實例的dom容器元素被銷毀又重新創(chuàng)建了，echarts會因為找不到容器元素而報錯。

這種場景可以在init前dispose實例。

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

總結(jié)

vue使用echarts初始化報錯可以考慮銷毀echarts實例，clear（）方法并不徹底，考慮使用dispose（）。

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

相關(guān)文章

最新評論