echarts+定时器实现模拟数据刷新

发布时间:2024年01月05日

需求是echarts折柱图x,y轴保持不变,数据定时刷新,模拟出定时获取数据的感觉,但是直接设置setoption和将结构体放入state都会导致x,y轴也刷新,后来解决了,不多说,上代码(使用react)

  constructor(props) {
    super(props);
    this.echarts1 = React.createRef()
    this.echarts2 = React.createRef()
    this.timer = ''
  }
getOption = (data,area) => {
    let cylinderChart;
    //此处控制两个echarts图表,如果控制一个无需判断
    switch(area){
      case '1': cylinderChart = echarts.init(this.echarts1.current); break;
      default: cylinderChart = echarts.init(this.echarts2.current); break;
    }
   
    let option = {
     //此处省略,复制自己的配置项进来,下面的需复制进去
     animation: true,
      animationDuration: 1500,
      animationEasing: 'exponentialOut',
      animationDurationUpdate: 1500,
      animationEasingUpdate: 'cubicOut',
    }
    cylinderChart.clear();
    option && cylinderChart.setOption(option);
    //赋值是为了清除定时器,如果设置不同刷新时间可以判断分开赋值
    this.timer = option.timeTicket = setInterval(() => {
      cylinderChart.clear();
      option && cylinderChart.setOption(option);
    }, 5000);
  }
//需要调用函数地方
()=>{this.getOption(data,1)]
()=>{this.getOption(data,2)]
//清除定时器
  componentWillUnmount(){
    clearInterval(this.timer)
  }

结构体

<div ref={this.echarts1} ></div>
<div ref={this.echarts2} ></div>

效果就是5秒后,echarts的x,y轴不刷新,数据会模拟重新获取,并重新生成。

文章来源:https://blog.csdn.net/qq_36384745/article/details/135408764
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。