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