解决echarts echarts数据动态更新和dataZoom被重置问题

1.全局绑定滚轮事件，获得dataZoom最新的位置：

myChart.on('dataZoom',function(event){
   if(event.batch){
   start=event.batch[0].start;
   end=event.batch[0].end;
   }else{
   start=event.start;
   end=event.end;
   };
});

2.把最新的start和end赋值给要更新的option

window.setInterval(function () {
  num=Math.random()*num+100;
 data0.splice(0,1);
 data0.push(num);
 
 option.dataZoom[0].start=start;
 option.dataZoom[0].end=end;
 myChart.setOption(option);  
},3000);

3.echart数据增量刷新还可以用appendData

补充知识：echarts动态添加数据

我就废话不多说了，大家还是直接看代码吧~

  * {
    margin: 0;
    padding: 0;
    list-style: none;
  }

补充

主动使用echarts的resize方法改变图表大小：

(opts?: {
  width?: number|string,
  height?: number|string,
  silent?: boolean
})

当在参数中填入宽高，this.echarts.resize({width:300})，dom层必须有一个初始化像素的宽高，百分比的宽高该方法不会生效。

以上这篇解决echarts echarts数据动态更新和dataZoom被重置问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。