当前位置：首页 > React

react中如何引入echarts

2026-01-24 17:27:46React

安装 ECharts 依赖

在项目中安装 ECharts 核心库和 React 适配器：

npm install echarts echarts-for-react

基础引入方式

通过 echarts-for-react 组件直接渲染图表：

react中如何引入echarts

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

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

  return <ReactECharts option={option} style={{ height: 400 }} />;
}

按需引入模块

为减小打包体积，可仅引入需要的 ECharts 模块：

import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([LineChart, GridComponent, CanvasRenderer]);

// 后续使用方式与基础引入相同

动态主题切换

支持运行时切换主题：

react中如何引入echarts

import { useEffect, useState } from 'react';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts';

function ThemedChart() {
  const [theme, setTheme] = useState('light');
  const option = { /* 图表配置 */ };

  useEffect(() => {
    // 注册主题
    echarts.registerTheme('dark', { backgroundColor: '#333' });
  }, []);

  return (
    <>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        切换主题
      </button>
      <ReactECharts 
        option={option} 
        theme={theme}
        style={{ height: 400 }}
      />
    </>
  );
}

事件绑定

通过 onEvents 属性绑定图表事件：

<ReactECharts
  option={option}
  onEvents={{
    click: (params) => console.log('图表点击事件', params),
    legendselectchanged: (params) => console.log('图例切换', params)
  }}
/>

手动初始化

需要直接操作 ECharts 实例时：

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

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

  useEffect(() => {
    const chart = echarts.init(chartRef.current);
    chart.setOption({ /* 配置项 */ });
    return () => chart.dispose();
  }, []);

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