react 中 echarts-for-react 数值改变重新渲染

import * as React from 'react'
import ReactEcharts from 'echarts-for-react'
export interface IProps {
   
}

interface IState {
    flag: boolean
    
}

class SummaryStatistics extends React.Component<IProps, IState> {
    echartsReact: any = undefined
    constructor(props: IProps) {
        super(props)
        this.state = {
            flag: true
          
        }
        this.echartsReact = React.createRef()
    }
    
    getOption () {
        return {
           
            color: ['#0095ff', '#33e0e0', '#4bc772', '#fcd132', '#ff607a'],
            tooltip: {
               trigger: 'item',
                formatter: '{b} : {c} ({d}%)'
            },
           
            legend: {
                orient: 'horizontal',
                bottom: 0,
                itemWidth: 15,
                itemHeight: 10
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '0',
                top: '3%',
                containLabel: true
            },
            // 圆中心的数字
            graphic: {
                elements: [
                    {
                        type: 'text',
                        left: 'center',
                        top: '46%',
                        z: 2,
                        zlevel: 100,
                        style: {
                            text: '120',
                            fill: '#1890ff',
                             100,
                            height: 30,
                            font: 'bolder 28px Microsoft YaHei'
                        }
                       
                    }
                ]
               
            },
             // 圆中心的数字
            // title: {
            //     text: '总考生数',
            //     left: 'center',
            //     top: '45%',
            //     textStyle: {
            //       color: '#031f2d',
            //       fontSize: 20,
            //       align: 'center'
            //     }
            //   },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    center: ['50%', '50%'],
                    legendHoverLink: false,
                    data: [
                        { value: 32, name: '水库' },
                        { value: 42, name: '河道断面' },
                        { value: 32, name: '水文测站' },
                        { value: 32, name: '灌区' },
                        { value: 32, name: '水土保持工程' }
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 0,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                   
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '16',
                                fontWeight: 'bold'
                            }
                        }
                    },
                }
            ]
        }
    }

     
      onChartover() {  
          // 当鼠标移到扇形图上数字清空
          this.echartsReact.props.option.graphic.elements[0].style.text = ''

      this.echartsReact.getEchartsInstance().setOption(this.echartsReact.props.option)
          console.log(this.echartsReact.getEchartsInstance())
     
    }
    onChartout () {
          // 当鼠标移到扇形图上数字出现
        this.echartsReact.props.option.graphic.elements[0].style.text = '120'
        this.echartsReact.getEchartsInstance().setOption(this.echartsReact.props.option) // 重新渲染
       
    }
  
    render() {
       
        const onEvents = {
            'mouseover': this.onChartover.bind(this),
            'mouseout': this.onChartout.bind(this)
        }
       
        return (
            <React.Fragment> 
                    <ReactEcharts ref={(e) => { this.echartsReact = e }}
                        option={this.getOption()}   
                        onEvents={onEvents}
                                       
                        style={{ '100%', height: '253px'}}
                    />
            </React.Fragment>
            
        )
    }

}

export default SummaryStatistics