TypeScript + React Hooks 封装通用图表（Echarts）组件

在 React Hooks 日常开发中可能会遇到多个Echarts数据图表需求，为了便于复用和管理，开发一个通用型公共图表组件是非常有必要的。

首先定义用于图表的类型文件IChart.ts：

import  {  CSSProperties } from 'react';
import * as echarts from 'echarts/core';

import {
    // 系列类型的定义后缀都为 SeriesOption
    BarSeriesOption,
    LineSeriesOption
} from 'echarts/charts';
import {
    TitleComponentOption,
    TooltipComponentOption,
    GridComponentOption,
    DatasetComponentOption,
} from 'echarts/components';

// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
export type IECOption = echarts.ComposeOption<
  | BarSeriesOption
  | LineSeriesOption
  | TitleComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | DatasetComponentOption
>;

export interface IOnEvents{
    [index: string]: (param: unknown, instance: echarts.ECharts) => void;
}
type RendererType = 'canvas' | 'svg';
interface IEChartsInitOpts {
    readonly locale?: string ;
    readonly renderer?: RendererType;
    readonly devicePixelRatio?: number;
    readonly useDirtyRect?: boolean;
    readonly useCoarsePointer?: boolean;
    readonly pointerSize?: number;
    readonly ssr?: boolean;
    readonly width?: number | string;
    readonly height?: number | string;
}

export interface IChartProps  {
    readonly option: IECOption;

    readonly loading?: boolean;
    readonly onEvents?: IOnEvents;
    readonly onChartReady?:  (echartsInstance: echarts.ECharts) => void;
    readonly style?: CSSProperties;
    readonly className?: string;

    readonly theme?: string | object;
    readonly opts?: IEChartsInitOpts;
}

IChartProps为Chart组件的入参。

接下来实现图表组件：
elementResizeDetectorMaker是用于根据父元素变化然后动态调整图表大小的功能。
注意echarts.use图表组件注册部分是要按需引入/注册。
props 为一些比较常用的图表配置。
Chart.tsx

import React, { useEffect, useRef, useCallback } from 'react';
import * as echarts from 'echarts/core';
import elementResizeDetectorMaker from 'element-resize-detector';
import {
    BarChart,
    PieChart,
    LineChart,
} from 'echarts/charts';
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    // 数据集组件
    DatasetComponent,
    LegendComponent,
    // 内置数据转换器组件 (filter, sort)
    TransformComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { IChartProps } from './IChart';

// 注册必须的组件
echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    BarChart,
    LegendComponent,
    PieChart,
    LineChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer
]);
const bindEvents: (instance: echarts.ECharts, events: IChartProps['onEvents']) => void = (instance, events) => {
    for (const eventName in events) {
        if (Object.prototype.hasOwnProperty.call(events, eventName)) {
            const func = events[eventName];
            instance.on(eventName, (param) => {
                func(param, instance);
            });
        }
    }
};

