EChartsCore

Tree-shakeable ECharts component for optimized bundle sizes

Overview

EChartsCore is a tree-shakeable alternative to EChartsReact. It allows you to import only the chart types and components you need, resulting in smaller bundle sizes.

import { EChartsCore } from 'react-echarts-library';

Why Use EChartsCore?

Basic Usage

import { EChartsCore } from 'react-echarts-library';
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { GridComponent, TooltipComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

// Register only what you need
echarts.use([BarChart, GridComponent, TooltipComponent, CanvasRenderer]);

function MyChart() {
  const option = {
    tooltip: {},
    xAxis: { type: 'category', data: ['A', 'B', 'C'] },
    yAxis: { type: 'value' },
    series: [{ type: 'bar', data: [10, 20, 30] }]
  };

  return (
    <EChartsCore
      echarts={echarts}
      option={option}
      style={{ height: 400 }}
    />
  );
}

Props

EChartsCore accepts all the same props as EChartsReact, plus:

Chart Types

Import chart types from echarts/charts:

import {
  LineChart,
  BarChart,
  PieChart,
  ScatterChart,
  RadarChart,
  MapChart,
  TreeChart,
  TreemapChart,
  GraphChart,
  GaugeChart,
  FunnelChart,
  ParallelChart,
  SankeyChart,
  BoxplotChart,
  CandlestickChart,
  EffectScatterChart,
  LinesChart,
  HeatmapChart,
  SunburstChart,
  CustomChart
} from 'echarts/charts';

Components

Import components from echarts/components:

import {
  // Grid and Axis
  GridComponent,
  PolarComponent,
  RadarComponent,
  GeoComponent,
  SingleAxisComponent,
  ParallelComponent,
  CalendarComponent,

  // Interactive
  TooltipComponent,
  ToolboxComponent,
  BrushComponent,
  DataZoomComponent,
  DataZoomInsideComponent,
  DataZoomSliderComponent,

  // Visual
  TitleComponent,
  LegendComponent,
  VisualMapComponent,
  VisualMapContinuousComponent,
  VisualMapPiecewiseComponent,

  // Data
  DatasetComponent,
  TransformComponent,

  // Misc
  MarkPointComponent,
  MarkLineComponent,
  MarkAreaComponent,
  TimelineComponent,
  GraphicComponent,
  AriaComponent
} from 'echarts/components';

Renderers

Choose your rendering mode:

// Canvas rendering (better performance)
import { CanvasRenderer } from 'echarts/renderers';

// SVG rendering (better for small charts, DOM access)
import { SVGRenderer } from 'echarts/renderers';

Complete Example

Here’s a production-ready setup for a line and bar chart dashboard:

// echarts-setup.ts
import * as echarts from 'echarts/core';
import { LineChart, BarChart, PieChart } from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  TitleComponent,
  LegendComponent,
  DataZoomComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  LineChart,
  BarChart,
  PieChart,
  GridComponent,
  TooltipComponent,
  TitleComponent,
  LegendComponent,
  DataZoomComponent,
  CanvasRenderer
]);

export { echarts };

// MyChart.tsx
import { EChartsCore } from 'react-echarts-library';
import { echarts } from './echarts-setup';

function Dashboard() {
  const lineOption = {
    title: { text: 'Trend' },
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
    yAxis: { type: 'value' },
    series: [{ type: 'line', data: [150, 230, 224] }]
  };

  const barOption = {
    title: { text: 'Sales' },
    tooltip: {},
    xAxis: { type: 'category', data: ['Q1', 'Q2', 'Q3'] },
    yAxis: { type: 'value' },
    series: [{ type: 'bar', data: [300, 400, 350] }]
  };

  return (
    <div>
      <EChartsCore echarts={echarts} option={lineOption} style={{ height: 300 }} />
      <EChartsCore echarts={echarts} option={barOption} style={{ height: 300 }} />
    </div>
  );
}

Bundle Size Comparison

Tips

1. Create a shared setup file - Register components once and import everywhere
2. Use the renderer wisely - Canvas is faster, SVG is more accessible
3. Import only what you need - Each component adds to your bundle
4. Consider lazy loading - Split chart code for faster initial loads

Next Steps

• Tree Shaking Guide - Detailed optimization guide
• Props Reference - All available props