當(dāng)外層div盒子設(shè)置寬度為100%時(shí)，可echarts渲染出來(lái)寬度只有100px，這種情況大多數(shù)echarts所在的div設(shè)置了display:none，獲取不到外部盒子的寬度。

這里可以通過(guò)echarts源碼獲取寬度的行為來(lái)解釋

究其原因就是出現(xiàn)在了圖表設(shè)置了display:none屬性上（屬性含義：不為被隱藏的對(duì)象保留其物理空間，關(guān)閉元素的顯示，并且所有后代元素不顯示）

我們通過(guò)瀏覽器打斷點(diǎn)可以看清楚echarts在計(jì)算圖表寬度這部分的邏輯$("#chart").css("width",$("#chart").width())；，("#chart")指的是當(dāng)前繪制圖表的div，獲取當(dāng)前元素的寬度后把固定寬度賦值給圖表。

但是為什么我們寬度設(shè)置了100%，結(jié)果變?yōu)榱?00px？ 這里上源碼可以解釋?zhuān)?/p>

源碼解讀：當(dāng)echarts繪制表格（也就是執(zhí)行init方法）計(jì)算寬度的時(shí)候，由于初始化圖表時(shí)外層div盒子的屬性為display:none，所以無(wú)法獲取到盒子的clientWidth（可視化寬度），而parseInt(stl.width,10)將寬度100%轉(zhuǎn)換成了100（這里的stl.width，就是外層的div的樣式中的width屬性，因?yàn)槲覀兂跏紩r(shí)設(shè)置了100%，所以這里可以獲取到），所以計(jì)算出的圖表寬度為100px。

（源碼這里沒(méi)有獲取到clientWidth（可視化寬度，因?yàn)閐isplay:none屬性，無(wú)法獲取到，就會(huì)將設(shè)置的width:100%轉(zhuǎn)換稱(chēng)100px））

解決方法：外部div盒子必須要在init初始化前就已經(jīng)存在于dom樹(shù)中（也就是已經(jīng)掛載）。

不要 在display:none的情況下（包括v-show、v-if后面的邏輯值是false時(shí)），一上來(lái)就初始化（init）echart。只要一初始化，就會(huì)執(zhí)行源碼計(jì)算出echart的寬度。

如何確保dom已經(jīng)存在再去初始化呢：這里可以監(jiān)視display屬性（一般在項(xiàng)目中是通過(guò)v-if或者v-show，所以這里監(jiān)視的是掌控盒子是否顯示的變量 ），在監(jiān)視中（watch），要配合nextTick方法使用，這樣才能完全確保初始化之前，外部盒子已經(jīng)存在于dom樹(shù)中。（一般初始化過(guò)程是寫(xiě)在nextTick中）

附：echarts寬度如何設(shè)為百分比

var width = $("#tabitem2").width()*0.45;
$("#mainPay").css("width", width);
$("#mainDetail").css("width", width);
$("#main").css("width", width);
$("#mainItem").css("width", width);
$("#mainBehavior").css("width", width);
$("#mainBehaviorPay").css("width", width);
$("#mainDepartment").css("width", width);
$("#mainDoctor").css("width", width);

var myChartPay = echarts.init(document.getElementById('mainPay'));
var myChartDetail = echarts.init(document.getElementById('mainDetail'));
var myChartDepartment = echarts.init(document.getElementById('mainDepartment'));
var myChart = echarts.init(document.getElementById('main'));
var myChartItem = echarts.init(document.getElementById('mainItem'));
var myChartDoctor = echarts.init(document.getElementById('mainDoctor'));
var myChartBehavior = echarts.init(document.getElementById('mainBehavior'));
var myChartBehaviorPay = echarts.init(document.getElementById('mainBehaviorPay'));

說(shuō)明：

這里 有個(gè) div class=tabitems ，將寬度設(shè)置為 0.45倍的它。

然后對(duì)八個(gè)圖表設(shè)置寬度為width。因?yàn)?tabitem2的寬度是動(dòng)態(tài)的，所以每次隨著屏幕寬度改變，都會(huì)重新計(jì)算這個(gè)寬度然后賦值。

總結(jié)

到此這篇關(guān)于echarts圖表設(shè)置寬度100%結(jié)果為100px的文章就介紹到這了,更多相關(guān)echarts圖表寬度100%為100px內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論