大佬们遇到过这个问题吗？echarts-for-react中数据发生变化，如何让图表实时更新。十分感谢

Question

###点击图表的时候，data数据发生了变化，图表不能实时刷新？
importReactfrom'react';
import{Card}from'antd';
importReactEchartsCorefrom'echarts-for-react/lib/core';
importechartsfrom'echarts/lib/echarts';
import'echarts/lib/chart/pie';
echarts.registerTheme('myTheme',{
backgroundColor:'rgb(15,55,95)'
});
exportdefaultclassBarextendsReact.Component{
constructor(props){
super(props);
this.state={
loadingChart:true,
data:[
{value:500,name:'Android'},
{value:200,name:'IOS'},
{value:360,name:'PC'},
{value:100,name:'Ohter'}
]
}
}
onChartClick=()=>{
constdata=this.state.data;
data.push({
value:Math.random()*100,
name:'Other'+Math.random()
});
this.setState({
data
});
}
onChartLegendselectchanged=()=>{
console.log(2)
}
//方法必须放在上面，不然找不到对应的方法
onEvents={
'click':this.onChartClick,
'legendselectchanged':this.onChartLegendselectchanged
}
//获取配置
getOption=()=>{
constoption={
title:{
text:'ECharts数据统计'
},
lengend:{},
series:[{
name:'访问量',
type:'pie',
radius:'60%',
data:this.state.data
}]
};
returnoption;
}
//chartsloadReady后的回调模拟回调
onChartReadyCallback=()=>{
setTimeout(()=>{
this.setState({
loadingChart:false
});
},2000);
}
render(){
return(
{JSON.stringify(this.state.data)}
echarts={echarts}
style={{height:'500px'}}
className='noneClass'
theme='light'
onChartReady={this.onChartReadyCallback}
option={this.getOption()}
showLoading={this.state.loadingChart}
onEvents={this.onEvents}
lazyUpdate={(this.getOption(),false)}
>
)
}
}

Answer 1

data变了，但是echarts里的option没有重新计算，所以需要重新调用this.getOption()来计算新的数据，可以把getOption()放在render里

Answer 2

需要用到echarts的setOption我是用函数组件写的{refs.echartsReact=e;}}className="graph"option={options}notMerge={false}lazyUpdate={true}style={style||{height:'484px',width:'685px'}}/>每当有新数据过来，直接refs.echartsReact.getEchartsInstance().setOption(options);就行了