在React中封裝Echarts有多種方法,以下是一種常見的封裝方式:
npm install echarts --save
EchartsComponent.js
:import React, { useEffect, useRef } from 'react';
import echarts from 'echarts';
const EchartsComponent = ({ options }) => {
const chartRef = useRef(null);
useEffect(() => {
const chart = echarts.init(chartRef.current);
chart.setOption(options);
return () => {
chart.dispose();
};
}, [options]);
return <div ref={chartRef} style={{ width: '100%', height: '300px' }} />;
};
export default EchartsComponent;
EchartsComponent
組件:import React from 'react';
import EchartsComponent from './EchartsComponent';
const ParentComponent = () => {
const options = {
// Echarts配置項
// ...
};
return (
<div>
<h1>使用Echarts的父組件</h1>
<EchartsComponent options={options} />
</div>
);
};
export default ParentComponent;
在上述示例中,EchartsComponent
接收一個options
參數,用于配置Echarts的圖表選項。通過useRef
創建一個DOM引用,useEffect
用于在組件掛載和options
變化時初始化Echarts實例并設置選項。在組件卸載時,通過return
語句中的函數清理Echarts實例。
通過這種方式,我們可以在React中封裝Echarts,并通過組件的props屬性傳遞不同的選項來渲染不同的圖表。