为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

沧海一幻觉 2019-06-16 08:11:21
###点击图表的时候,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)})}}
查看完整描述

2 回答

?
米脂

TA贡献1836条经验 获得超3个赞

data变了,但是echarts里的option没有重新计算,所以需要重新调用this.getOption()来计算新的数据,可以把getOption()放在render里
                            
查看完整回答
反对 回复 2019-06-16
?
摇曳的蔷薇

TA贡献1793条经验 获得超6个赞

需要用到echarts的setOption我是用函数组件写的
ref={(e)=>{refs.echartsReact=e;}}
className="graph"
option={options}
notMerge={false}
lazyUpdate={true}
style={style||{height:'484px',width:'685px'}}
/>
每当有新数据过来,直接refs.echartsReact.getEchartsInstance().setOption(options);就行了
                            
查看完整回答
反对 回复 2019-06-16
  • 2 回答
  • 0 关注
  • 2263 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信