当前位置：首页 > React

react如何用echarts

2026-02-11 17:50:46React

安装 ECharts 和 React 适配库

在 React 项目中使用 ECharts 需要安装 ECharts 核心库和 React 适配库。通过 npm 或 yarn 安装以下依赖：

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

引入 ECharts 和 React 组件

在 React 组件中引入 ECharts 和 ReactECharts 组件：

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

配置图表选项

准备 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 渲染图表，传入配置选项：

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

动态更新图表

通过 React 的状态管理动态更新图表数据，修改 option 后重新渲染：

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

  const updateData = () => {
    setData(data.map(value => value + 5));
  };

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

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

自定义主题和扩展

使用 ECharts 主题或注册地图等扩展功能：

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

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

事件绑定

通过 onEvents 属性绑定 ECharts 事件：

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

<ReactECharts
  option={option}
  onEvents={{
    'click': onChartClick
  }}
/>

按需引入模块

优化体积时可按需引入 ECharts 模块：

react如何用echarts

import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';

echarts.use([BarChart, GridComponent]);