当前位置：首页 > React

react中如何使用echarts

2026-01-24 08:12:53React

安装 ECharts 依赖

在 React 项目中安装 ECharts 核心库和 React 封装库。使用 npm 或 yarn 安装：

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

引入 ECharts 组件

在 React 组件中导入 ReactECharts 组件和 ECharts 核心模块：

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

配置图表选项

准备一个包含图表配置的对象，例如柱状图：

const option = {
  title: {
    text: '示例柱状图'
  },
  tooltip: {},
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [{
    name: '数量',
    type: 'bar',
    data: [5, 20, 36, 10, 15]
  }]
};

渲染图表组件

在 React 组件中使用 ReactECharts 并传入配置：

react中如何使用echarts

function ChartComponent() {
  return (
    <ReactECharts
      option={option}
      style={{ height: '400px', width: '100%' }}
      className="echarts-for-react"
    />
  );
}

动态更新图表

通过 React 的状态管理实现图表动态更新：

function DynamicChart() {
  const [data, setData] = React.useState([5, 20, 36, 10, 15]);

  const updateData = () => {
    setData(data.map(value => Math.random() * 40));
  };

  const option = {
    series: [{ data }]
  };

  return (
    <div>
      <ReactECharts option={option} />
      <button onClick={updateData}>更新数据</button>
    </div>
  );
}

主题定制

可以使用 ECharts 的主题功能或注册自定义主题：

react中如何使用echarts

// 注册主题
echarts.registerTheme('myTheme', {
  backgroundColor: '#f4cccc'
});

// 使用主题
<ReactECharts option={option} theme="myTheme" />

事件处理

为图表添加事件监听：

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

  const onEvents = {
    click: onChartClick
  };

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

按需引入模块

减小打包体积，只引入需要的图表类型：

import { BarChart, LineChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent
} from 'echarts/components';

echarts.use([
  BarChart,
  LineChart,
  TitleComponent,
  TooltipComponent,
  GridComponent
]);

响应式设计

使图表适应容器大小变化：

function ResponsiveChart() {
  const [width, setWidth] = React.useState('100%');

  React.useEffect(() => {
    const handleResize = () => {
      setWidth(`${window.innerWidth * 0.8}px`);
    };
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <ReactECharts
      option={option}
      style={{ width, height: '400px' }}
    />
  );
}