Vue3中echarts無(wú)法縮放的問題及解決方案
前言
實(shí)際工作中，使用到vue和echarts技術(shù)。項(xiàng)目原來(lái)用的vue2+echarts4，后來(lái)更新到了vue3+echarts5，結(jié)果遇到echarts無(wú)法綻放的問題。
問題描述
官網(wǎng)示例正常
1、打開echarts官網(wǎng)示例：https://echarts.apache.org/examples/zh/editor.html?c=area-rainfall
這個(gè)示例的縮放功能是正常的。如下圖：
官網(wǎng)示例在本地縮放異常
把上面這個(gè)demo的option復(fù)制到本地環(huán)境，運(yùn)行效果：初始渲染正常，拖動(dòng)縮放把手就報(bào)js錯(cuò)誤。如下圖：
點(diǎn)擊進(jìn)入錯(cuò)誤堆棧，發(fā)現(xiàn)報(bào)seriesModel的coordinateSystem這個(gè)屬性為undefined
開始以為是echarts版本與官網(wǎng)的版本不一致引起，結(jié)果更新本機(jī)的echarts跟官網(wǎng)的echarts版本一致。下載官網(wǎng)的echarts跟本機(jī)的echarts進(jìn)行文件比對(duì)，發(fā)現(xiàn)一模一樣。
靈光乍現(xiàn)
一番面向百度編程，最后找到一篇文章http://www.dbjr.com.cn/article/259863.htm。
重點(diǎn)就是兩句話,如下圖：
問題解決
找到解題思路之后修改代碼，由于我的代碼是vue2升級(jí)到vue3。vue2的版本中myChart對(duì)象是放在data里面的，升級(jí)到vue3只是簡(jiǎn)單的代碼改寫，myChart仍然放在data里面。代碼如下：
const data = ref({
dataDriver: null,
chartConfig: null,
myChart: null
});vue3中ref綁定的對(duì)象都是響應(yīng)式的對(duì)象，對(duì)象中的屬性值變動(dòng)都經(jīng)過vue3的proxy攔截處理。
因此如果是跟頁(yè)面內(nèi)容進(jìn)行響應(yīng)式綁定的值應(yīng)該放在data里面，而我的圖表用的是原生的echarts api自己繪制的，因此不需要做響應(yīng)式綁定，如果繪制圖表的數(shù)據(jù)發(fā)生變化，我自己會(huì)手工調(diào)用echarts進(jìn)行重繪。因此我只需要把myChart從data中刪除放到外面即可。如下圖：
到此這篇關(guān)于Vue3中echarts無(wú)法縮放的問題及解決方案的文章就介紹到這了,更多相關(guān)Vue中echarts無(wú)法縮放內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
下面小編就為大家分享一篇解決Vue打包之后文件路徑出錯(cuò)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-03-03
這篇文章主要介紹了Vue3計(jì)算屬性是如何實(shí)現(xiàn)的，對(duì)于任何包含響應(yīng)式數(shù)據(jù)的復(fù)雜邏輯，我們都應(yīng)該使用計(jì)算屬性，更多相關(guān)內(nèi)容需要的小伙伴可以參考一下2022-08-08
這篇文章主要介紹了vue使用插槽分發(fā)內(nèi)容slot的用法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue綁定對(duì)象與數(shù)組變量更改后無(wú)法渲染問題解決
這篇文章主要介紹了Vue綁定對(duì)象與數(shù)組變量更改后無(wú)法渲染問題解決,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)周日歷切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家介紹了vue可用于拖動(dòng)排序組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要為大家詳細(xì)介紹了如何基于Vue實(shí)現(xiàn)簡(jiǎn)單的消息提示功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10
這篇文章主要介紹了在vue中使用Autoprefixed的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-07-07
Element Plus是為適配Vue3而對(duì)Element UI進(jìn)行重構(gòu)后產(chǎn)生的前端組件庫(kù),包含豐富的基礎(chǔ)組件,下面這篇文章主要給大家介紹了關(guān)于vue3引入Element-plus的相關(guān)資料,需要的朋友可以參考下2022-04-04
Vue網(wǎng)絡(luò)請(qǐng)求的三種實(shí)現(xiàn)方式介紹
這篇文章主要介紹了Vue網(wǎng)絡(luò)請(qǐng)求的三種實(shí)現(xiàn)方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09