React Wrapper for Apache ECharts

3.0.6 · active · verified Sun Apr 19

echarts-for-react is a robust and widely-used React component that seamlessly integrates Apache ECharts, a powerful charting library, into React applications. It provides a declarative way to render various types of charts and visualizations, abstracting away direct ECharts instance management. The current stable version is 3.0.6. The project maintains an active development pace with frequent minor updates and bug fixes, building upon the significant v3.0.0 release that introduced ECharts v5 support and a full TypeScript rewrite. Key differentiators include its simplicity, direct exposure of ECharts options as React props, comprehensive TypeScript support, and the ability to manually import ECharts modules for bundle size optimization, making it a preferred choice for React developers needing advanced data visualization.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart demonstrates a functional React component rendering a basic ECharts bar chart. It shows how to define chart options, handle chart readiness and events, and access the ECharts instance for manual operations like resizing. It also includes the necessary ECharts module imports and registration for best practice.

import React, { useState, useEffect, useRef } from 'react';
import ReactECharts from 'echarts-for-react'; // Or use 'echarts-for-react/lib/core' with manual imports
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { GridComponent, TooltipComponent, TitleComponent, DatasetComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

// Register necessary ECharts components if using ReactEChartsCore
// For ReactECharts (default import), these are often included, but explicit registration is good practice
echarts.use([
  BarChart,
  GridComponent,
  TooltipComponent,
  TitleComponent,
  DatasetComponent,
  CanvasRenderer
]);

const EChartsDemo: React.FC = () => {
  const chartRef = useRef<echarts.ECharts | null>(null);

  const getOption = () => {
    return {
      title: {
        text: 'ECharts Sample Bar Chart'
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: ['Category A', 'Category B', 'Category C', 'Category D', 'Category E']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: 'Sales',
        data: [120, 200, 150, 80, 70],
        type: 'bar'
      }]
    };
  };

  const onChartReady = (instance: echarts.ECharts) => {
    console.log('ECharts instance is ready:', instance);
    chartRef.current = instance;
  };

  const onEvents = {
    'click': (params: any) => {
      console.log('Chart clicked:', params.name);
    },
    'mouseover': (params: any) => {
      // console.log('Mouse over:', params.seriesName);
    }
  };

  useEffect(() => {
    // Example: Manual resize after a delay (e.g., if container size changes dynamically)
    const timer = setTimeout(() => {
      chartRef.current?.resize();
      console.log('ECharts instance manually resized.');
    }, 2000);
    return () => clearTimeout(timer);
  }, []);

  return (
    <div style={{ width: '100%', height: '400px', border: '1px solid #ccc', padding: '10px' }}>
      <h3>Your ECharts Visualization</h3>
      <ReactECharts
        option={getOption()}
        notMerge={true}
        lazyUpdate={true}
        theme="light"
        onChartReady={onChartReady}
        onEvents={onEvents}
        opts={{ renderer: 'canvas' }} // Recommend specifying renderer explicitly
        style={{ height: '100%' }}
      />
    </div>
  );
};

export default EChartsDemo;

view raw JSON →