const Chart: React.FC<IChartProps> = (props) => {

    const option = props.option;
    const loading = props.loading;
    const onEvents = props.onEvents;
    const onChartReady = props.onChartReady;
    const style = props.style;
    const theme = props.theme;
    const opts = props.opts;

    const tableSelectRef = useRef<HTMLDivElement>();

    const getEchartsInstance: () => echarts.ECharts = () => {
        return echarts.getInstanceByDom(tableSelectRef.current!)!;
    };

    const dispose: () => void = () => {
        if (tableSelectRef.current) {
            echarts.dispose(tableSelectRef.current);
        }
    };
    const newChart: () => Promise<void> = useCallback(async () => {
        return new Promise((resolve, reject) => {
            try {
                const myChart = echarts.init(tableSelectRef.current!, theme, opts);
                myChart.on('finished', () => {
                    resolve();
                });
            }
            catch (error) {
                reject(error);
            }

        });
    }, [opts, theme]);

    useEffect(() => {
        dispose();

        newChart().then(() => {
            // 'finished'
            const myChart = getEchartsInstance();
            bindEvents(myChart, onEvents);
            onChartReady?.(myChart);
            myChart.clear();
            myChart.setOption(option, true);
            const erd = elementResizeDetectorMaker();
            if (tableSelectRef.current) {
                erd.listenTo(tableSelectRef.current, () => {
                    // 父元素大小resize
                    myChart.resize({
                        width: 'auto',
                        height: 'auto',
                    });
                });
            }
        }).catch(err => {
            console.log(err);
            dispose();
        });

        return () => {
            dispose();
        };
        //option改变不进行重渲染
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [theme, opts, newChart, onEvents, onChartReady]);

    useEffect(() => { // option 改变
        getEchartsInstance().clear();
        getEchartsInstance().setOption(option, true);
    }, [option]);

    useEffect(() => { // loading 改变
        if (loading) {
            getEchartsInstance().showLoading();
        }
        else {
            getEchartsInstance().hideLoading();
        }
    }, [loading]);

    return (
        <div
            className={`echarts ${props.className ?? ''}`}
            style={{ height: '300px', ...style }}
            ref={(node) => {
                tableSelectRef.current = node!;
            }}
        >
        </div>

    );

};
export default Chart;

第一个useEffect是创建图表的实例的init完成后（finished），才加入配置项，并执行bindEvents绑定对应的常用官方事件，最后在useEffect的return中及时销毁当前图表。

注意第一个useEffect最后的依赖数组中有加上了// eslint-disable-next-line react-hooks/exhaustive-deps， 表明故意忽略了option变动的eslint提示，因为这里是第一次的图表实例初始化，并不需要每次上层的option变动都要重新执行，所以option变动重新在第二个useEffect中再次setOption就行。

使用例子：
传入option配置项，当后续option中再次变动时触发Chart组件重新更新。
CostRateRatio.tsx

import React, { useState, useMemo, useCallback, useEffect } from 'react';
import { Card } from 'antd';
import Chart from '@/basic/Chart';
import { IECOption } from '@/basic/Chart/IChart';
import * as api from '@/api';

interface IProps {
    queryParams: any;
}

const CostRateRatio: React.FC<IProps> = props => {

    const [data, setData] = useState<any>({
        'current': []
    });
    const [loading, setLoading] = useState(false);

    const fetchLineChart = useCallback(async () => {

        try {
            setLoading(true);
            const res = await api.getLineChart(props.queryParams);
            setData(res.data);
        }
        catch (error) {
            console.error(error);
        }
        finally {
            setLoading(false);
        }
    }, [props.queryParams]);

    useEffect(() => {
        fetchLineChart().catch(console.error);

    }, [fetchLineChart]);

    const option = useMemo(() => {
        return {
            title: { text: '折线图' },
            tooltip: { trigger: 'axis' },
            xAxis: {
                type: 'category',
                axisPointer: {
                    show: true,
                }
            },
            legend: {
                type: 'scroll',
                bottom: 0
            },
            yAxis: {
                type: 'value'
            },
            dataset: [{
                dimensions: ['abscissa', 'tariff', 'advertisingCost', 'storageCost', 'refund'],
                source: data.current
            },
            {
                dimensions: ['abscissa',   'tariff', 'advertisingCost',  'storageCost', 'refund'],
                source: data.contrastive
            }],
            series: [
                {
                    name: '推广费',
                    type: 'line',
                },
                {
                    name: 'test',
                    type: 'line',
                },
                {
                    name: 'abc费',
                    type: 'line',
                },
                {
                    name: '退货费',
                    type: 'line',
                },
            ]
        };
    }, [data]);

    return (
        <div style={{ width: '50%' }}>
            <Card size="small">
                <Chart
                    option={option as IECOption}
                    loading={loading}
                    style={{ height: 300, width: '100%' }}
                >
                </Chart>
            </Card>
        </div>
    );
};
export default CostRateRatio;