Vue使用Echarts圖表多次初始化報錯問題的解決方法
更新時間：2022年05月09日 16:42:20 作者：蘭兒蘭上天太陽肩并肩
最近在學習Vue的時候,正好學到了引入echarts圖表做數據統(tǒng)計的內容,所以下面這篇文章主要給大家介紹了關于Vue使用Echarts圖表多次初始化報錯問題的解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
問題
Vue項目中需要用Echarts的柱狀圖顯示數據，并且每次搜索要更新柱狀圖。
這時候小編發(fā)現在控制臺會出現這樣的報錯：
原來的代碼是這樣的，頁面掛載和搜索時都會調用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()內第一行打印 console.log(this.barChart)，發(fā)現頁面掛載的時候輸出是：
點擊搜索按鈕，觸發(fā)第二次初始化是輸出是：
因此考慮在每次初始化echarts實例之前銷毀已經存在的實例：
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ā)現更新數據用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實例。
之后有時間小編試試重現容器元素重新創(chuàng)建引發(fā)問題的這種場景。
總結
vue使用echarts初始化報錯可以考慮銷毀echarts實例，clear（）方法并不徹底，考慮使用dispose（）。
到此這篇關于Vue使用Echarts圖表多次初始化報錯問題解決的文章就介紹到這了,更多相關Vue Echarts圖表初始化報錯內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本vue移動端項目設置全屏背景,關鍵是要找對文件,然后添加background屬性即可,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習吧2023-08-08
Vue中router-view和component :is的區(qū)別解析
這篇文章主要介紹了Vue中router-view和component :is的區(qū)別解析,router-view用法直接填寫跳轉路由,路由組件會渲染<router-view></router-view>標簽,本文給大家介紹的非常詳細,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了自定義input組件如何實現拖拽文件上傳問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
在項目中經常有一些場景會連續(xù)發(fā)送多個請求,而異步會導致最后得到的結果不是我們想要的,并且對性能也有非常大的影響,這篇文章主要給大家介紹了關于axios取消請求與避免重復請求的相關資料,需要的朋友可以參考下2021-06-06
在同一個Vue項目中的不同vue和HTML頁面之間進行跳轉方式
這篇文章主要介紹了在同一個Vue項目中的不同vue和HTML頁面之間進行跳轉方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了在Vue中使用icon 字體圖標的方法,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
vue修改this.$confirm的文字樣式、自定義樣式代碼實例
this.$confirm是一個?Vue.js?中的彈窗組件,其樣式可以通過?CSS?進行自定義,下面這篇文章主要給大家介紹了關于vue修改this.$confirm的文字樣式、自定義樣式的相關資料,需要的朋友可以參考下2024-02-02
在遇到chunk-vendors.js文件的語法錯誤時,可以嘗試在vue.config.js文件中添加transpileDependencies參數進行配置,這通過明確指示哪些依賴需要被babel轉譯,從而幫助解決編譯過程中的語法問題,此方法適用于Vue項目中遇到的相關錯誤,希望能幫助到遇到同樣問題的開發(fā)者2024-10-10
這篇文章主要介紹了vue前端代碼如何通過maven打成jar包運行問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
作為一個曾經的Java?coder,當第一次看到js里面的裝飾器Decorator,就馬上想到了Java中的注解,當然在實際原理和功能上面,Java的注解和js的裝飾器還是有很大差別的,這篇文章主要給大家介紹了關于Vue項目之ES6裝飾器在項目實戰(zhàn)中應用的相關資料,需要的朋友可以參考下2022-06-06