import React, { memo, useMemo } from 'react'; import { ConfigProvider } from 'antd'; import classNames from 'classnames'; import ReactEcharts from 'echarts-for-react'; import { omit } from 'lodash'; import buildOption from './utils'; const ECharts = memo( React.forwardRef((props, ref) => { const { getPrefixCls } = React.useContext(ConfigProvider.ConfigContext); const prefixCls = getPrefixCls('basic-chart'); const chartProps = omit(props, ['className', 'option']); const option = useMemo(() => { return buildOption(props.option); }, [props.option]); // const chartProps = pick(props, ['option', 'notMerge', 'lazyUpdate', 'style', 'className', 'theme', 'onChartReady', 'loadingOption', 'showLoading', 'onEvents', 'opts']); if (ref && ref.current && ref.current.getEchartsInstance) { ref.current.getEchartsInstance().clear(); ref.current.getEchartsInstance().setOption(option); ref.current.getEchartsInstance().resize(); } return ( <ReactEcharts ref={ref} className={classNames(prefixCls, props.className)} option={option} style={{ width: '100%', height: '100%' }} {...chartProps} /> ); }), ); export default ECharts;