近项目用到了Echarts,他要求在容器上以行内样式固定宽高。这就无法按照浏览器大小进行自适应调整。经过一番纠结发现了解决方法.
官网描述的截图如下:
这个鬼东西,简直是反人类的设定好吗。这都什么年代了不能自适应的网站是不可以滴。我在这个项目使用的是百分比布局。
先说下整体的思路,就是在Echarts的容器外面套一个盒子来自适应屏幕大小,然后用js获取盒子宽高在赋值给Echarts容器。
废话少说看代码
html
<div class="chart_box">
<div class="" id='chinesechart'>
</div>
</div>
chartBox为图表盒子节点,用CSS给这个div设置自适应的百分比宽高,
myChartsize为图表节点,用js让他的宽高和chartBox相等.
css
.chart_box{
width: 95%;
height: 300px;
margin: 0 auto;
}
js(想直接用的copy这里面的code即可)
//参数container为图表盒子节点.charts为图表节点
function chartssize (container,charts) {
function getStyle(el, name) {
if (window.getComputedStyle) {
return window.getComputedStyle(el, null);
} else {
return el.currentStyle;
}
}
var wi = getStyle(container, 'width').width;
var hi = getStyle(container, 'height').height;
charts.style.width = wi
charts.style.height = hi
}
然后监控每次浏览器窗口变化的时候调用chartssize()就可以了。
window.οnresize=function(){
chartssize(chartBox,myChartsize)
}
这里有需要注意的问题,通过myChartsize .style.width = chartBox .style.width 这种方式去设置是无效的.
因为直接获取chartBox .style.width是取不到的,因为chartBox你设置的是百分比宽高。
所以要用getComputedStyle()方法取。
所以我封装了获取宽高的方法如下
function getStyle(el, name) {
if (window.getComputedStyle) {
return window.getComputedStyle(el, null);
} else {
return el.currentStyle;
}
}