###点击图表的时候,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里
摇曳的蔷薇
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);就行了
添加回答
举报
0/150
提交
取消