如何在react中echars
在 React 中使用 ECharts
安装依赖
确保项目已安装 echarts 和 react 相关依赖。通过 npm 或 yarn 安装 ECharts：
npm install echarts --save或
yarn add echarts引入 ECharts
在 React 组件中引入 ECharts 核心模块：
import * as echarts from 'echarts';
import React, { useEffect, useRef } from 'react';创建图表容器
在组件中创建一个 DOM 容器用于渲染图表：
function ChartComponent() {
const chartRef = useRef(null);
return (
<div
ref={chartRef}
style={{ width: '100%', height: '400px' }}
/>
);
}初始化图表
在 useEffect 中初始化图表并配置选项：
useEffect(() => {
const chartInstance = echarts.init(chartRef.current);
const option = {
title: { text: '示例图表' },
tooltip: {},
xAxis: { data: ['A', 'B', 'C', 'D', 'E'] },
yAxis: {},
series: [{ type: 'bar', data: [5, 20, 36, 10, 15] }]
};
chartInstance.setOption(option);
return () => chartInstance.dispose(); // 组件卸载时销毁图表
}, []);响应式调整
监听窗口变化并重新调整图表大小：
useEffect(() => {
const handleResize = () => chartInstance?.resize();
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, [chartInstance]);按需引入模块（优化）
若需减小打包体积，可仅引入必要的 ECharts 模块：
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { GridComponent, TitleComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([BarChart, GridComponent, TitleComponent, CanvasRenderer]);自定义主题
通过 echarts.registerTheme 应用自定义主题：
echarts.registerTheme('myTheme', {
backgroundColor: '#f4cccc'
});
const chartInstance = echarts.init(chartRef.current, 'myTheme');动态数据更新
通过 setOption 更新数据时，使用 notMerge: false 保留动画效果：
chartInstance.setOption(newOption, { notMerge: false });注意事项
- 确保 DOM 容器有明确的宽高，否则图表无法渲染。
- 在组件卸载时调用
dispose()避免内存泄漏。 - 复杂图表建议封装为独立组件以提高复用性。
