Vue使用Echarts圖表多次初始化報(bào)錯(cuò)問(wèn)題的解決方法
問(wèn)題
Vue項(xiàng)目中需要用Echarts的柱狀圖顯示數(shù)據(jù),并且每次搜索要更新柱狀圖。
這時(shí)候小編發(fā)現(xiàn)在控制臺(tái)會(huì)出現(xiàn)這樣的報(bào)錯(cuò):
原來(lái)的代碼是這樣的,頁(yè)面掛載和搜索時(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 入門(mén)示例' }, tooltip: {}, legend: { data: ['銷(xiāo)量'] }, xAxis: { data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子'] }, yAxis: {}, series: [ { name: '銷(xiāo)量', type: 'bar', data: dataSet } ] } this.barChart.setOption(option)
方法一 銷(xiāo)毀實(shí)例
在initChart()內(nèi)第一行打印 console.log(this.barChart),發(fā)現(xiàn)頁(yè)面掛載的時(shí)候輸出是:
點(diǎn)擊搜索按鈕,觸發(fā)第二次初始化是輸出是:
因此考慮在每次初始化echarts實(shí)例之前銷(xiāo)毀已經(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 入門(mén)示例' }, tooltip: {}, legend: { data: ['銷(xiāo)量'] }, xAxis: { data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子'] }, yAxis: {}, series: [ { name: '銷(xiāo)量', type: 'bar', data: dataSet } ] } this.barChart.setOption(option) }
方法二 不要頻繁創(chuàng)建實(shí)例
再找解決辦法的過(guò)程中,小編發(fā)現(xiàn)更新數(shù)據(jù)用setOption就可以,不必頻繁創(chuàng)建echarts實(shí)例。真是愚蠢的小編。
handleSubmit () { this.barChart.setOption({ series: [{ data: [12, 12, 36, 12, 12, 12] }] }) }
雖然setOption可以在這種場(chǎng)景規(guī)避多次實(shí)例化,但是有一種場(chǎng)景:當(dāng)vue的頁(yè)面切換時(shí)echarts實(shí)例的dom容器元素被銷(xiāo)毀又重新創(chuàng)建了,echarts會(huì)因?yàn)檎也坏饺萜髟囟鴪?bào)錯(cuò)。
這種場(chǎng)景可以在init前dispose實(shí)例。
之后有時(shí)間小編試試重現(xiàn)容器元素重新創(chuàng)建引發(fā)問(wèn)題的這種場(chǎng)景。
總結(jié)
vue使用echarts初始化報(bào)錯(cuò)可以考慮銷(xiāo)毀echarts實(shí)例,clear()方法并不徹底,考慮使用dispose()。
到此這篇關(guān)于Vue使用Echarts圖表多次初始化報(bào)錯(cuò)問(wèn)題解決的文章就介紹到這了,更多相關(guān)Vue Echarts圖表初始化報(bào)錯(cuò)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
簡(jiǎn)單理解vue中el、template、replace元素
這篇文章主要幫助大家簡(jiǎn)單理解vue中el、template、replace元素,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10關(guān)于實(shí)現(xiàn)Vue3版抖音滑動(dòng)插件踩坑指南
這篇文章主要給大家介紹了關(guān)于實(shí)現(xiàn)Vue3版抖音滑動(dòng)插件踩坑指南,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-02-02Vue echart實(shí)現(xiàn)柱狀圖,電池圖,3D柱圖和3D圓柱圖代碼詳解
這篇文章主要為大家介紹了Vue實(shí)現(xiàn)echart繪圖代碼詳解,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2022-01-01vue中調(diào)用百度地圖獲取經(jīng)緯度的實(shí)現(xiàn)
最近做個(gè)項(xiàng)目,需要實(shí)現(xiàn)獲取當(dāng)前位置的經(jīng)緯度,所以本文主要介紹了vue中調(diào)用百度地圖獲取經(jīng)緯度的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08vue測(cè)試環(huán)境打包與生產(chǎn)環(huán)境打包文件數(shù)量不一致解決方案
這篇文章主要為大家介紹了vue測(cè)試環(huán)境打包與生產(chǎn)環(huán)境打包文件數(shù)量不一致的解決方案,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05Vue?Router嵌套路由(children)的用法小結(jié)
嵌套路由就是父路由里面嵌套他的子路由,父路由有自己的路由導(dǎo)航和路由容器(router-link、router-view),通過(guò)配置children可實(shí)現(xiàn)多層嵌套,這篇文章主要介紹了Vue--Router--嵌套路由(children)的用法,需要的朋友可以參考下2022-08-08詳解Vue源碼學(xué)習(xí)之callHook鉤子函數(shù)
這篇文章主要介紹了詳解Vue源碼學(xué)習(xí)之callHook鉤子函數(shù),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07vue中使用window.open()參數(shù)示例詳解
這篇文章主要介紹了vue中使用window.open()參數(shù)詳解,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04Vue+Node實(shí)現(xiàn)商品列表的分頁(yè)、排序、篩選,添加購(gòu)物車(chē)功能詳解
這篇文章主要介紹了Vue+Node實(shí)現(xiàn)商品列表的分頁(yè)、排序、篩選,添加購(gòu)物車(chē)功能,結(jié)合實(shí)例形式分析了vue.js前臺(tái)商品分頁(yè)、排序、篩選等功能及后臺(tái)node.js處理技巧,需要的朋友可以參考下2019-12-12vue 實(shí)現(xiàn)把路由單獨(dú)分離出來(lái)
這篇文章主要介紹了vue 實(shí)現(xiàn)把路由單獨(dú)分離出來(lái),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08