dom布局改变，怎么实现echarts重绘？

Question

一个页面中使用到多个echarts图表，但是同一页面上有部分dom具有折叠功能，折叠后页面布局改变，但是echarts不会重绘自适应。
目前使用window的resize监听+折叠按钮延时触发echarts.resize()+mounted延时触发echarts.resize()，这样的耦合性太高。
考虑使用自定义指令实现，但是vue自定义指令不能监听dom变化。
使用定时器和elementRisizeDetect都会阻塞页面的折叠动画。
有什么办法能更好实现echarts重绘吗？

Answer 1

指令不能监听，但是 DOM API 可以呀

1. DOM断点调试

2. js 的话

   1. https://developer.mozilla.org...
   2. Mutation events https://developer.mozilla.org...
      这个被废弃了，推荐使用第一个

Answer 2

https://juejin.im/post/6854573218741633038
，看到有人关注这个问题，所以把自己尝试和总结了的几种方案写了个markdown，并发表到这里，希望能解决你的问题