echarts折线图大数据量一次性展示卡顿的解决方案
echarts现在已经逐渐成为各类数据展示或者大屏开发的一个重要工具,你可能没有用过但是绝对考虑过
最近在项目开发时遇到了一个问题,Echarts折线图展示近两天的秒级数据的时候会很卡,甚至页面有些时候每秒只有10帧,这是理所当然毕竟在图里画了接近20w的点,(每天86400*2天)
那么要怎么处理呢,可以分为两个方法,第一个对echart图处理,第一个对数据进行处理
echart内配置,增加滑动轴和懒加载
简单的滚动配置和滑动监听
const option = {
...
dataZoom: [
{
type: 'slider',
xAxisIndex: 0,
filterMode: 'none'
}
]
...
}
myChart.on('dataZoom', function (params) {
...
}
这种方法能够很好展示部分区间的数据,但是缺点也很明显,很难看到全局的数据,而且要重复的请求和监听,这对于大屏来说无疑不太合适
进行数据处理
正常显示如上图
考虑到折线图上的展示实际上看的是趋势和特别动荡的点,因此或许可以只保留那些‘极值点’即特征点
这样就想到了几个方案
比如用聚类算法将依据动荡程度数据分类然后取均值,但是不论是最简单的K-mean还是其他都需要事先确定分组或者初始值,这样就需要让数据经过两轮洗礼,开局加载就要等个10~20s,显然得不偿失
2.多项式拟合算法,拟合算法大多用来训练一个模型做预测作用,而且为了确定幂次数和让损差函数达到恰当小的值,开销可能更大,显得大材小用了
然后我就傻傻的把自己折磨了半天去测试这些,最后拍大腿一想,不是更应该用数据降维或者降采样处理吗
刚刚好echart里用附带的lttb算法
图形没有太大的改变,但是渲染速度快了很多,图里的锯齿信息对我们来说没有太多的必要,信息感觉可以在减少点,echart好像也没有提供对应的参数设置,因此在信息处理时加上了LTTB算法,10分钟为一个桶,(LTTD算法可以动态的计算桶数量,但是效果差距不大并且还增大了不小的开销)
lttba(array) {
// 数据形式[['00:00:00',123]]
const bucket = 600; // 每个桶点数量
const avgArray = [[...array[0], 0]]; // 储存均值的数组,第一个点以及坐标先存
const resAry = [array[0]]; // 最终数组
let left = 1;
let sum = 0;
// 计算每个桶均值
for (let i = 1; i<array.length; i++) {
sum += array[i][1];
// 每个桶均值和坐标点
if (i % bucket === 0) {
let avgT = Math.floor((left + i) / 2); // 中点坐标
avgArray.push([array[avgT][0], Math.round(sum / bucket), avgT]);
sum = 0;
left = i;
} else if (i === array.length - 1) {
// 最后一个点
sum -= array[i][1];
let avgT = Math.floor((left + i - 1) / 2); // 中点坐标
avgArray.push([array[avgT][0], Math.round(sum / bucket), avgT]);
avgArray.push([...array[i], i]);
}
}
// 找出每个桶的最大三角点
for (let i = 1; i<avgArray.length - 1; i++) {
const tleft = (i - 1) * bucket + 1;
const tright = tleft + bucket - 1;
resAry.push(
...this.lttbb(
array,
tleft,
tright > array.length - 1 ? (array.length - 1) : tright,
resAry[i - 1],
avgArray[i + 1]
)
);
}
resAry.push(avgArray[avgArray.length - 1]);
return resAry;
},
/** 最大三角桶
*@param array 原始数据数组
*@param left 左侧点
*@param right 右侧点
*@param avglast 上一个桶的点
*@param avgnext 下一个桶的均值点
*/
lttbb(array, left, right, avglast, avgnext) {
let max = -1;
let maxIndex = left;
for (let i = left; i < right; i++) {
if(!array[i])console.log(i)
// 计算三角形面积公式 x1 * y2 - x1 * y3 + x2 * y3 - y1 * x2 + x3 * y1 - x2 * y2
let s = avglast[2] * array[i][1] - avglast[2] * avgnext[1];
s += avgnext[1] * i - avglast[1] * i;
s += avgnext[2] * avglast[1] - array[i][1] * i;
s = Math.abs(s);
if (max < s) {
s = max;
maxIndex = i;
}
}
return [array[maxIndex]];
},
最后效果图
lttb的算法建议参考echart的lttb来写,这里是根据原理直接写的可能还有很多可优化
这又引发另一个问题,因为实际上这样抹除了很多店,导致了图基本已经不能触发echart的tooltip了
考虑下选择了x轴的指示标来作为替代品
xAxis: {
type: "category",
boundaryGap: false,
axisPointer:{
status:'show',
snap: false,
label:{
show:true,
fontSize:18,
margin:20,
formatter:(value={value:'00'})=>{
const s = value['value']
const s1 = (generalData.timeData3 as any)[s]
return `${s} 模拟数据:${s1}`
}
}
},
...
},
更多推荐
所有评论(0)