当前位置：首页 > React

react如何使用echarts

2026-01-23 18:06:36React

安装 ECharts 和 React 适配库

在 React 项目中使用 ECharts 需要安装 ECharts 核心库及其 React 适配库。通过 npm 或 yarn 安装：

npm install echarts echarts-for-react
# 或
yarn add echarts echarts-for-react

基础使用示例

引入 ReactECharts 组件并传递配置项（option）即可渲染图表。以下是一个折线图的示例代码：

react如何使用echarts

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

function 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;

动态更新图表数据

通过 React 的状态管理动态更新图表数据。当数据变化时，组件会自动重新渲染：

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

function DynamicChart() {
  const [data, setData] = useState([820, 932, 901, 934, 1290, 1330, 1320]);

  useEffect(() => {
    const interval = setInterval(() => {
      setData(prevData => prevData.map(value => value + Math.random() * 100 - 50));
    }, 2000);
    return () => clearInterval(interval);
  }, []);

  const option = {
    xAxis: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
    yAxis: { type: 'value' },
    series: [{ data, type: 'line' }]
  };

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

自定义主题和按需加载

ECharts 支持主题定制和按需引入模块以减少打包体积。示例代码如下：

react如何使用echarts

import React from 'react';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';

// 按需注册模块
echarts.use([LineChart, GridComponent]);

function CustomThemeChart() {
  const option = {
    // 配置项
  };

  return <ReactECharts 
    option={option} 
    theme="dark" // 使用内置主题或自定义主题
    echarts={echarts} // 传递按需加载的 echarts 实例
  />;
}

事件绑定

通过 onEvents 属性绑定 ECharts 事件，例如点击图表时的交互：

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

function EventChart() {
  const handleClick = (params) => {
    console.log('图表点击事件:', params);
  };

  const option = {
    // 配置项
  };

  return (
    <ReactECharts
      option={option}
      onEvents={{
        click: handleClick
      }}
    />
  );
}

响应式设计

通过监听窗口大小变化实现图表自适应。使用 resize 方法调整图表尺寸：

import React, { useRef } from 'react';
import ReactECharts from 'echarts-for-react';

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

  const handleResize = () => {
    if (chartRef.current) {
      chartRef.current.getEchartsInstance().resize();
    }
  };

  React.useEffect(() => {
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <ReactECharts
      ref={chartRef}
      option={/* 配置项 */}
      style={{ height: '400px', width: '100%' }}
    />
  );
}