如何使echarts响应容器大小变化

首先来品鉴一下官方文档上的写法：

在有些场景下，我们希望当容器大小改变时，图表的大小也相应地改变。

比如，图表容器是一个高度为 400px、宽度为页面 100% 的节点，你希望在浏览器宽度改变的时候，始终保持图表宽度是页面的 100%。

这种情况下，可以监听页面的 window.onresize 事件获取浏览器大小改变的事件，然后调用 echartsInstance.resize 改变图表的大小。

<style>
  #main,
  html,
  body {
    width: 100%;
  }
  #main {
    height: 400px;
  }
</style>
<div id="main"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'));
  window.onresize = function() {
    myChart.resize();
  };
</script>

 window.onresize直接给window的onresize属性绑定事件，在窗口大小发生改变时调用后面的函数

试了之后发现不是很好使，原因不清楚，可能是因为我在mounted里面调用了多个绘图方法，而onresize只能绑定一个事件。不过下面这种写法是好使的

chart(element, item) {
      var myChart = echarts.init(document.getElementById(element))
      myChart.setOption(item)
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    },

使用addEventListener()添加监听resize的事件，这样resize触发时可以调用多个函数。