如何解決ECharts圖表切換后縮成一團的問題
更新時間：2022年10月22日 09:55:58 作者：King汀
這篇文章主要介紹了如何解決ECharts圖表切換后縮成一團的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
解決ECharts圖表切換后縮成一團問題
問題描述
解決辦法
（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（圖縮成一團）
問題出現(xiàn)原因
我在本地引入了echarts
把當(dāng)前頁面做成公共的組件給其他頁面使用。（目前為止沒有問題）
直接打開當(dāng)前頁面顯示正常：（下圖正常）
但是當(dāng)引入到別的頁面（問題出現(xiàn)）
（下圖是問題圖片）縮成一團
原因
在組件顯示的時候用了v-show，會給echarts畫布默認(rèn)一個寬度和高度
改成 v-if 就沒有問題了。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue 簡單自動補全的輸入框的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
Vue Element前端應(yīng)用開發(fā)之動態(tài)菜單和路由的關(guān)聯(lián)處理
這篇文章主要介紹了Vue Element前端應(yīng)用開發(fā)之動態(tài)菜單和路由的關(guān)聯(lián)處理，對vue感興趣的同學(xué)，可以參考下2021-05-05
npm安裝vue腳手架報錯警告npm WARN deprecated
安裝vue腳手架報錯可能具體原因比較多,可以根據(jù)報錯信息進行排查,本文主要介紹了npm安裝vue腳手架報錯警告npm WARN deprecated,感興趣的可以了解一下2023-11-11
這篇文章主要來和大家一起深入探討下Vue中keep-alive?的作用及其使用方法,幫助開發(fā)者在實際項目中充分利用這一功能實現(xiàn)高效的組件管理2024-11-11
這篇文章主要介紹了Antd中單個DatePicker限定時間輸入范圍操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Vue.js頁面中有多個input搜索框如何實現(xiàn)防抖操作
debounce是lodash工具庫中的一個非常好用的函數(shù)。這篇文章主要介紹了Vue.js頁面中有多個input搜索框如何實現(xiàn)防抖操作,需要的朋友可以參考下2019-11-11
本篇文章主要介紹了詳解vue服務(wù)端渲染(SSR)初探，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
記錄--使用el-time-picker默認(rèn)值遇到的問題
這篇文章主要介紹了記錄--使用el-time-picker默認(rèn)值遇到的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
本篇文章主要介紹了Vue-Cli中自定義過濾器的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
在vue中使用el-tab-pane v-show/v-if無效的解決
這篇文章主要介紹了在vue中使用el-tab-pane v-show/v-if無效的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08