封裝react的echarts組件（根據窗口或者父級容器的變化自適應圖表大小）

 

echarts 組件：

import React, { Component } from 'react';
import echart from 'echarts';
import { Consumer } from "@/layouts/components/default_layout/default_layout"; // 引入父組件的Consumer容器


class Bar extends Component {
    constructor(props) {
        super(props);

        this.chartRef = React.createRef();
    }

    chartRef;
    chart;

    componentDidUpdate() {
　　　　　// 數據更新時，重繪圖表
        this.init()
    }

    componentDidMount() {
        this.init()
    }
    init() {
        // 基於准備好的dom，初始化echart實例
        this.chart = echart.init(this.chartRef.current);

        // 繪制圖表
        this.chart.setOption({
            // title: {
            //     text: 'echart 入門示例'
            // },
            grid: {
                top: 55,
                bottom: 58,
                left: 124,
                right: 46
            },
            tooltip: {},
            xAxis: {
                axisLine: {
                    lineStyle: {
                        color: '#E8E9F6'
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    color: '#383874',
                    margin: 15,
                    fontSize: 14
                },
                data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
            },
            yAxis: {
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#E8E9F6'
                    }
                },
                axisLabel: {
                    color: '#383874',
                    margin: 20,
                    fontSize: 14
                },
            },
            series: [{
                name: '銷量',
                type: 'bar',
                barWidth: 20,
                itemStyle: {
                    color: '#0087FF',
                    barBorderRadius: [10, 10, 0, 0],
                },
                data: [5, 20, 36, 10, 10, 20]
            }]
        });

　　　　　// 這里是為了讓echarts圖表隨着瀏覽器的可視區域變化自適應 參照圖3，圖4的區別（在不刷新頁面的情況下）
        window.addEventListener("resize", () => {
            let p_width = document.body.clientWidth - this.lastWidth;
            this.chart.resize({ width: p_width });
        });
    }

    resize() {
        let p_width = document.body.clientWidth - this.lastWidth;
        if (this.chart) this.chart.resize({ width: p_width });
    }


    lastWidth;
    render() {
        return (<Consumer>
            {(obj) => {
　　　　　　　　　　// 下面三行代碼是為了實現下圖1、2的效果，在二級菜單收起展開時，讓echarts隨着父級的寬度變化自適應（在不刷新頁面的情況下）
                let p_width = document.body.clientWidth;
                this.lastWidth = obj.width;
                obj.onChange(this.resize.bind(this));
                return <div ref={this.chartRef} style={{ width: `calc(${p_width}px - ${obj.width}px)`, height: '100%' }}></div>
            }}
        </Consumer>)
    }
}

export default Bar;

父組件：

import React, { Component } from 'react';
import { connect } from 'dva';
import Bar from '../components/bar';

class Index extends Component {
    render() {
        return (<Bar  />)
    }
}

export default connect()(Index);

default_layout:(涉及到context的應用<Provider和Consumer>)

import React from 'react';
import { connect } from 'dva';

const width = document.body.clientWidth - 80;
export const { Provider, Consumer } = React.createContext({
    width: width
});

class BasicLayout extends React.Component {

    constructor(props) {

        super(props);

        this.state = {

            collapsed: false

        }

　　}

 

　　onCollapse(collapsed) {

        this.setState({

            collapsed: collapsed

        }, () => {

            this.fn()

        })

    }

    fn = () => { }

　　
  render() {
　　　　return (<>

　　　　　　<Menu collapsed={this.state.collapsed} onCollapse={this.onCollapse.bind(this)} />

　　　　　　<Provider value={{
　　　　　　　　width: (this.state.collapsed ? 250 : 100) + 80,
　　　　　　　　onChange: (fn) => this.fn = fn
　　　　　　}}>
　　　　　　 　　<div className={styles.content_inner}>
 　　　　　　　　　　{this.props.children}
　　　　　　 　　</div>
　　　　　　</Provider>
　　　　</>)
　　}  
}

 
          
 
          
            export default connect()(<BasicLayout />); 
           
         

 

圖1：

 

 圖2：

圖3：（瀏覽器窗口最大化）

 

圖4：（瀏覽器窗口縮小后）