Skip to main content

​
Installation

There are multiple ways to install Apache ECharts in your project. Choose the method that best fits your development workflow.

​
Package Manager

Install ECharts using your preferred package manager: 
npm install echarts --save
The package name is echarts and the current version is 6.0.0.

​
Import ECharts

After installation, import ECharts in your JavaScript/TypeScript files: 
import * as echarts from 'echarts';

// Initialize chart
const chart = echarts.init(document.getElementById('main'));
For TypeScript users, ECharts includes complete type definitions out of the box. No need to install additional @types packages.

​
CDN

For quick prototyping or simple projects, you can include ECharts directly from a CDN:

​
jsDelivr CDN

<!-- Latest version -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
The jsDelivr CDN is specified in the package.json (jsdelivr field) and points to dist/echarts.min.js.

​
Bundle Variations

ECharts provides several pre-built bundles:
BundleFileDescription
Fullecharts.min.jsIncludes all charts and components
Commonecharts.common.min.jsIncludes commonly used charts (smaller size)
Simpleecharts.simple.min.jsMinimal bundle with basic charts
ESMecharts.esm.min.mjsES Module format for modern browsers

​
Basic HTML Setup

Here’s a complete HTML example using the CDN: 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ECharts Example</title>
  <style>
    #main {
      width: 100%;
      height: 600px;
    }
  </style>
</head>
<body>
  <!-- Container for the chart -->
  <div id="main"></div>
  
  <!-- Include ECharts -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
  
  <script>
    // Initialize chart instance
    var chart = echarts.init(document.getElementById('main'));
    
    // Specify chart configuration
    var option = {
      title: {
        text: 'My First ECharts'
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110, 130]
      }]
    };
    
    // Set the configuration
    chart.setOption(option);
  </script>
</body>
</html>
Always set explicit dimensions (width and height) on the container element. ECharts needs a sized container to render properly.

​
Custom Build (Tree Shaking)

For production applications, you can create a custom build that includes only the components you need: 
// Import core library
import * as echarts from 'echarts/core';

// Import required components
import { BarChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

// Register components
echarts.use([
  BarChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  CanvasRenderer
]);

// Now use echarts.init as normal
const chart = echarts.init(document.getElementById('main'));
Custom builds can significantly reduce bundle size. The full ECharts library is around 900KB minified, but a custom build with only the components you need can be as small as 200KB.

​
Renderer Selection

ECharts supports two rendering engines:

​
Canvas Renderer (Default)

import { CanvasRenderer } from 'echarts/renderers';
echarts.use([CanvasRenderer]);

// Or when using CDN, canvas is the default
const chart = echarts.init(document.getElementById('main'));
Best for: Large datasets, complex animations, better performance

​
SVG Renderer

import { SVGRenderer } from 'echarts/renderers';
echarts.use([SVGRenderer]);

// Or specify renderer when initializing
const chart = echarts.init(document.getElementById('main'), null, {
  renderer: 'svg'
});
Best for: Better scalability, smaller DOM count, print quality, accessibility

​
Next Steps

Now that you have ECharts installed, you’re ready to create your first chart:

Quick Start Guide

Follow our step-by-step guide to create your first interactive chart

Build docs developers (and LLMs) love

Get started for freeTalk to us