这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战
- 在线音乐戳我呀！
- 音乐博客源码上线啦！
- 前几篇讲了Docker的安装部署，操作算是比较简单的。（入门级）
- 自从教需求学会去echarts官网找例子后，现在需求直接给我echarts链接，让我实现出来。
- 你以为的原封不动？实则是在此基础上，再画龙添足。
- 有一次说加载数据太多，页面会卡顿，需求立马上官网写上5k数据，说还可以啊。可以是可以，但人家显示一个，你要一个页面显示5个图表，这性能加载翻五倍了呀，姐姐。
- 接下来将分享工作以来写Echarts心得，一五一十盘出。
- Are you ready ？
靠椅到了，打代码路上变得软暖暖 ~
echarts图位置变小，变形之后还出现卡顿现象。
下面我们分析为什么会存在该问题。
有一个按钮，点击之后，echarts图占的位置变小，此时echarts会变形，需要重新计算大小。那么怎么计算呢？
三年经验者的思路。
使用浏览器提供的一个API：， 接口可以监听到 的内容区域或 的边界框改变。
如果在ResizeObserver内部打印一下，会发现点击按钮时，echarts图占的位置变小，会多次触发ResizeObserver，因为宽度在不停的变动，所以打印50次111（因为有五个图），就意味着chart被resize十次，所以页面会导致很卡。
我问他，你不觉得你的页面很卡顿吗？他说还行吧，这个效果我已经优化过了。
原本他在ResizeObserver内部做了赋值，如果值不为空就不resize，说原来resize已经优化过了。
接着问：怎么不用resize方法，他说没用。
那好，我写给你看。
window监听resize事件。如下：
如果在resize方法内部打印一下，会发现点击按钮时，echarts图占的位置变小，会触发resize，打印5次666（因为有五个图），就意味着chart只被resize一次，因为addEventListener、resize内部一个有做取消上一次的变化。明显不卡顿，被优化。
因为window绑定resize只是窗口变化会触发，但点击按钮的时候，echarts图占的位置变小，并不会触发resize窗口变化，这时，我们要点击按钮的时候，手动触发resize方法即可。
window监听resize事件只触发一次，就很优化。
好了，你现在还觉得哪里不行。
三年经验者：我一开始用resize就没用。
那你是不是没用定时器给它延迟resize计算呢？
没用的话，是因为echarts实例还没有加载好，就算此时resize计算宽高，也是计算不出的。自然达不到我们要的效果。也就不生效。
有两种方案，一个是ResizeObserver，另一个是resize。
、、、
在写Echars的时候，要注意自适应，会不会变形，吐槽Echarts的属性真的多，但又间接说明他的强大，可扩展性强，又不得不想起和女神共处事的日子，那个时候我还是那个少年。
如果对您有帮助，您的点赞是我前进的润滑剂。
