ECharts动态更新数据与dataZoom的问题

2023-03-17 01:42| 来源: 网络整理| 查看: 265

需求

在前端定时获取数据并动态展示在图表中，可以鼠标拖动查看不同时间段的数据。

实现方法

实时更新数据方法就是每次调用接口获取数据成功后，将数据push到存放数据的数组中，然后调用ECharts的setOption方法重新绘制即可，鼠标拖动查看使用dataZoom即可。

问题dataZoom重置

在用户使用dataZoom组件查看数据时，数据进行了更新并调用了setOption重绘，这时dataZoom被重置为初始状态。我们希望在dataZoom选择的位置不会因为数据更新而改变，产生跳动的情况。

dataZoom中使用start和end标记数据窗口的显示范围，在用户操作后，记录下当前的start和end值，在下次数据刷新时使用，就能使窗口位置保持不变。

this.myChart.on('dataZoom', (event) => { this.dataZoom.end = event.end this.dataZoom.start = event.start }) 动态刷新后x，y轴数据不对应

平滑曲线下

折线图

解决方法：

在setOption中设置animation: false 关闭动画

在dataZoom中设置filterMode: 'empty'

前端 ECharts ECharts

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！

前端面试题整理上一篇解析Corn表达式下一篇

【本文地址】

今日新闻