近項(xiàng)目用到了Echarts,他要求在容器上以行內(nèi)樣式固定寬高。這就無法按照瀏覽器大小進(jìn)行自適應(yīng)調(diào)整。經(jīng)過一番糾結(jié)發(fā)現(xiàn)了解決方法.
官網(wǎng)描述的截圖如下：
這個(gè)鬼東西，簡直是反人類的設(shè)定好嗎。這都什么年代了不能自適應(yīng)的網(wǎng)站是不可以滴。我在這個(gè)項(xiàng)目使用的是百分比布局。
先說下整體的思路，就是在Echarts的容器外面套一個(gè)盒子來自適應(yīng)屏幕大小，然后用js獲取盒子寬高在賦值給Echarts容器。
廢話少說看代碼
html
<div class="chart_box">
? ? ? <div class="" id='chinesechart'>
? ? ? </div>
</div>
chartBox為圖表盒子節(jié)點(diǎn),用CSS給這個(gè)div設(shè)置自適應(yīng)的百分比寬高,
myChartsize為圖表節(jié)點(diǎn),用js讓他的寬高和chartBox相等.
css
.chart_box{
? ? ? ? width: 95%;
? ? ? ? height: 300px;
? ? ? ? margin: 0 auto;
}
js(想直接用的copy這里面的code即可)
//參數(shù)container為圖表盒子節(jié)點(diǎn).charts為圖表節(jié)點(diǎn)?
function chartssize (container,charts) {
? ? ? function getStyle(el, name) {
? ? ? ? if (window.getComputedStyle) {
? ? ? ? ? return window.getComputedStyle(el, null);
? ? ? ? } else {
? ? ? ? ? return el.currentStyle; //兼容ie
? ? ? ? }
? ? ? }
? ? ? var wi = getStyle(container, 'width').width;
? ? ? var hi = getStyle(container, 'height').height;
? ? ? charts.style.width = wi
? ? ? charts.style.height = hi
? ? }
然后監(jiān)控每次瀏覽器窗口變化的時(shí)候調(diào)用chartssize（）就可以了。
window.οnresize=function(){?
chartssize（chartBox,myChartsize）?
}
這里有需要注意的問題,通過myChartsize .style.width = chartBox .style.width 這種方式去設(shè)置是無效的.
因?yàn)橹苯荧@取chartBox .style.width是取不到的，因?yàn)閏hartBox你設(shè)置的是百分比寬高。
所以要用getComputedStyle（）方法取。
所以我封裝了獲取寬高的方法如下
? function getStyle(el, name) {
? ? ? ? if (window.getComputedStyle) {
? ? ? ? ? return window.getComputedStyle(el, null);
? ? ? ? } else {
? ? ? ? ? return el.currentStyle;
? ? ? ? }
? ? ? }
————————————————
版權(quán)聲明：本文為CSDN博主「劍雪封喉r」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/u010682330/article/details/87923566
