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

需求是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轴不刷新，数据会模拟重新获取，并重新生成。