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