react 图表库 滚动_echarts-for-react中数据发生变化，如何让图表实时更新。

### 点击图表的时候，data数据发生了变化，图表不能实时刷新？

import React from 'react';

import { Card } from 'antd';

import ReactEchartsCore from 'echarts-for-react/lib/core';

import echarts from 'echarts/lib/echarts';

import 'echarts/lib/chart/pie';

echarts.registerTheme('myTheme',{

backgroundColor: 'rgb(15,55,95)'

});

export default class Bar extends React.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=()=>{

const data=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=()=>{

const option = {

title:{

text:'ECharts 数据统计'

},

lengend:{},

series:[{

name:'访问量',

type:'pie',

radius:'60%',

data:this.state.data

}]

};

return option;

}

// charts loadReady后的回调 模拟回调

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)}

>

)

}

}