react Echart 自适应问题

import * as React from 'react'
// import Echarts from 'echarts'
import ReactEcharts from 'echarts-for-react'  //用这个插件解决

let echartsOption = {} // 配置项
export interface IProps {

}

interface IState {
    myEchart?: any
    
}

class SummaryStatistics extends React.Component<IProps, IState> {
    echartRef: any = undefined
    constructor(props: IProps) {
        super(props)
        this.state = {
            myEchart: null,
           
        }
        this.echartRef = React.createRef()
    }
    componentDidMount() {
       // this.initEchart()
       echartsOption = {

        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        grid: {
            left: '0',
            right: '0%',
            top: '1%',
            containLabel: true
        },
        // legend: {
        //     orient: 'vertical',
        //     left: 'left',
        //     data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        // },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: ['50%', '70%'],
                center: ['50%', '50%'],
                data: [
                    { value: 32, name: '水库' },
                    { value: 42, name: '河道断面' },
                    { value: 32, name: '水文测站' },
                    { value: 32, name: '灌区' },
                    { value: 32, name: '水土保存工程' }
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
        
    }
    // 获取Echart图宽高
    getEchartWidth = () => {
        this.echartRef.current.style.width = this.echartRef.current.offsetWidth
        this.echartRef.current.style.height = this.echartRef.current.offsetHeight     
           this.resized()      
    }
    // initEchart = () => {
    //     // window.addEventListener('resize', () => {
    //     //     myEchart.resize()
    //     // })
    //     const option = {

    //         tooltip: {
    //             trigger: 'item',
    //             formatter: '{a} <br/>{b} : {c} ({d}%)'
    //         },
    //         grid: {
    //             left: '0',
    //             right: '0%',
    //             top: '1%',
    //             containLabel: true
    //         },
    //         // legend: {
    //         //     orient: 'vertical',
    //         //     left: 'left',
    //         //     data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    //         // },
    //         series: [
    //             {
    //                 name: '访问来源',
    //                 type: 'pie',
    //                 radius: '60%',
    //                 center: ['50%', '50%'],
    //                 data: [
    //                     { value: 32, name: '水库' },
    //                     { value: 42, name: '河道断面' },
    //                     { value: 32, name: '水文测站' },
    //                     { value: 32, name: '灌区' },
    //                     { value: 32, name: '水土保存工程' }
    //                 ],
    //                 itemStyle: {
    //                     emphasis: {
    //                         shadowBlur: 10,
    //                         shadowOffsetX: 0,
    //                         shadowColor: 'rgba(0, 0, 0, 0.5)'
    //                     }
    //                 }
    //             }
    //         ]
    //     }
       
    //     // const myEchart = Echarts.init(document.getElementById('echarts-pie'))
    //     // myEchart.setOption(option)

    // //    this.setState({ 
    // //        myEchart,
    // //        option
    // //     })
     
    // }
    componentDidUpdate() {
    //    setTimeout(() => {
    //         this.getEchartWidth()
    //     }, 200)
    }
    resized = () => {  
        const { myEchart } = this.state
         myEchart.resize()
    }
    render() {
        return (
            <React.Fragment> 
                    {/* <div ref={this.echartRef} id='echarts-pie' style={{ height: '238px' }} /> */}
                    <ReactEcharts
                        option={echartsOption}
                        theme='clear'
                        style={{ '100%', height: '238px'}}
                    />
            </React.Fragment>
            
        )
    }

}

export default SummaryStatistics