echarts 容器大小随屏幕自适应

描述：

echarts的容器规定必须定宽高，之前尝试用百分比也失效了。原因是它的容器大小只会在初始加载时获取一次，不论是定死还是百分比，都只会获取一次。这样在拉动页面的时候容器自己改变，但是图表却没有改变。

解决：

为窗口设置监听事件，监听窗口变化，来重新获取echarts的容器大小。

1、首先需要给容器的父容器设置宽高（百分比或者像素都可以）

2、给容器设置百分比的宽高

#chart {
  margin-top: 50px;
  width: 100%;
  height: 75%;
  transform: translateY(-40px);
}

3、在setoption之后设置定时器

   chart.setOption(option);
      setTimeout(function() {
        window.onresize = function() {
          chart.resize();
        };
      });

效果图：

疑惑：

现在还没有办法等比缩放图表容器，想要的结果应该是水平垂直保持居中（可以设置位置百分比）及等比缩放图表。

在搜索后发现，比较常见的等比缩放容器方法是用上下padding代替height，因为padding是根据width取百分比。但是对于echarts而言，如果没有height将无法渲染。

暂时只能做出这样的效果。也许需要在created周期获取到容器的宽度，再通过百分比计算高度return给css，然后在窗口变化函数再加上这个函数，更改容器的height。有时间再尝试。