Echarts图表自适应宽高大小

近项目用到了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;　　
        }　
      }