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