欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Element圖表初始大小及窗口自適應(yīng)實(shí)現(xiàn)

 更新時(shí)間：2020年07月10日 10:18:49   作者：yuwenjing  
這篇文章主要介紹了Element圖表初始大小及窗口自適應(yīng)實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

最近在做一個(gè)輪播圖，使用的是element的Carousel走馬燈，每一個(gè)走馬燈里是eachrts圖，開始頁(yè)面加載的時(shí)候發(fā)現(xiàn)echarts圖并不能自適應(yīng)，開始以為是走馬燈的問(wèn)題，后來(lái)發(fā)現(xiàn)不是

不知道大家在用echarts的時(shí)候有沒(méi)有遇到這種情況：

最開始盛放圖表的容器是隱藏（或者tab切換）的，然后再顯示的時(shí)候，里面echarts圖表就沒(méi)用初始大小了。比如我遇到的這種：

有童鞋這會(huì)兒估計(jì)看出原因了：因?yàn)樵刈畛蹼[藏，再顯示之后沒(méi)有自動(dòng)變化寬度，所以echarts圖表沒(méi)有初始寬高，官方文檔的說(shuō)法：

請(qǐng)注意：這個(gè)寬度在一些情況下設(shè)置百分比 是沒(méi)有作用的，所以得設(shè)置為具體數(shù)字或者用js賦值，類似這種：

$('main').style.width = (document.body.clientWidth-300)*0.6+'px';

P.S：這里沒(méi)說(shuō)高度是因?yàn)槿绻唤o容器固定高度，圖表是完成不顯示的（高度為0的容器肯定不會(huì)顯示哦）

那么如果想設(shè)置echart圖表隨窗口的縮放變化呢？以下兩種寫法都可以：

第一種：

window.onresize = myChart.resize;
// .resize后不用加括號(hào)哦，一般如果window resize的時(shí)候不設(shè)置其他，可以這樣寫

第二種：

window.onresize = function () {
    this.myChart.resize();
    // .resize后加括號(hào)哦，這里還可以寫其他的事件
};

echarts官方文檔寫的很詳細(xì)哦，需要的童鞋自己去翻閱。

具體到我的代碼，我是這樣實(shí)現(xiàn)的，因?yàn)槲业娜萜魇前俜直葘懙模晕业膶?shí)現(xiàn)方式如下：

即是dom節(jié)點(diǎn)渲染以后，調(diào)用echarts實(shí)例的resize()方法；

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論