Element圖表初始大小及窗口自適應(yīng)實(shí)現(xiàn)
最近在做一個(gè)輪播圖，使用的是element的Carousel走馬燈，每一個(gè)走馬燈里是eachrts圖，開始頁面加載的時(shí)候發(fā)現(xiàn)echarts圖并不能自適應(yīng)，開始以為是走馬燈的問題，后來發(fā)現(xiàn)不是
不知道大家在用echarts的時(shí)候有沒有遇到這種情況：
最開始盛放圖表的容器是隱藏（或者tab切換）的，然后再顯示的時(shí)候，里面echarts圖表就沒用初始大小了。比如我遇到的這種：
有童鞋這會兒估計(jì)看出原因了：因?yàn)樵刈畛蹼[藏，再顯示之后沒有自動變化寬度，所以echarts圖表沒有初始寬高，官方文檔的說法：
請注意：這個(gè)寬度在一些情況下設(shè)置百分比 是沒有作用的，所以得設(shè)置為具體數(shù)字或者用js賦值，類似這種：
$('main').style.width = (document.body.clientWidth-300)*0.6+'px';
P.S：這里沒說高度是因?yàn)槿绻唤o容器固定高度，圖表是完成不顯示的（高度為0的容器肯定不會顯示哦）
那么如果想設(shè)置echart圖表隨窗口的縮放變化呢？以下兩種寫法都可以：
第一種：
window.onresize = myChart.resize; // .resize后不用加括號哦，一般如果window resize的時(shí)候不設(shè)置其他，可以這樣寫
第二種：
window.onresize = function () {
this.myChart.resize();
// .resize后加括號哦，這里還可以寫其他的事件
};
echarts官方文檔寫的很詳細(xì)哦，需要的童鞋自己去翻閱。
具體到我的代碼，我是這樣實(shí)現(xiàn)的，因?yàn)槲业娜萜魇前俜直葘懙模晕业膶?shí)現(xiàn)方式如下：
即是dom節(jié)點(diǎn)渲染以后，調(diào)用echarts實(shí)例的resize()方法；
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章是一篇Vue.js的教程，目標(biāo)在于用一種常見的業(yè)務(wù)場景——分頁/無限加載，以及編寫過程中自己的錯(cuò)誤寫法，分享給大家，幫助讀者更好的理解Vue.js中的一些設(shè)計(jì)思想。2016-10-10
Vue3?封裝?Element?Plus?Menu?無限級菜單組件功能的詳細(xì)代碼
本文分別使用?SFC（模板方式）和?tsx?方式對?Element?Plus?*el-menu*?組件進(jìn)行二次封裝，實(shí)現(xiàn)配置化的菜單，有了配置化的菜單，后續(xù)便可以根據(jù)路由動態(tài)渲染菜單，對Vue3?無限級菜單組件相關(guān)知識感興趣的朋友一起看看吧2022-09-09
下面小編就為大家分享一篇Vue項(xiàng)目中設(shè)置背景圖片方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue實(shí)現(xiàn)左右菜單聯(lián)動實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)左右菜單聯(lián)動實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要給大家介紹了關(guān)于Vite內(nèi)網(wǎng)ip訪問的2種配置方式,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Vite具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了elementUi 中table表尾插入行的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue中利用prop進(jìn)行父子通信時(shí)的注意事項(xiàng)總結(jié)
這篇文章主要給大家介紹了關(guān)于vue中利用prop進(jìn)行父子通信時(shí)的注意事項(xiàng),文中通過實(shí)例介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-01-01
滾動條能夠給用戶帶來極好的體驗(yàn)效果，今天通過本文給大家分享vue實(shí)現(xiàn)一個(gè)滾動條樣式，代碼簡單易懂，需要的朋友參考下吧2021-07-07
這篇文章主要介紹了Vue3.0中如何監(jiān)聽props方法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
elementUI使用el-upload上傳文件寫法及避坑總結(jié)(上傳圖片/視頻到本地/服務(wù)器及回顯+刪除)
upload上傳是前端開發(fā)很常用的一個(gè)功能,下面這篇文章主要給大家介紹了關(guān)于elementUI使用el-upload上傳文件寫法及避坑的相關(guān)資料,包括上傳圖片/視頻到本地/服務(wù)器及回顯+刪除,需要的朋友可以參考下2023-03-03