echarts图渲染大量数据崩溃

项目需求，一个echart图要渲染两三万个点，绘制折线图。接口相应速度、数据处理速度都很快，唯独是UI层面的渲染特别卡顿，web端勉强能接受，app端之间卡死。查阅文档，询问大神，最终寻得如下的解决方案。

非技术类

• 最好的解决方案是更改产品需求（哈哈，开发人员跟产品开撕的时刻哦…）
• 加loading，提高用户交互体验（治标不治本，无法解决本质问题）

技术类

虽然这次开发，选用的是echarts，剩余的还有highchart、chart，但是我都没有实际去尝试，因为本身现有的chart类库都是基于某一款二维绘制引擎去封装的，比如echarts的二维引擎是zrender，zrender本身是可以给予canvas或者svg，所以层层封装，注定了渲染UI的时候会有各种延时，那么如果用canvas或者svg之间绘制呢，我没有实验，因为图表上还会有各种交互，嫌麻烦，最为保底方案，暂不尝试！

• sampling 降采样渲染
  官方提供的方法，亲测有效，降采样直接取平均值，肉眼可见的app不会卡死，两万五千多个点渲染速度约3s（app渲染时间不好监控，没有截图）

• 更改datazoom的startValue、endValue
  这么做的目的就是一次性渲染一部分数据，相当于分段渲染，查看的时候拖动datazoom，也是分段查看，效果没有一次性看整体的好，不过也是看项目需求。

• appendData
  主要支持ECharts GL，基础版本只支持 散点图（scatter） 和 线图（lines），注意是lines，不是line！（看错一个单词还试了半天的）

---

2022-09-05 补充

最近项目测试过程中发现sampling降采样用的average会带来一个bug。降采样的过程中，会自动略掉很多的数值，直接影响y轴对应的最大值，缩放栏操作的时候，降采样忽略的最值可能大于初始化显示的最值，所以仔细阅读文档，保留极值，可以用lttb

2023-11-28 补充

echarts渲染大数据量json，可以从后台返回的数据大小方面进行gzip压缩，亲测如下

• 图一是后台为使用gzip压缩接口返回的数据大小
  
• 图二是添加gzip之后返回的数据大小
  
  对比看来，能压缩五倍左右，加载速度也有显著的提升，后台代码如下

#开启数据Gzip压缩
server.compression.enabled=true
server.compression.min-response-size=1024
server.compression.mime-types=application/json