Tree Shaking

Optimize bundle size by importing only what you need

Overview

By default, EChartsReact imports the full ECharts library (~1MB). For production applications, you can reduce bundle size significantly using EChartsCore with tree shaking.

Bundle Size Comparison

Step-by-Step Guide

1. Create an ECharts Setup File

Create a file to configure your ECharts imports:

// src/lib/echarts.ts
import * as echarts from 'echarts/core';

// Import chart types
import { LineChart, BarChart, PieChart } from 'echarts/charts';

// Import components
import {
  GridComponent,
  TooltipComponent,
  TitleComponent,
  LegendComponent,
  DataZoomComponent
} from 'echarts/components';

// Import renderer
import { CanvasRenderer } from 'echarts/renderers';

// Register everything
echarts.use([
  // Charts
  LineChart,
  BarChart,
  PieChart,
  // Components
  GridComponent,
  TooltipComponent,
  TitleComponent,
  LegendComponent,
  DataZoomComponent,
  // Renderer
  CanvasRenderer
]);

export { echarts };

2. Use EChartsCore

// src/components/MyChart.tsx
import { EChartsCore } from 'react-echarts-library';
import { echarts } from '../lib/echarts';

function MyChart() {
  const option = {
    title: { text: 'Sales Trend' },
    tooltip: { trigger: 'axis' },
    xAxis: {
      type: 'category',
      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
    },
    yAxis: { type: 'value' },
    series: [{
      type: 'line',
      data: [150, 230, 224, 218, 135]
    }]
  };

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

Available Imports

Chart Types

Import from echarts/charts:

import {
  LineChart,        // Line and area charts
  BarChart,         // Bar charts
  PieChart,         // Pie and donut charts
  ScatterChart,     // Scatter plots
  RadarChart,       // Radar charts
  MapChart,         // Geographic maps
  TreeChart,        // Tree diagrams
  TreemapChart,     // Treemaps
  GraphChart,       // Graph/network diagrams
  GaugeChart,       // Gauge charts
  FunnelChart,      // Funnel charts
  ParallelChart,    // Parallel coordinates
  SankeyChart,      // Sankey diagrams
  BoxplotChart,     // Box plots
  CandlestickChart, // Financial candlesticks
  EffectScatterChart, // Scatter with effects
  LinesChart,       // Lines on maps
  HeatmapChart,     // Heatmaps
  SunburstChart,    // Sunburst charts
  CustomChart       // Custom series
} from 'echarts/charts';

Components

Import from echarts/components:

import {
  // Layout
  GridComponent,          // Cartesian grid
  PolarComponent,         // Polar coordinates
  GeoComponent,           // Geographic component
  SingleAxisComponent,    // Single axis
  ParallelComponent,      // Parallel coordinates
  CalendarComponent,      // Calendar

  // Interactive
  TooltipComponent,       // Tooltips
  ToolboxComponent,       // Toolbox (save, zoom, etc.)
  BrushComponent,         // Brush selection
  DataZoomComponent,      // Data zoom (both types)
  DataZoomInsideComponent,// Inside data zoom
  DataZoomSliderComponent,// Slider data zoom

  // Visual
  TitleComponent,         // Chart title
  LegendComponent,        // Legend
  VisualMapComponent,     // Visual mapping
  VisualMapContinuousComponent,
  VisualMapPiecewiseComponent,

  // Markers
  MarkPointComponent,     // Mark points
  MarkLineComponent,      // Mark lines
  MarkAreaComponent,      // Mark areas

  // Data
  DatasetComponent,       // Dataset
  TransformComponent,     // Data transform

  // Misc
  TimelineComponent,      // Timeline
  GraphicComponent,       // Custom graphics
  AriaComponent           // Accessibility
} from 'echarts/components';

Renderers

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

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

Common Configurations

Dashboard with Multiple Chart Types

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

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

export { echarts };

Analytics Charts

// echarts-analytics.ts
import * as echarts from 'echarts/core';
import {
  LineChart,
  BarChart,
  HeatmapChart,
  SankeyChart
} from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  TitleComponent,
  LegendComponent,
  VisualMapComponent,
  CalendarComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  LineChart, BarChart, HeatmapChart, SankeyChart,
  GridComponent, TooltipComponent, TitleComponent,
  LegendComponent, VisualMapComponent, CalendarComponent,
  CanvasRenderer
]);

export { echarts };

Minimal Line Chart

// echarts-minimal.ts
import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import { GridComponent, TooltipComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([LineChart, GridComponent, TooltipComponent, CanvasRenderer]);

export { echarts };

Lazy Loading Charts

For even better performance, lazy load chart configurations:

import { lazy, Suspense } from 'react';

// Lazy load chart component
const AnalyticsChart = lazy(() => import('./AnalyticsChart'));

function Dashboard() {
  return (
    <Suspense fallback={<div>Loading chart...</div>}>
      <AnalyticsChart />
    </Suspense>
  );
}

Checking Bundle Size

Use webpack-bundle-analyzer or similar tools:

# For Next.js
npm install @next/bundle-analyzer

# For Vite
npm install rollup-plugin-visualizer

Tips

1. Start minimal - Add imports as needed
2. Group by feature - Create separate configs for different parts of your app
3. Use code splitting - Lazy load charts that aren’t immediately visible
4. Monitor bundle size - Check impact of new imports
5. Consider SVG - For small charts, SVG renderer can be smaller

Troubleshooting

”bindbindbindbindbindbindbindbindBindbindbindbindBindbindbindBindbindbindbindBinding bindbindbindBindbindBinding bindBindBind bindBindingBindBinding bindBindBindBindingBindBindBindBindingBindBindBindBindBindBindBindingBindBindBindBinding bindBindBinding bindBindBindingBindBinding bindBindBindingBindBinding bindBind bindBinding bindBindBindingBindBinding bindBinding”bindBindBinding bindBind bindBindBindBinding …“bindBinding bindBindingBindingBinding bindBindBindBinding bindBindBindingBind bindBindingBindingBindingBind

If you see rendering errors, you’re missing a required component:

// Error: "bindbindbindbindBindbindBind bindBind bindBindBindBindBinding bindBindBindBinding bindBindBindBinding bind bindBindBindingBindBinding bindBindBindBinding bind bindBind bindbind bindBindingBindingBindBindingBindingBindingBind..."bindBind bindBindingBindBinding bind bindBind bindBindingBindBind bindBindingBind bindBindingBindBinding bindBindBinding bindBindingBindBinding bindBindingBindBindBindBindingBind bindBindbind bindBindingBindBinding bindBindingBind bindBindingBind bindBind bindBind bindBindingBind bindBindingBindBindingBindBind bindBindingBind bind bindBindingBind bindBindingBindBinding
// Solution: Add GridComponent for cartesian charts
import { GridComponent } from 'echarts/components';

Chart type not recognized

Make sure to import and register the chart type:

// Won't work without importing PieChart
series: [{ type: 'pie', ... }]

// Solution
import { PieChart } from 'echarts/charts';
echarts.use([PieChart, ...]);