Vue3中echarts無法縮放的問題及解決方案
前言
實(shí)際工作中，使用到vue和echarts技術(shù)。項(xiàng)目原來用的vue2+echarts4，后來更新到了vue3+echarts5，結(jié)果遇到echarts無法綻放的問題。
問題描述
官網(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.dhdzp.com/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攔截處理。
因此如果是跟頁面內(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無法縮放的問題及解決方案的文章就介紹到這了,更多相關(guān)Vue中echarts無法縮放內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了詳解mpvue開發(fā)小程序小總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
vue項(xiàng)目實(shí)現(xiàn)表單登錄頁保存賬號(hào)和密碼到cookie功能
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)表單登錄頁保存賬號(hào)和密碼到cookie功能,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
vue生成二維碼QR?Code的簡(jiǎn)單實(shí)現(xiàn)方法示例
這篇文章主要為大家介紹了vue生成二維碼QR?Code的實(shí)現(xiàn)示例詳情，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
vue 設(shè)置 input 為不可以編輯的實(shí)現(xiàn)方法
今天小編就為大家分享一篇vue 設(shè)置 input 為不可以編輯的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
自定義Vue中的v-module雙向綁定的實(shí)現(xiàn)
這篇文章主要介紹了自定義Vue中的v-module雙向綁定的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue中如何實(shí)現(xiàn)后臺(tái)管理系統(tǒng)的權(quán)限控制的方法步驟
這篇文章主要介紹了vue中如何實(shí)現(xiàn)后臺(tái)管理系統(tǒng)的權(quán)限控制的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
electron-vite工具打包后如何通過內(nèi)置配置文件動(dòng)態(tài)修改接口地址
使用electron-vite?工具開發(fā)項(xiàng)目打包完后每次要改接口地址都要重新打包,對(duì)于多環(huán)境切換或者頻繁變更接口地址就顯得麻煩,這篇文章主要介紹了electron-vite工具打包后通過內(nèi)置配置文件動(dòng)態(tài)修改接口地址實(shí)現(xiàn)方法,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了vuex的使用步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
vue-next-admin項(xiàng)目使用cdn加速詳細(xì)配置
這篇文章主要為大家介紹了vue-next-admin項(xiàng)目使用cdn加速的詳細(xì)配置，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頁面添加水印功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07