react Echart 自适应问题

素颜马尾好姑娘i 2021-11-02 02:08 586阅读 0赞

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={
         {width: '100%', height: '238px'}}
                        />
                </React.Fragment>
                
            )
        }
    
    }
    
    export default SummaryStatistics

转载于:https://www.cnblogs.com/whlBooK/p/11171688.html