react项目中，使用antd封装echarts公共组件

      使用react开发项目，由于业务需求，发现很多数据展示需要使用echarts进行绘制，如果每次都在页面中实例、加载以及同步更新数据，会发现代码比较冗余，每次代码的工作量都比较大，那么是否能使用更简单的方式去实现绘制echarts图标呢？
      那么这里我们就可以使用react组件化的思想，封装echarts公共组件，使组件能够复用。什么是组件化？组件化并不是前端所特有的，其他语言都有组件化的先例。组件化设计就是为了增加代码的复用性，灵活性，提高系统设计，进而提高开发效率。下面就直接上代码，介绍如何封装echarts公共组件：

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

class ChartComponent extends Component {
    state = {};

    chart = null;

    componentDidMount() {
        const { chartId, option } = this.props;   //继承父级传递的值
        const chartIdDiv = document.getElementById(chartId);   
        if (chartIdDiv) {
            this.chart = echarts.init(chartIdDiv);  //实例化echats画布
            if (this.chart) {
                this.renderChart(this.chart, option);  //加载数据
            }
        }
        window.addEventListener('resize', this.handleResize, false);  //监听改变画布大小
    }

    /**
     * @description: 根据父级传递的值，是否更新画布
     * @param {type} 
     * @return {type} 
     */
    componentDidUpdate(prevProps) {
        const { option } = this.props;
        if (prevProps.option !== option && this.chart) {
            this.renderChart(this.chart, option);
        }
    }

    /**
     * @description: 注销时，去除监听事件以及销毁echats
     * @param {type} 
     * @return {type} 
     */
    componentWillUnmount() {
        window.removeEventListener('resize', this.handleResize, false);
        if (this.chart) {
            this.chart.dispose();
            this.chart = null;
        }
    }

    //  放大缩小重新布局
    handleResize = () => {
        if (this.chart) {
            setTimeout(() => {
                this.chart.resize();
            });
        }
    };
    // 图表配置及渲染
    renderChart = (chart, option) => {
        const { handleClick } = this.props;
        chart.clear();
        chart.setOption(option);
        chart.off('click'); // 要是不加上这行，事件会重复n次
        chart.on('click', params => {
            if (handleClick) {
                handleClick(params);
            }
        });
    };

    render() {
        const { chartId } = this.props;
        return <div id={chartId} style={{ width: '100%', height: '100%' }} />;
    }
}

export default ChartComponent;

      ectarts公共组件开发完成，在页面中引入该组件，传值即可，如下示例：

import React, { Component } from 'react';
import ChartComponent from './ChartComponent '
class Demo extends Component {
constructor(props) {
        super(props);
        this.state = {
        	option:[xxx]      ,//option为echarts中的option，  chart.setOption(option);
        }
    }
	render() {
		const{option}=this.state;
		return(
			<>
			    <ChartComponent chartId="signalDataChart" option={option} />
			</>
		)
	}
}
export default Demo;

以上就是对echarts公共组件的封装及使用介绍。

本文地址：https://blog.csdn.net/qq_36727756/article/details/109245180