前言

这是记录一下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}

echarts 折线图随时间动态添加（能跳动）相关推荐

百度Echarts折线图tooltip里数据添加单位
option = {title: {text: '折线图堆叠'},tooltip: {trigger: 'axis',//在这里设置formatter: '{a0}:{c0}万'},legend: { ...
Echarts给折线图给横竖坐标轴添加箭头与标签文字过长显示不全处理
本人在做监控数据大屏时曾踩过不少坑,现将踩坑经验总结如下,数据大屏demo请点击这里一.饼图处理标签文字过长而显示不全的解决方案在使用echarts的过程中,有时会遇到标签文字过长导致显示不全的问 ...
echarts折线图动态多条线
echarts折线图配置项由于工作中遇到的图表特别多,每次用过配置项总是想不起来,在这里记录一下,希望也可以帮到路过的你.话不多说我们上图: 左边的是设计稿,右边的是echarts的示例图,我们先找 ...
echarts折线图动态修改折线颜色
需求选择每条线的颜色.粗细绘制折线图. 解决动态修改option中对应的样式属性即可.查看echarts官方文档,进行了如下修改. 修改一(明显有问题可跳过,仅做记录.) 效果一: 配置一: op ...
Echarts折线图的平移假动画
Echarts折线图的平移假动画 #可视化项目中经常用图表的方式来展示数据,折线图是经常出现的,但是在echarts折线图中正常情况是通过删除数据的第一个,添加一个新数据在数组的末尾来实现动画,此动画 ...
Echarts 折线图完全配置指南 - 手把手教你设置 Echarts 折线图详细教程
本文首发:<Echarts 折线图完全配置指南> Echarts 折线图是图表中最常用的显示形式之一.使用 Echarts 做出基本的折线图很简单,但要是想把多组数据放在一张图表中,展示的 ...
e-charts折线图自适应外层div大小
问题描述: 在tabs页签下使用e-charts折线图,切换tab页签e-charts折线图无法自适应外层div大小: 解决方案: 添加监听器监听浏览窗口变化,两种监听方法 window.addEve ...
echarts折线图堆叠怎么设置_ECharts折线图堆叠设置为不堆叠的方法
下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...
echarts折线图实线与虚线拼接及提示框浮层内容格式的设置
echarts折线图实线与虚线拼接及提示框浮层内容格式的设置想要实现实线与虚线的结合,后端返回的数据是动态的,根据状态的不同展示实线与虚线. 例子1: 数据是固定的 series: [{name:' ...

echarts 折线图随时间动态添加（能跳动）

文章目录

前言

具体代码

echarts 折线图随时间动态添加（能跳动）相关推荐

最新文章

热门文章