记录echarts 多图问题（布局、resize）

最近的有一个需求是这样的
数据是后端返回的，v-for渲染。要求一行最多三个， 如果是5个， 第二行的俩个要平分， 如果是4个， 第四个图要独占一行。

如果用js 进行计算length 的话， 就太麻烦了。

于是我发现了 flex-grow， 这一神仙属性。

flex-grow

详细解释：
container就是父容器，B1 B2 B3就是子容器，假如container的width是500px，那么剩余空间就是：500px - B1.width - B2.width - B3.width。嗯就是这么简单！

##flex-grow (default:0) 知道了剩余空间的概念，首先来看一下flex-grow。上面那个例子，我们假设container的width是500px，现在我们再假设B1、B2、B3的width是100px，那么剩余空间就是500-100*3=200。 知道了剩余空间有什么用呢？这个时候flex-grow就该出场了，假如我们这个时候对B1设置flex-grow:1，那么我们会发现，B1把B2和B3都挤到右边了，也就是说剩余的200px空间都被B1占据了，所以此时B1的width比实际设置的值要大。

所以这里flex-grow的意思已经很明显了，就是索取父容器的剩余空间，默认值是0，就是三个子容器都不索取剩余空间。但是当B1设置为1的时候，剩余空间就会被分成一份，然后都给了B1。 如果此时B2设置了flex-grow:2，那么说明B2也参与到瓜分剩余空间中来，并且他是占据了剩余空间中的2份，那么此时父容器就会把剩余空间分为3份，然后1份给到B1，2份给到B2，如下面这样子。

第二个问题就是echarts 的resize

大家都知道
window.onresize = () => { this.myChart.resize() }
这样可以解决， 但是通常只对最后一个奇效。
所以加一个setTimeout 可以令全部都resize；

   window.addEventListener('resize', ()=>{
      setTimeout(() => {this.myChart.resize()},100)
   });