当前位置：首页 > React

react如何引入echarts

2026-02-26 01:52:38React

安装依赖

确保项目中已安装 echarts 和 echarts-for-react。通过以下命令安装：

npm install echarts echarts-for-react --save

引入组件

在 React 组件中导入 ReactECharts：

react如何引入echarts

import ReactECharts from 'echarts-for-react';

配置图表选项

定义图表的配置项（option），例如一个简单的折线图：

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'
  }]
};

渲染图表

在组件中使用 ReactECharts 并传入 option：

react如何引入echarts

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

按需引入主题或模块

如果需要使用主题或特定模块，从 ECharts 中按需引入：

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

echarts.use([LineChart, GridComponent]);

动态更新图表

通过 ref 动态更新图表数据：

import React, { useRef } from 'react';

function App() {
  const chartRef = useRef(null);
  const updateData = () => {
    if (chartRef.current) {
      const newOption = { ...option, series: [{ data: [/* 新数据 */] }] };
      chartRef.current.getEchartsInstance().setOption(newOption);
    }
  };

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