优化Echarts数据过多时的卡顿

介绍

当Echarts数据量过大时，会消耗大量性能，导致页面卡顿。
此时需要对Echarts进行优化。

解决方案

dataZoom

dataZoom组件，用于区域缩放，概览数据整体，或去除其他数据。
当然，只显示区域的数据量，可以大大减轻渲染压力。
但使用dataZoom组件不能一下全部显示数据，需要手动选择。用户体验可能会受到影响。
常用的配置项

type: "slider" || "inside",
  slider:这种类型会在图表的一侧添加一个滑动条，
  用户可以通过拖动滑动条来改变数据窗口的范围，从而实现数据的缩放。
  inside:这种类型缩放组件是内置于坐标系中的，
  用户可以通过鼠标滚轮、触屏手指滑动等方式来操作数据的缩放。
  简单点说:slider会产生一个滚动条，inside不会

xAxisIndex: 可以是一个数字，表示特定的X轴索引；
  也可以是一个数组，表示同时控制多个X轴。

xAxisIndex: 0, 控制第1条数据开始

start: 0, 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。

end: 1, 数据窗口范围的结束百分比。范围是：0 ~ 100。

minSpan: 0, 用于限制窗口大小的最小值（百分比值），取值范围是 0 ~ 100。

maxSpan: 10, 用于限制窗口大小的最大值（百分比值），取值范围是 0 ~ 100。

start: 设置为0；说明是从第1条数据开始的；
那么xAxisIndex就必须是0;
因为xAxisIndex不是0，他们就互相矛盾了；
minSpan 和 maxSpan一般配合使用；主要是用于只展示某一个区间；
无论用户怎么缩放；都会在这个区间

详细的配置项

降采样

降采样，就是将数据量多的数据进行降采样，只展示部分数据。
但降采样会导致部分数据丢失，tooltip功能可能无法实现。
在series配置项中添加sampling配置项，常用的可选值有

average: 平均值。
lttb：最大程度保证采样后线条的趋势，形状和极值。

详细可选值

大数优化

series的large配置项是否开启大数据量优化。
开启后配合series的largeThreshold 在数据量大于指定阈值的时候对绘制进行优化。
但是优化后不能自定义设置单个数据项的样式。且仅支持柱状图(bar), K 线图 (candlestick), 路径图(lines)，散点图(scatter)。
大数优化

参考资料

Echarts 文档
 ECharts海量数据渲染解决卡顿的4种方式

关于本人

HaiYao的博客
 Git主页