ECharts Installation

1. Standalone version

We can directly download echarts.min.js and include it with<script>Label import.

echarts.min.js(4.7.0)

In addition, in the development environment, you can use the source code version echarts.js and include it with<script>a script tag. The source code version contains common error messages and warnings.

echarts.js(4.7.0)

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

These pre-built ECharts provide the following custom builds:

  • Full version:echarts/dist/echarts.jsThe largest in size, contains all charts and components. For the included content, see:echarts/echarts.all.js。
  • Standard version:echarts/dist/echarts.common.jsModerate in size, contains common charts and components. For the included content, see:echarts/echarts.common.js。
  • Lite version:echarts/dist/echarts.simple.jsSmaller in size, contains only the most commonly used charts and components. For the included content, see:echarts/echarts.simple.js。

2. Using the CDN method

Below are two relatively stable CDNs recommended from abroad. I haven't found a good one domestically yet, so for now it is still recommended to download locally.

Staticfile CDN (Domestic)

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

Try it Yourself »

jsDelivr

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

Try it Yourself »

cdnjs

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

Try it Yourself »


3. NPM method

Since npm installation is slow, this tutorial uses Taobao's mirror and its command cnpm. For installation and usage instructions, refer to:Use Taobao NPM mirror。

The npm version needs to be greater than 3.0; if it is lower than this version, you need to upgrade it:

# 查看版本
$ npm -v
2.3.0

#升级 npm
cnpm install npm -g


# 升级或安装 cnpm
npm install cnpm -g

Obtain echarts via cnpm:

# 最新稳定版
$ cnpm install echarts --save

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

Example

var echarts = require('echarts'); //Initialize the ECharts instance based on the prepared DOM. var myChart = echarts.init(document.getElementById('main')); //Draw chart myChart.setOption({ title: { text: 'ECharts getting started example' }, tooltip: {}, xAxis: { data: ['Shirt', 'wool sweater', 'chiffon top', 'Pants', 'high heels', 'Socks'] }, yAxis: {}, series: [{ name: 'Sales', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] });
other extensions