react项目如何使用echarts
安装 ECharts 依赖
在 React 项目中安装 ECharts 核心库和 React 封装库：
npm install echarts echarts-for-react基础使用示例
创建一个简单的折线图组件：
import React from 'react';
import ReactECharts from 'echarts-for-react';
const LineChart = () => {
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
return <ReactECharts option={option} />;
};
export default LineChart;按需引入模块
减少打包体积，只引入需要的图表类型：
import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import {
TitleComponent,
TooltipComponent,
GridComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([
LineChart,
TitleComponent,
TooltipComponent,
GridComponent,
CanvasRenderer
]);响应式处理
监听窗口变化自动调整图表大小：
const ResponsiveChart = () => {
const chartRef = useRef(null);
useEffect(() => {
const handleResize = () => {
chartRef.current?.getEchartsInstance().resize();
};
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return <ReactECharts ref={chartRef} option={option} />;
};主题配置
使用自定义主题或官方主题：
import { ThemeRiverChart } from 'echarts/charts';
import 'echarts/theme/dark';
// 使用主题
<ReactECharts
option={option}
theme="dark"
style={{ height: 400 }}
/>事件处理
添加图表交互事件：
const onEvents = {
click: (params) => {
console.log('点击事件参数:', params);
},
legendselectchanged: (params) => {
console.log('图例选择变化:', params);
}
};
<ReactECharts
option={option}
onEvents={onEvents}
/>动态更新数据
通过 useEffect 实现数据更新：
const DynamicChart = ({ data }) => {
const [option, setOption] = useState(baseOption);
useEffect(() => {
setOption(prev => ({
...prev,
series: [{ ...prev.series[0], data }]
}));
}, [data]);
return <ReactECharts option={option} />;
};服务端渲染支持
配置 SSR 兼容模式：
import ReactECharts from 'echarts-for-react/lib/core';
<ReactECharts
option={option}
ssr={true}
style={{ width: '100%', height: '100%' }}
/>
