ECharts Installation

1. Standalone Version

We can directly download echarts.min.js and include it using the <script> tag.

echarts.min.js(4.7.0)

Additionally, for development environments, you can use the source code version echarts.js and include it using the <script> tag. The source code version includes common error messages and warnings.

echarts.js(4.7.0)

We can also directly download more comprehensive versions from the ECharts official website, which include different themes and languages. Download link: https://echarts.apache.org/zh/download.html.

These pre-built echarts offer the following customizations:

Full Version: echarts/dist/echarts.js, largest in size, includes all charts and components. See included content in echarts/echarts.all.js.
Common Version: echarts/dist/echarts.common.js, medium in size, includes common charts and components. See included content in echarts/echarts.common.js.
Simple Version: echarts/dist/echarts.simple.js, smaller in size, includes only the most commonly used charts and components. See included content in echarts/echarts.simple.js.

2. Using CDN Method

The following are two stable CDNs recommended for international use. No reliable CDN has been found for domestic use yet, so it is currently recommended to download locally.

Staticfile CDN (Domestic): https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js
jsDelivr: https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js
cdnjs: https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js

Staticfile CDN (Domestic)

<!-- Prepare a DOM with size (width and height) for ECharts -->
<div id="main" style="width: 600px;height:400px;"></div>

jsDelivr

<!-- Prepare a DOM with size (width and height) for ECharts -->
<div id="main" style="width: 600px;height:400px;"></div>

cdnjs

<!-- Prepare a DOM with size (width and height) for ECharts -->
<div id="main" style="width: 600px;height:400px;"></div>

3. NPM Method

Due to the slow speed of npm installation, this tutorial uses the Taobao mirror and its command cnpm. Installation instructions are available at: Using Taobao NPM Mirror.

The npm version needs to be greater than 3.0. If it is lower, you need to upgrade it:

# Check version
$ npm -v
2.3.0

# Upgrade npm
cnpm install npm -g

# Upgrade or install cnpm
npm install cnpm -g

Acquire echarts via cnpm:

# Latest stable version
$ cnpm install echarts --save

After installation, ECharts and zrender will be placed in the node_modules directory. We can directly use require('echarts') in our project code.

Example

var echarts = require('echarts');

// Initialize the echarts instance based on the prepared dom

var myChart = echarts.init(document.getElementById('main'));
// Draw the chart
myChart.setOption({
    title: {
        text: 'ECharts Getting Started Example'
    },
    tooltip: {},
    xAxis: {
        data: ['Shirt', 'Sweater', 'Blouse', 'Pants', 'High Heels', 'Socks']
    },
    yAxis: {},
    series: [{
        name: 'Sales',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});

❮ Echarts Setup Home ❯