解決Echarts 顯示隱藏后寬度高度變小的問(wèn)題
Echarts 是現(xiàn)在程序員做圖表用到比較多的一種技術(shù)，前段時(shí)間，我就用了一下Echarts,我原本是將餅圖先隱藏，然后點(diǎn)擊按鈕讓它再顯示出來(lái)，但是再顯示時(shí)，餅狀圖出現(xiàn)了問(wèn)題，它變得特別小，根本不能用，然后，就此，我找了下原因
原因：Echarts 圖表是根據(jù)你定義的div 的樣式來(lái)確定圖表的大小，當(dāng)圖表隱藏時(shí)，Echarts會(huì)找不到div的寬和高，再次顯示時(shí)它會(huì)給自己一個(gè)非常小的默認(rèn)寬高值，所以在隱藏顯示后會(huì)發(fā)現(xiàn)它變得非常非常的小。
解決：將初始化放在click事件里，給一個(gè)flag 控制顯示隱藏。
補(bǔ)充知識(shí)：echarts圖表隱藏之后再展示出現(xiàn)變形
問(wèn)題描述：使用echarts制作了儀表盤的圖表，起初圖標(biāo)在頁(yè)面中隱藏，點(diǎn)擊某一按鈕切換時(shí)，顯示圖表，發(fā)現(xiàn)圖表的寬高被縮小了，異常顯示，如圖：
解決方法：
1.在完成繪畫echarts后添加代碼：$(window).resize(myChart.resize);
var dom = document.getElementById("jindu");
var myChart = echarts.init(dom);
option = {
......
}
myChart.setOption(option);
$(window).resize(myChart.resize);
2.在圖表要顯示的地方添加代碼：$(window).trigger(‘resize');
if(gmFlag == 1){
$(".allscore").show();
$(window).trigger('resize');
}
這樣來(lái)回切換的時(shí)候圖表的大小就不會(huì)改變了，如圖：
以上這篇解決Echarts 顯示隱藏后寬度高度變小的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在vue中實(shí)現(xiàn)antd的動(dòng)態(tài)主題的代碼示例
在需求開(kāi)發(fā)階段,鑒于項(xiàng)目采用了antd作為基礎(chǔ)組件庫(kù),確保組件外觀與antd一致變得尤為重要,這包括顏色、字體大小及尺寸等樣式的統(tǒng)一,然而,截至當(dāng)前antd-vue尚未實(shí)現(xiàn)這一便捷的CSS變量特性,但理解其背后的實(shí)現(xiàn)機(jī)制后,我們可以自行構(gòu)建這一功能,需要的朋友可以參考下2024-07-07
如何在Vue3中實(shí)現(xiàn)文件上傳功能結(jié)合后端API
文件上傳的功能實(shí)現(xiàn)是我們做Web應(yīng)用時(shí)候最為常見(jiàn)的應(yīng)用場(chǎng)景,下面這篇文章主要給大家介紹了關(guān)于如何在Vue3中實(shí)現(xiàn)文件上傳功能結(jié)合后端API的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
vue中重定向redirect:‘/index‘,不顯示問(wèn)題、跳轉(zhuǎn)出錯(cuò)的完美解決
這篇文章主要介紹了vue中重定向redirect:‘/index‘,不顯示問(wèn)題、跳轉(zhuǎn)出錯(cuò)的完美解決方案，本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-09-09
這篇文章主要為大家介紹了vue2與vue3的生命周期對(duì)比，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
vue-cli創(chuàng)建項(xiàng)目時(shí)由esLint校驗(yàn)導(dǎo)致報(bào)錯(cuò)或警告的問(wèn)題及解決
這篇文章主要介紹了vue-cli創(chuàng)建項(xiàng)目時(shí)由esLint校驗(yàn)導(dǎo)致報(bào)錯(cuò)或警告的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue項(xiàng)目使用electron進(jìn)行打包操作的全過(guò)程
我們都知道Electron項(xiàng)目分為了主進(jìn)程和渲染進(jìn)程,主進(jìn)程其實(shí)就是我們的Electron,渲染進(jìn)程就相當(dāng)于我們的Vue項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目使用electron進(jìn)行打包操作的全過(guò)程,需要的朋友可以參考下2023-03-03
詳解VUE Element-UI多級(jí)菜單動(dòng)態(tài)渲染的組件
這篇文章主要介紹了VUE Element-UI多級(jí)菜單動(dòng)態(tài)渲染的組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue?3.0?項(xiàng)目創(chuàng)建過(guò)程及解決方案
這篇文章主要介紹了Vue?3.0?項(xiàng)目創(chuàng)建過(guò)程，首先要確保電腦上已安裝node.js,確保已安裝?Vue?CLI,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2024-04-04
這篇文章主要為大家介紹了ant-design-vue按鈕樣式擴(kuò)展方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
本文章向大家介紹vue組件中的數(shù)據(jù)共享，主要包括vue組件中的數(shù)據(jù)共享使用實(shí)例、應(yīng)用技巧、基本知識(shí)點(diǎn)總結(jié)和需要注意事項(xiàng)，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-11-11