react项目之Echarts封装

react中封装Echarts组件三种写法

第一种：使用类组件

import React, { Component } from 'react';
import echarts from 'echarts';
import { Map } from 'immutable'

class Echart extends Component {
  myChart = null;

  resizeEcharts = () => {
    this.myChart && this.myChart.resize();
  };
  
  setEchartOptions = () => {
    this.myChart.setOption(this.props.options);
  };

  componentDidMount() {
    this.myChart = echarts.init(this.chartRef);
    window.addEventListener('resize', this.resizeEcharts);
  }

  componentDidUpdate(preProps){
    const isEqual = Map(this.props.options) === Map(preProps.options);
    if(!isEqual) {
      this.setEchartOptions();
    }
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.resizeEcharts);
    if (this.myChart) {
      this.myChart.dispose();
      this.myChart = null;
    }
  }

  render() {
    return <div ref={r => (this.chartRef = r)} className="default-charts" style={this.props.style} />;
  }
}
export default Echart;

第二种：使用函数组件(一)

import React, {
  useEffect,
  useRef,
  useState
} from 'react';
import echarts from 'echarts';

const Echart = props => {
  const { options, style } = props;
  const chartRef = useRef();
  const [myChart, setMyChart] = useState(null);

  const resizeEcharts = () => {
    myChart.resize();
  };

  useEffect(() => {
    setMyChart(echarts.init(chartRef.current));
  }, []);

  useEffect(() => {
    if (myChart) {
      window.addEventListener('resize', resizeEcharts);
      return () => {
        window.removeEventListener('resize', resizeEcharts);
        myChart.dispose();
        setMyChart(null);
      };
    }
  }, [myChart]);

  useEffect(() => {
    myChart && myChart.setOption(options);
  }, [myChart, options]);

  return <div ref={chartRef} className="default-charts" style={style} />;
};

export default Echart;

第二种：使用函数组件(二)

import React, {
  useEffect,
  useRef,
} from 'react';
import echarts from 'echarts';

const Echart = (props) => {
  const { options, style } = props;
  const chartRef = useRef();
  const myChart = useRef();
  const resizeEcharts = () => {
    myChart.current && myChart.current.resize();
  }

  useEffect(() => {
    myChart.current = echarts.init(chartRef.current);
    window.addEventListener('resize', resizeEcharts);
    return () => {
      window.removeEventListener('resize', resizeEcharts);
      if (myChart.current) {
        myChart.current.dispose();
      }
    };
  },[]);
  
  useEffect(() => {
    myChart.current && myChart.current.setOption(options);
  }, [myChart, options]);

  return <div ref={chartRef} className='default-charts' style={style} />;
}

export default Echart;