当前位置：首页 > React

react如何使用echarts

2026-02-26 08:03:28React

安装依赖

确保项目已安装 ECharts 和 React 相关依赖。通过 npm 或 yarn 安装 echarts 和 echarts-for-react（推荐使用后者简化集成）：

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

基础使用示例

创建一个 React 组件并引入 ECharts。以下是一个折线图的简单实现：

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

const 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';

const DynamicChart = () => {
  const [data, setData] = useState([120, 200, 150, 80, 70, 110, 130]);

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

  const option = {
    xAxis: { data: ['A', 'B', 'C', 'D', 'E', 'F', 'G'] },
    yAxis: {},
    series: [{ data, type: 'bar' }]
  };

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

主题与样式定制

使用 ECharts 主题或自定义样式：

import React from 'react';
import ReactECharts from 'echarts-for-react';
import 'echarts/theme/dark'; // 引入内置主题

const ThemedChart = () => {
  const option = {
    title: { text: 'Dark Theme Chart' },
    series: [{ type: 'pie', data: [{ value: 335, name: 'A' }, { value: 310, name: 'B' }] }]
  };

  return <ReactECharts option={option} theme="dark" style={{ height: '400px' }} />;
};

事件绑定

处理图表交互事件：

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

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

  const option = {
    series: [{ type: 'scatter', data: [[10, 20], [30, 40]] }]
  };

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

按需引入模块

优化包体积，仅引入所需模块：

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]);

const CustomImportChart = () => {
  const option = { /* 配置项 */ };
  return <ReactECharts echarts={echarts} option={option} />;
};

react如何使用echarts