echart绘图溢出div问题

叠甲

记录今天开发遇到的一个问题，严谨性待究，解决的时候，有这么个思路，顺着解，解开了，但是我并没有去深究它的底层

起因

需求是用echart在vue组件中绘制几个图表，在绘制折线图的时候出现了上述问题，

上下文

一个首页，有三列，左右两列各俩div，分别对应一个图表，中间一列，最顶上3个div，横向排列，中间一个div，放gif资源，最下面一个div放一个折线图，所以中间这列用的是flex（很关键），

现象

在mounted函数中调echart.init,然后设置参数，最后绘制，发现，浏览器加载页面的时候，两侧的图表都很正常，唯独折线图一直溢出div，

解决过程

最初怀疑的是图表div放错地方了，拿到的dom高度是错的，所以溢出了

                                                                --------调整过很多次，都没用

怀疑过是不是flex跟echart有冲突，将折线图放到两侧，发现很正常，所以以为是有冲突，遂将flex布局替换成相对绝对布局（我初学，不懂专业术语），发现还是溢出，好了，改回去，flex在布局上还是很有优势的

找不到原因，直接解决问题也行，使用echart提供的resize方法，通过选择器选择dom，获取clientHeight，传值给resize，发现还是溢出，打印dom高度，跟见到的dom高度不一样，很神奇

终于在无数次尝试后，发现一个奇怪的现象，vue有个特点，改了代码，当即页面会显示新的，虽然每次初次刷新，dom都会溢出，但是这时，我稍微动一下代码，比如敲一个回车，他页面上dom会刷新，图标也是，发现折线图竟然没溢出了，带年纪浏览器刷新按钮，又溢出， 所以猜测这是echart绑定dom初始化的时候出来问题，拿到的dom高度不对，但我讲不清楚为什么拿到的是错误的dom高度，

所以想了一个法子，能不能加载完页面后，让页面自己再刷新一下（其实这个没用，但当时脑子糊涂了，觉得可行，所以找到了一个reload函数）这个location.reload(),我把它放在mounted的echart初始化后面，期待它可以在做完初始化后刷新一次页面让我的ecahrt不溢出。但是，他死循环了一直在reload，我不知道什么原因，但还是打开了f12，看着看着，发现一个奇怪的现象，

他在绘制折线图的时候，很正常，但是它的dom位置不对，那个装gif的div还没加载，所以图表div变的很大，我猜测这是flex的原因，他自动把空间全部占用了，这一切都是在钩子函数中完成，在这个周期内，静态资源还没加载，等到人眼看到页面的时候，静态资源加载完成了，就把图表挤下去了，导致溢出了。

以上是根据现象做出的猜测

如何证明这个猜测？让他先加载静态资源，然后做初始化，

1，async/await,没啥用，或者说我没想到好的方案

2，在mounted里面指定加载静态资源，，，，太麻烦，我也不知道能不能行，

3，把折线图绘制取出来，监听gif加载事件 ，事件完成之后，触发折线图初始化。

第三个方案感觉可行，只需要往gifdiv中添加一个@load=’functionName‘，

最终方案

选定方案三，测试，确实如此，解决了echart绘制图表溢出div的问题。

总结（不一定对，我暂时也不一定有时间去看这么底层的东西）：钩子函数优先级很高，静态资源优先级很低，在mounted中在echartdom绑定和初始化，那个时候，静态资源没加载，那个盒子没有border，所以坍塌了，或者是flex的原因，导致下面的div不正常，也就是占用了Negev还没加载的div的空间，导致dom高度变了，这个时候做初始化，拿到的dom高度是错的，然后绘制了一个高度完全超过父div高度的图表，然后，静态资源加载，加载完成后，它本身的div被撑起来，把下面的div挤下去，导致图表溢出。

以上作为今天开发和学习的一个收获，记录一下，什么时候有空了，再去看看真正的原因，有大佬的也可以帮忙分析。先这样吧