当前位置：首页 > React

react中如何引入echarts

2026-03-11 02:08:19React

安装 ECharts 依赖

在 React 项目中安装 echarts 和 echarts-for-react（封装好的 React 组件库）：

npm install echarts echarts-for-react

基础引入方式

通过 echarts-for-react 直接引入 ECharts 组件：

react中如何引入echarts

import React from 'react';
import ReactECharts from 'echarts-for-react';

function App() {
  const option = {
    xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
    yAxis: { type: 'value' },
    series: [{ data: [820, 932, 901], type: 'line' }]
  };

  return <ReactECharts option={option} />;
}

按需引入模块（优化体积）

ECharts 默认全量引入，可通过按需引入减小打包体积：

import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import { GridComponent, TitleComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import ReactECharts from 'echarts-for-react';

// 注册必要组件
echarts.use([LineChart, GridComponent, TitleComponent, CanvasRenderer]);

function App() {
  const option = { /* 同上 */ };
  return <ReactECharts echarts={echarts} option={option} />;
}

动态加载主题

如需使用自定义主题，先注册主题文件：

react中如何引入echarts

import * as echarts from 'echarts';
import themeJson from './theme.json'; // 主题文件

// 注册主题
echarts.registerTheme('myTheme', themeJson);

// 使用时传入主题名
<ReactECharts theme="myTheme" option={option} />

手动初始化图表（非组件方式）

直接使用原生 ECharts API：

import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

function Chart() {
  const chartRef = useRef(null);

  useEffect(() => {
    const chart = echarts.init(chartRef.current);
    chart.setOption(option);
    return () => chart.dispose(); // 组件卸载时销毁
  }, []);

  return <div ref={chartRef} style={{ width: '100%', height: 400 }} />;
}

响应式处理

监听窗口变化自动调整图表大小：

useEffect(() => {
  const chart = echarts.init(chartRef.current);
  const resizeHandler = () => chart.resize();
  window.addEventListener('resize', resizeHandler);
  return () => {
    window.removeEventListener('resize', resizeHandler);
    chart.dispose();
  };
}, []);