0

echarts 线图动态增加数据同时更新x轴min和max,datazoom后无法自动follow数据,需要手动拖动一次。

问题描述有些复杂,代码也很长。

我贴个在线可编辑的 Demo:https://gallery.echartsjs.com...

需求:

  • 需要用 xAxis 的 min 和 max 来实现线图前后的空白区域,空白区域前后均需要是现有数据的几倍
  • 同时需要用 dataZoom 来实现放大和缩小(目的在于显示还没有数据的,由 min 和 max 生出的空白区域)
  • 同时首屏数据需要显示已有数据和一部分空白区域(依靠 dataZoom.startValue 和 dataZoom.endValue )
  • 同时需要实现动态增加数据(依靠 data.push )
  • 同时需要当前页数据 follow 新数据(依靠增加 xAxis 的 min 和 max 的值)

最后一个没有正常实现。
现在的现象是首屏数据不不能跟随新数据滚动。但是如果用鼠标拖动一下,或者鼠标缩放一下,图表就会跟随新数据滚动了。

请问有什么办法让首屏数据就实现跟随新数据?

注释:回答的话最好也给个 Demo ,echarts 官网的那个 demo 编辑很方便的。请不要完全不根据问题瞎回答,很浪费时间好么。

2019-08-26 提问
2 个回答
2

dataZoom 里面加入 start: 0

(可以去掉 下方的 option.dataZoom.startValue = first - 15 *1000;option.dataZoom.endValue = last + 15 *1000; 这两行代码, 因为加上了以后数据表移的比较慢~ )

原因是因为 start 会覆盖 你写的 startValue,如下图:

clipboard.png

0
option.dataZoom.endValue = last + 15 *1000;
option.dataZoom.startValue = first - 15 *1000;

这两句没有放到循环里面

撰写答案

推广链接