前言
这是记录一下echarts的特殊的使用方法。需求是用户需要看到每次数据的更新,且x轴也是根据用户的选择显示
数据是使用websocket去获取的,因为数据是两秒一次的返回,但是点的增加是根据用户的选择来增加的,如五秒一增加、十五秒一增加。
具体代码
这是判断是否需要增加点,意思是x轴增加数据
/*
perviousTime用户打开的时间段;
currentTime现在跳动的时间段;
oSen是当前时间的秒;
op是图表的数据
*/
let op = this.myChart.series;
// 如果用户打开的时间段和现在的时间段相等就原点跳动,反之则正常跳动
/* 原理是如果用户打开是1秒(即oSen是1),要求是5秒一跳动(意味着逢五进一);
无论是用户打开的还是现在的都设为5是终点(也就是初始值currentTime = perviousTime ),意思是到第五秒才增加;
现在的是oSen是3,则5为终点(currentTime),则this.perviousTime == this.currentTime为true,原点跳动;
如果现在时间是7,则10为终点(currentTime),则this.perviousTime == this.currentTime为false,正常跳动,且currentTime = perviousTime;
同理,如果是9,原点跳动,如果是13,正常跳动。。。
*/
if (perviousTime == currentTime && oSen < 60) {
op.map(j => {
// 这是有多条线;原点跳动
let t = j.xData[j.xData.length - 1] // x轴不变
let v = 11 // 这是y轴数据
j.removePoint(-1) // 这是删除线上的最后一个点
j.addPoint([t, v], true)
})
} else {
console.log('zeng')
op.map(j => {
// 这是有多条线;x轴增加
let t = i.ts // 新的x的点
let v = 22 // y轴数据
j.addPoint([t, v], true)
})
perviousTime = currentTime
}