vue+echarts加载大量数据时浏览器很卡甚至崩溃,该如何解决?

情况紧急:
在一张图里绘制7条线段,每条最多720个点,采用的散点图,加载时关闭了动画效果,每次在chrome中加载都需要5到6秒的时间;
在另一个页面,最多14张图,每张一条720个点的线段,加载及其缓慢,并且经常出现崩溃情况;
想知道echarts加载大量数据时有什么好的处理方法,各位走过路过的大佬们麻烦支个招!
ps:在echarts的github库里查找这类问题,发现基本都没太好的解决措施;

阅读 24.6k
4 个回答

经过排查,确认内存上升是因为图形实例未被销毁,即使使用dispose()方法也不行;现在采用的方法是手动清空相关对象变量,包括图形实例和相关的数据项,这样处理在一定程度上减少了内存的增加;但由于js中变量清空后内存并不会马上被回收,因此采用了比较笨的方法,在特定的时刻刷新整个页面,这样就基本解决了问题。
另外,虽然现在浏览器不会崩溃了,但是图形绘制还是需要比较长的时间,UI和需求没办法修改,只好加上loading动画,暂时先这么处理了;

哥们 你事想让vue死啊,
建议你写个一步Promise.all()让数据一个一个加载进来,一张张图渲染

数据量太大了,这根vue和echarts都没有关系,浏览器遭不住,只能写一个loading效果等待一下,如果数据量已经大到浏览器卡死了,最好从设计上优化吧,要么不要一个页面展示那么多图,要么让服务端把数据做一下采样,毕竟那么多的点也没法看啊

分别渲染7条线段是否可以解决这个问题呢?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
1 篇内容引用
推荐问题