Vue-Echarts图表组件性能优化

页面在渲染的时候出现了卡顿的情况。
页面上的秒数从1-2-3秒- 直接从1变成了5

核心原因 js 单线程原因
每次1秒轮询请求接口拿到数据 一直重新渲染页面负荷不起。

解决方案。

定位电视机性能，取消轮询-页面是可以流畅加载的。
说明电视机性能还是可以的-只是因为数据实时变化导致的卡顿。

优化的本质是什么-那就是分类-如果还有那就是加载优先级。

位置固定 右上角和各个图表位置固定 减少重排

弄两个变量一个 flag 一个 count
一开始请求接口直接渲染 置为false

watch监听count变量
所以第一次渲染之后拿到的数据都是保存在 saveList里面
等全部渲染完之后再开始渲染
（就是count数量变4 所有图表组件都渲染完之后再进行渲染）

解决 拆分成各个组件
每一个组件因为seOption是同步的操作dom
所以之后使用setTimeout emit发射进行添加 count次数
watch监听到才把数据进行赋值渲染 深拷贝

这样的话右上角的 数字 20s就可以实时变化 不会卡顿
用户看到的数据也都是实时更新的
当然也有可能请求数据过快 上一秒的没有渲染出来。
但是那没有关系 -用户是无感的 这点细节根本体会不到

完美实现

web-socket-需求不允许

有什么更好的方案-求大佬们批评指出。

多多点赞-评论-收藏-关注。谢谢各位大佬啦。