当前位置：首页 > React

react如何引入echarts

2026-01-14 09:39:04React

安装 ECharts 依赖

在 React 项目中安装 ECharts 核心库和 React 封装库：

npm install echarts echarts-for-react

基础引入方式

创建一个 React 组件并引入基础图表：

react如何引入echarts

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

function BasicChart() {
  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} />;
}

按需引入模块

减小打包体积的优化方式：

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

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

function OptimizedChart() {
  // 使用与基础示例相同的option配置
  return <ReactECharts echarts={echarts} option={option} />;
}

处理动态数据

实现图表数据动态更新：

react如何引入echarts

function DynamicChart({ data }) {
  const option = {
    series: [{
      type: 'bar',
      data: data
    }]
  };

  return <ReactECharts 
    option={option} 
    notMerge={true} 
    lazyUpdate={true}
  />;
}

主题定制

应用自定义主题或官方主题：

import { dark } from 'echarts/themes';

function ThemedChart() {
  return (
    <ReactECharts
      option={option}
      theme={dark}
    />
  );
}

事件处理

绑定图表交互事件：

function EventChart() {
  const onEvents = {
    click: (params) => {
      console.log('Chart clicked:', params);
    }
  };

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