解決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制作了儀表盤(pán)的圖表，起初圖標(biāo)在頁(yè)面中隱藏，點(diǎn)擊某一按鈕切換時(shí)，顯示圖表，發(fā)現(xiàn)圖表的寬高被縮小了，異常顯示，如圖：
解決方法：
1.在完成繪畫(huà)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中computed屬性和watch,methods的區(qū)別
本文主要介紹了Vue中computed屬性和watch,methods的區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要給大家介紹了關(guān)于vue3使用canvas的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細(xì)介紹了Vue.js仿 Select下拉框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
解決vue項(xiàng)目中type=”file“ change事件只執(zhí)行一次的問(wèn)題
這篇文章主要介紹了vue項(xiàng)目中解決type=”file“ change事件只執(zhí)行一次的問(wèn)題,本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-05-05
右鍵菜單在項(xiàng)目開(kāi)發(fā)中是屬于比較高頻的組件了,所以這篇文章小編主要來(lái)和大家介紹一下如何利用vue3開(kāi)發(fā)一個(gè)右鍵菜單,有需要的可以參考下2024-03-03
vue+element實(shí)現(xiàn)動(dòng)態(tài)換膚的示例代碼
本文主要介紹了vue+element實(shí)現(xiàn)動(dòng)態(tài)換膚的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
在Vue中，修飾符處理了許多DOM事件的細(xì)節(jié)，讓我們不再需要花大量的時(shí)間去處理這些煩惱的事情，而能有更多的精力專(zhuān)注于程序的邏輯處理,需要的朋友可以參考下2023-04-04
Vue中的element tabs點(diǎn)擊錨點(diǎn)定位,鼠標(biāo)滾動(dòng)定位
這篇文章主要介紹了Vue中的element tabs點(diǎn)擊錨點(diǎn)定位,鼠標(biāo)滾動(dòng)定位方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue2.0點(diǎn)擊切換類(lèi)名改變樣式的方法
今天小編就為大家分享一篇Vue2.0點(diǎn)擊切換類(lèi)名改變樣式的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue中實(shí)現(xiàn)監(jiān)聽(tīng)數(shù)組內(nèi)部元素
這篇文章主要介紹了vue中實(shí)現(xiàn)監(jiān)聽(tīng)數(shù)組內(nèi)部元素方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08