ECharts installation

1.Independent version

We can download echarts.min.js directly and introduce it with the < script >tag.

echarts.min.js(4.7.0)

In addition, the source code version echarts.js can be used in the development environment and introduced with the < script > tag, and the source code version contains common error tips and warnings.

echarts.js(4.7.0)

We can also directly download more diverse versions on the official website of ECharts, including different themes and languages. The download address is: https://echarts.apache.org/zh/download.html .

These built echarts provide the following customizations:

Full version: echarts/dist/echarts.js which is the largest and containsall the charts and components, see: echarts/echarts.all.js .
Common version: echarts/dist/echarts.common.js size, contains common charts and components, which can be found in: echarts/echarts.common.js .
Simplified version: echarts/dist/echarts.simple.js is small and contains only the most commonly used charts and components, which can be found in: echarts/echarts.simple.js .

2.Use the CDN method

The following recommend two relatively stable foreign CDN, domestic has not found which one is better, it is still recommended to download to the local.

Staticfile CDN (domestic): https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js
JsDelivr: https://cdn.jsdelivr.net/npm/echarts@4.3.0/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--><divid="main"style="width:
600px;height:400px;"></div>

JsDelivr

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

Cdnjs

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

3.NPM method

Due to the npm installation speed is slow. This tutorial uses Taobao image and its commands. cnpm reference for installation and use: use Taobao NPM image.

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

# View version
$ npm -v
2.3.0

#upgradation npm
cnpm install npm -g


# Upgrade or Install cnpm
npm install cnpm -g

Obtain echarts through cnpm:

# Latest stable version
$ cnpm install echarts --save

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

Example

varecharts=require('echarts');//Based on the prepared dom，Initialize Echarts instance varmyChart=echarts.init(document.getElementById('main'));//Draw a chart myChart.setOption({title:{text:'ECharts
Getting Started Example'},tooltip:{},xAxis:{data:['Shirt', 'sweater', 'chiffon shirt', 'pants',' high heels', 'socks']},yAxis:{},series:[{name:'sales volume',type:'bar',data:[5,20,36,10,10,20]}]});