博客

最近项目用到了Echarts,他要求在容器上以行内样式固定宽高。这就无法按照浏览器大小进行自适应调整。经过一番纠结发现了解决方法.

官网描述的截图如下：

这个设计，多少有那么一点不够灵活。

我这个项目使用的是百分比布局。所以就拿这中情况举例，不过原理都是一样的

先说下整体的思路，就是

在Echarts的容器外面套一个盒子来自适应屏幕大小，然后用js获取盒子宽高在赋值给Echarts容器

。

(

注意：很重要，Echarts接受一个具体的数值做为宽高，你直接百分比是不行的，所以要用js获取盒子宽高的具体数值在赋值给Echarts.

)

废话少说看代码

html

<div class="chart_box">  //注意此处两层div，外层是正常适配的盒子，内层是echarts容器
      <div class="" id='chinesechart'>
      </div>
</div>

chartBox为图表盒子节点,用CSS给这个div设置自适应的百分比宽高,

myChartsize为图表节点,用js让他的宽高和chartBox相等.

css

在这里要注意，好多网友反映，高度不自适应，我这里举的例子是高度300px;,要想自适应的话可以将高度也设置为百分比。你可以将外部包裹echarts的这个盒子当作正常的dom元素去做适配，然后将它的宽高赋值给echarts节点就行了。

.chart_box{
        width: 95%;
        height: 300px;  //注意，我这里举例子高度用的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.onresize=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;　　
        }　
      }