web历史曲线卡顿问题—Echarts降采样策略

学习分享3年前 (2023)更新 bestcyt

1,514 0 0

渲染绘制37W条数据3秒；
web历史曲线卡顿问题---Echarts降采样策略
此时拖动图表底部滑块明显卡顿，并且第一眼看不到图表曲线趋势；

降采样策略：

sampling: ‘average’,

series: [{
       data: historyValue,
       type: 'line',
       animation: false,
       // showSymbol :false,
       sampling: 'average', // 降采样策略-明显优化拖动滚动条卡顿
       smooth: false
}]

开启后有效地优化图表渲染绘制，这个在图表中默认是关闭的，小的数据量可以不开启；
降采样就是过滤数据点，数据量比较大时对数据点进行过滤，渲染绘制过滤后的数据点（数据是相同的）。
average：取过滤点的平均值
max：取过滤点的最大值
min：取过滤点的最小值
sum：取过滤点的和
根据需求设置降采样策略取值。