Vue3中echarts無法縮放的問題及解決方案
前言
實際工作中，使用到vue和echarts技術。項目原來用的vue2+echarts4，后來更新到了vue3+echarts5，結果遇到echarts無法綻放的問題。
問題描述
官網示例正常
1、打開echarts官網示例：https://echarts.apache.org/examples/zh/editor.html?c=area-rainfall
這個示例的縮放功能是正常的。如下圖：
官網示例在本地縮放異常
把上面這個demo的option復制到本地環(huán)境，運行效果：初始渲染正常，拖動縮放把手就報js錯誤。如下圖：
點擊進入錯誤堆棧，發(fā)現(xiàn)報seriesModel的coordinateSystem這個屬性為undefined
開始以為是echarts版本與官網的版本不一致引起，結果更新本機的echarts跟官網的echarts版本一致。下載官網的echarts跟本機的echarts進行文件比對，發(fā)現(xiàn)一模一樣。
靈光乍現(xiàn)
一番面向百度編程，最后找到一篇文章http://www.fzitv.net/article/259863.htm。
重點就是兩句話,如下圖：
問題解決
找到解題思路之后修改代碼，由于我的代碼是vue2升級到vue3。vue2的版本中myChart對象是放在data里面的，升級到vue3只是簡單的代碼改寫，myChart仍然放在data里面。代碼如下：
const data = ref({
dataDriver: null,
chartConfig: null,
myChart: null
});vue3中ref綁定的對象都是響應式的對象，對象中的屬性值變動都經過vue3的proxy攔截處理。
因此如果是跟頁面內容進行響應式綁定的值應該放在data里面，而我的圖表用的是原生的echarts api自己繪制的，因此不需要做響應式綁定，如果繪制圖表的數(shù)據(jù)發(fā)生變化，我自己會手工調用echarts進行重繪。因此我只需要把myChart從data中刪除放到外面即可。如下圖：
到此這篇關于Vue3中echarts無法縮放的問題及解決方案的文章就介紹到這了,更多相關Vue中echarts無法縮放內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了詳解mpvue開發(fā)小程序小總結，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
vue項目實現(xiàn)表單登錄頁保存賬號和密碼到cookie功能
這篇文章主要介紹了vue項目實現(xiàn)表單登錄頁保存賬號和密碼到cookie功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
vue生成二維碼QR?Code的簡單實現(xiàn)方法示例
這篇文章主要為大家介紹了vue生成二維碼QR?Code的實現(xiàn)示例詳情，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-04-04
vue 設置 input 為不可以編輯的實現(xiàn)方法
今天小編就為大家分享一篇vue 設置 input 為不可以編輯的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了自定義Vue中的v-module雙向綁定的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
vue中如何實現(xiàn)后臺管理系統(tǒng)的權限控制的方法步驟
這篇文章主要介紹了vue中如何實現(xiàn)后臺管理系統(tǒng)的權限控制的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
electron-vite工具打包后如何通過內置配置文件動態(tài)修改接口地址
使用electron-vite?工具開發(fā)項目打包完后每次要改接口地址都要重新打包,對于多環(huán)境切換或者頻繁變更接口地址就顯得麻煩,這篇文章主要介紹了electron-vite工具打包后通過內置配置文件動態(tài)修改接口地址實現(xiàn)方法,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了vuex的使用步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
這篇文章主要為大家介紹了vue-next-admin項目使用cdn加速的詳細配置，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要為大家詳細介紹了vue實現(xiàn)頁面添加水印功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07