如何解決ECharts圖表切換后縮成一團(tuán)的問題
更新時間：2022年10月22日 09:55:58 作者：King汀
這篇文章主要介紹了如何解決ECharts圖表切換后縮成一團(tuán)的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
解決ECharts圖表切換后縮成一團(tuán)問題
問題描述
解決辦法
（1）項目使用vue，則在按鈕切換的方法中加上如下代碼：
this.$nextTick(function () {
var myEvent = new Event('resize');
window.dispatchEvent(myEvent);
});
（2）項目使用原生js，則在切換方法最后加上如下代碼：
var myEvent = new Event('resize');
window.dispatchEvent(myEvent);
注意：需要寫在如下方法中
window.addEventListener("load", function () { })
window.onload = function(){ }
vue+echarts使用時出現(xiàn)重大 bug（圖縮成一團(tuán)）
問題出現(xiàn)原因
我在本地引入了echarts
把當(dāng)前頁面做成公共的組件給其他頁面使用。（目前為止沒有問題）
直接打開當(dāng)前頁面顯示正常：（下圖正常）
但是當(dāng)引入到別的頁面（問題出現(xiàn)）
（下圖是問題圖片）縮成一團(tuán)
原因
在組件顯示的時候用了v-show，會給echarts畫布默認(rèn)一個寬度和高度
改成 v-if 就沒有問題了。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue-router兩種模式區(qū)別及使用注意事項,結(jié)合實例形式詳細(xì)分析了vue-router兩種模式hash模式與history模式的區(qū)別、用法與操作注意事項,需要的朋友可以參考下2019-08-08
在本文中我們給大家整理了一篇關(guān)于Vue表單控件綁定的相關(guān)知識點內(nèi)容，有需要的朋友們參考下。2019-02-02
以前我們經(jīng)常在react中使用jsx,現(xiàn)在我們在vue中也是用jsx,下面這篇文章主要給大家介紹了關(guān)于在vue中寫jsx的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
Vue3使用ref和reactive管理狀態(tài)的代碼示例
ref 和 reactive 是 Composition API 中用來聲明響應(yīng)式數(shù)據(jù)的兩個核心函數(shù),在 Vue 3 中,使用 setup 語法糖可以更簡潔地使用這些功能,本文將探討如何使用 ref 和 reactive 來管理狀態(tài),并解釋它們之間的區(qū)別,需要的朋友可以參考下2024-09-09
這篇文章手把手教你拿捏vue?cale()計算函數(shù)使用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
Tailwind CSS是一個流行的前端CSS框架,它基于原子設(shè)計原則,提供了一套預(yù)構(gòu)建的CSS樣式類,旨在幫助開發(fā)者快速地創(chuàng)建響應(yīng)式、可定制的用戶界面,本文給大家介紹了Vue2中使用tailwindCss的詳細(xì)教程,需要的朋友可以參考下2024-09-09
詳解使用mpvue開發(fā)github小程序總結(jié)
這篇文章主要介紹了詳解使用mpvue開發(fā)github小程序總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了vue在外部方法給下拉框賦值后不顯示label的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了如何在vue 中使用柱狀圖 并自修改配置，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
前端配合后端實現(xiàn)Vue路由權(quán)限的方法實例
一開始我還以為vue的路由只能用在工程化的項目里面,其實不然,下面這篇文章主要給大家介紹了關(guān)于前端配合后端實現(xiàn)Vue路由權(quán)限的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05