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

Vue 2年前 (2021) bestcyt
860 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:取过滤点的和
根据需求设置降采样策略取值。

开启降采样策略后:

web历史曲线卡顿问题---Echarts降采样策略 web历史曲线卡顿问题---Echarts降采样策略
https://so.csdn.net/so/search/blog?q=Echarts&t=blog&p=1&s=0&tm=0&lv=-1&ft=0&l=&u=weixin_41290949

版权声明:bestcyt 发表于 2021年3月19日 am9:10。
转载请注明:web历史曲线卡顿问题—Echarts降采样策略 | 爱前端导航

相关文章

联系站长