echart渲染阻塞问题?

Question

我现在需要用echart同时渲染3个散点图，且每50ms刷新一次数据（利用webSocket从后端获取），但是三个图表的高频率使用setOption()，，导致其阻塞了JS程序，无法快速响应后台大量的密集的数据（50ms获取一次实时数据），也无法很好地流畅渲染图表，因为浏览器的JS是单线程的，求问各位有没有什么好的解决方案？算是技术瓶颈了。
（PS：三个图每次setOption()完总共花了120ms，根据电脑算力而定；各位可以自己用for循环模拟一下）

Answer 1

https://echarts.apache.org/zh...
所有参数和数据的修改都可以通过 setOption 完成，ECharts 会合并新的参数和数据，然后刷新图表。如果开启动画的话，ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化

所以你不一定非得以50ms的间隔刷新数据，其实以更低频率刷新，图像也能有渐变的动画效果。

https://echarts.apache.org/zh...
此接口用于，在大数据量（百万以上）的渲染场景，分片加载数据和增量渲染。在大数据量的场景下（例如地理数的打点），就算数据使用二进制格式，也会有几十或上百兆，在互联网环境下，往往需要分片加载。appendData 接口提供了分片加载后增量渲染的能力，渲染新加入的数据块时不会清除原有已经渲染的部分。

也可以试试使用这个appendData接口，这个接口添加新数据的时候，不会清除已经渲染的部分。也就是说这个接口是一个“增量”更新的接口。

Apache ECharts 5 新支持了脏矩形渲染，解决只有局部变化的场景下的性能瓶颈。在使用 Canvas 渲染器时，脏矩形渲染技术探测并只更新视图变化的部分，而不是任何变动都引起画布完全重绘。这能在一些特殊场景下帮助提高渲染帧率，例如在图形很多时候，鼠标频繁触发一些图形高亮的场景。以往这类场景，会使用额外的 Canvas 层以优化性能，但是这种方式不是所有场景都通用，而且对于复杂的样式的效果并不理想。脏矩形渲染很好地同时满足了性能和显示正确。

如果使用echarts 5支持初始化的时候传递useDirtyRect开启脏矩形，在canvas模式下可以提升渲染性能。针对少量数据变化的场景，每次只渲染更改的部分，提升渲染性能。

Answer 2

for循环里用setTimeout将三次渲染变成异步试试？