echarts-sampling降采样

今天修改一个echarts的渲染效率问题。

首先修改请求数据的问题，原先的逻辑是点击的时候请求数据，我看了下数据大概有七千多条，请求耗时是1.6s-1.7s，这是在我的电脑上。同事反馈在他的电脑上需要5s以上。

于是修改逻辑为：在“分时”的时候就请求“日”和“周”的数据。

这样一来优化了请求的时间，渲染图就不会出现长时间留白。

其次修改：echarts图渲染的时候会有卡顿的情况，查了下echarts官方配置项，有一个sampling可用，是降采样，也就是渲染的时候不把每一个点渲染出来。

echarts官方：

series-line. sampling

string

折线图在数据量远大于像素点时候的降采样策略，开启后可以有效的优化图表的绘制效率，默认关闭，也就是全部绘制不过滤数据点。

可选：

'lttb' 采用 Largest-Triangle-Three-Bucket 算法，可以最大程度保证采样后线条的趋势，形状和极值。
'average' 取过滤点的平均值
'max' 取过滤点的最大值
'min' 取过滤点的最小值
'sum' 取过滤点的和

官方对这几个值的解释很模糊，我没有搞明白什么意思，只能自己来试。

这个是不修改任何采样，渲染出来的图，大概需要300-400毫秒。

“average”

“max”

"min"

function，这个是网上查到的写法

d.sampling = function(frame) {return frame[0]
}

从图上来看，看不出这几种有什么区别，那就用前端的方法来解决，记录setOption的时间

console.time('test')
this.echarts.setOption(option)
console.timeEnd('test')

每个方法的平均渲染时间一目了然，最后决定用average

// [280,288,273,275,276,280,278,284,278,275]  =>278.7
d.sampling = 'average'
// [288,299,268,287,267,284,462,290,273,274]  =>299.2
d.sampling = 'max'
// [333,368,289,279,299,316,296,270,274,298]  =>302.2
d.sampling = 'min'
// [286,287,280,288,442,276,337,310,265,273]  =>304.4
d.sampling = function(frame) {return frame[0]
}

搞掂！

echarts-sampling降采样相关推荐

ECCV 2020 Oral | 可逆图像缩放：完美恢复降采样后的高清图片
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达本文介绍的是ECCV 2020 Oral论文<Inverti ...
Invertible Image Rescaling 可逆图像缩放：完美恢复降采样后的高清图片（ECCV 2020 Oral ）
论文地址:https://arxiv.org/pdf/2005.05650.pdf 开源代码:https://github.com/pkuxmq/Invertible-Image-Rescaling( ...
降采样，过采样，欠采样，子采样，下采样，上采样，你学会了吗？【总结】
降采样: 2048HZ对信号来说是过采样了,事实上只要信号不混叠就好(满足尼奎斯特采样定理),所以可以对过采样的信号作抽取,即是所谓的"降采样". 在现场中采样往往受具体条件的限 ...
我们成功给OpenCV添加了三维点云降采样算法！
作者:阮业淳,钟万里,张昌圳(本科生) 指导教师:于仕琪南方科技大学计算机科学与工程系知名开源计算机视觉库OpenCV(Open Source Computer Vision Library)在其 ...
奈奎斯特抽样频率 matlab仿真,奈奎斯特采样定理、降采样、过采样
奈奎斯特采样定理 fs >= 2fH 根据奈奎斯特采样定理,需要数字化的模拟信号的带宽必须被限制在采样频率fs的一半以下,否则将会产生混叠效应,信号将不能被完全恢复.这就从理论上要求一个理想的截 ...
点云降采样（DownSampling）
点云降采样 1 概述三维点云往往包含大量冗余数据,直接处理计算量大,消耗时间长,因此对其进行降采样是十分必要的.降采样同时也是点云预处理过程中的关键环节. 2 常用方法 2.1 体素网格下采样 2. ...
降采样数字滤波器-MATLAB建模
用于SD-ADC后级的降采样数字滤波器说明第六届集创赛芯海杯赛题对数字滤波器的要求不是很高,记录一下从Matlab搭建模型到Verilog HDL代码实现,到一部分后仿的过程. Matlab-Si ...
FSL——FLIRT使用配准与降采样 registration and resample
FSL--FLIRT使用配准与降采样 registration and resample flirt命令可以用于配准和降采样,最近接触到了这个命令,决定学习一下 Usage: flirt [optio ...
VTK修炼之道30：图像重采样_降采样和升采样技术
1.VTK中的图像重采样实现图像重采样是指对采样后形成的由离散数据组成的数字图像按所需的像元位置或像元问距重新采样,以构成几何变换后的新图像.重采样过程本质上是图像恢复过程,它用输入的离散数字图像重 ...

echarts-sampling降采样

echarts-sampling降采样相关推荐

最新文章

热门文章