react如何引入echarts

安装 ECharts 依赖

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

npm install echarts echarts-for-react

基础使用方式

通过 ReactECharts 组件直接渲染图表：

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

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

按需引入模块

为减小打包体积，建议按需引入 ECharts 模块：

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

// 后续使用方式与基础示例相同

动态更新配置

通过 getInstance 方法获取图表实例实现动态更新：

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

  const updateChart = () => {
    if (chartRef.current) {
      const instance = chartRef.current.getEchartsInstance();
      instance.setOption(newOptions);
    }
  };

  return (
    <ReactECharts 
      ref={chartRef}
      option={initialOption}
    />
  );
}

主题定制

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

import { theme } from './customTheme.json';

function ThemedChart() {
  return (
    <ReactECharts
      option={option}
      theme={theme}
      style={{ height: 400 }}
    />
  );
}

事件处理

通过 onEvents 属性绑定图表事件：

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

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

注意事项

• 确保在组件卸载时调用 dispose 方法清理实例：

  useEffect(() => {
  return () => {
    if (chartRef.current) {
      chartRef.current.dispose();
    }
  };
  }, []);

• 服务端渲染(SSR)场景需要动态导入组件：

  import dynamic from 'next/dynamic';
  const ReactECharts = dynamic(() => import('echarts-for-react'), { ssr: false });