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