动态Echarts横轴坐标不移动问题与解决

Echarts横轴坐标不移动问题与解决。Echarts是一个开源的图表库,使用非常方便。关于官网上动态折线图的demo很模糊。实际开发中遇到了数据越来越多导致横轴挤压的问题,如下图。

动态Echarts横轴坐标不移动问题

具体描述:

新数据进来时被push到Series中,Echarts渲染输出。但是最左侧的数据一直停留在坐标原点的位置,数据越来越多,便会挤压在一起。

希望的效果是横轴能够向左移动,最左侧的数据在新数据进入时自行消失。

问题解决:

最开始的时候以为是echarts没有正确配置,导致echarts没有根据setOption的数据正确渲染呢。后来反复看了echarts的开发文档也没有找到相关配置。

为了节省时间,不再看开发文档了。每次有新数据需要push的时候,push后执行一次shift(),将数据中第一个元素删除。这样保障Series中的元素个数永远是10个或15个(具体看自己想同一时间展示多少组数据)。

先做下笔记,后期如果确实echarts有相关参数配置的时候再进行修改。

Echarts模拟数据代码片段:

  1. //随机数字
  2.     function randomData(){
  3.         return Math.random().toFixed(2);
  4.     }
  5.     window.setInterval(function () {
  6.         var date = new Date();
  7.         iniTs.push(parseTimeStamps(date.getTime()));
  8.         iniTs.shift();
  9.         iniSl.push(randomData());
  10.         iniSl.shift();
  11.         iniMo.push(randomData());
  12.         iniMo.shift();
  13.         iniSe.push(randomData());
  14.         iniSe.shift();
  15.         dmChart.setOption({
  16.             xAxis:[{
  17.                 data:iniTs
  18.             }],
  19.             series:[{data:iniSl},{data:iniMo},{data:iniSe}]
  20.         });
  21.     },1000);

其中用到parseTimeStamps()函数可参考上一篇笔记《JS生成当前日期前递减时间及13位时间戳转换》。

 

波波
你想把广告放到这里吗?

发表评论

您必须 登录 才能发表留言!