快捷導(dǎo)航

echarts圖表設(shè)置寬度100%結(jié)果為100px的解決辦法

更新時間：2022年12月13日 08:59:49 作者：cxy-Study

在開發(fā)一個前端項目時需要用到Element-ui的el-tabs組件和Echart開源庫,當兩者嵌套使用時,我給Echart中的圖表寬度設(shè)置為了100%,但是實際的寬度卻只有100px,這篇文章主要給大家介紹了關(guān)于echarts圖表設(shè)置寬度100%結(jié)果為100px的解決辦法,需要的朋友可以參考下

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

這里可以通過echarts源碼獲取寬度的行為來解釋

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

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

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

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

（源碼這里沒有獲取到clientWidth（可視化寬度，因為display:none屬性，無法獲取到，就會將設(shè)置的width:100%轉(zhuǎn)換稱100px））

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

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

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

說明：

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

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

總結(jié)

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

您可能感興趣的文章: