当前位置：首页 > React

如何在react中echars

2026-01-24 20:45:45React

在 React 中使用 ECharts

要在 React 项目中集成 ECharts，需要安装 ECharts 库并通过 React 组件调用其 API。以下是具体实现方法：

安装 ECharts

通过 npm 或 yarn 安装 ECharts 核心库：

npm install echarts --save
# 或
yarn add echarts

基本使用步骤

创建一个 React 组件并初始化 ECharts 实例：

引入 ECharts
在组件文件中导入 ECharts：

如何在react中echars

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

创建容器和初始化图表
使用 useRef 绑定 DOM 容器，并在 useEffect 中初始化图表：

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

  useEffect(() => {
    const chart = echarts.init(chartRef.current);
    const option = {
      title: { text: '示例图表' },
      tooltip: {},
      xAxis: { data: ['A', 'B', 'C', 'D', 'E'] },
      yAxis: {},
      series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 15] }]
    };
    chart.setOption(option);

    return () => chart.dispose(); // 组件卸载时销毁图表
  }, []);

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

响应式处理

监听窗口大小变化并调整图表尺寸：

如何在react中echars

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

按需引入模块

若需优化体积，可仅导入所需图表类型：

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

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

使用 React-ECharts 封装库

若需简化流程，可使用现成的封装库（如 echarts-for-react）：

npm install echarts-for-react --save

示例代码：

import ReactECharts from 'echarts-for-react';

function App() {
  const option = {
    xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
    yAxis: { type: 'value' },
    series: [{ data: [120, 200, 150], type: 'line' }]
  };
  return <ReactECharts option={option} style={{ height: '400px' }} />;
}