一、概述

Apache ECharts提供了多种安装方式，你可以根据项目的实际情况选择以下任意一种方式安装。

• 从GitHub获取。
• 从CDN获取。
• 从NPM获取。
• 在线定制。

接下来我们将分别介绍这些安装方式，以及下载后的目录结构。

二、从GitHub获取

Echarts项目的源代码在GitHub上的地址是：https://github.com/apache/echarts

各个版本的可以通过如下地址进行下载：https://github.com/apache/echarts/releases

截止2023-6-8为止，最新的版本是5.4.2，我们也将使用该版本进行相关的演示。
如上图所示，点击下载每个版本更新说明内容下方的Assets中的Source code可以下载源代码。我们当前使用的5.4.2版本的下载地址是：
https://github.com/apache/echarts/archive/refs/tags/5.4.2.zip
https://github.com/apache/echarts/archive/refs/tags/5.4.2.tar.gz
两个下载地址的内容是相同的，只是压缩包文件格式不同而已，下载哪个都是可以的。 
压缩包解压后，目录中的\dist\echarts.js就是完整功能的文件，如下图所示：

其他的文件我们稍后再详细介绍，其中echarts.min.js通常会被用在生产环境中，因为它的体积会更小一些。
将dist目录中的文件放置到前端的项目中。如下图所示：

然后直接在需要使用的页面直接引用项目中的echarts.js文件即可。

<script src="/lib/echarts-5.4.2/echarts.js"></script>

参考示例：demo01.html

三、从CDN获取

可以从以下免费CDN中获取和引用ECharts。

1、jsDelivr

地址：https://www.jsdelivr.com/package/npm/echarts
打开后界面如下图所示：

上图圈住的代码就是可以直接整合到网页中的脚本连接地址，点击标记①的图标，就可以额复制这段代码了，然后，将其放置到HTML页面中。
标记②的位置显示了当前的版本是5.4.2的，也就是默认的最新版本。
如果想切换到其他的版本，可以点击标记③处的下拉菜单进行切换，下拉菜单项如下所示：

这样就可以随意切换版本了，切换之后，代码中连接的脚本地址也会跟着改变，复制到HTML页面中即可。如下代码示例：

参考示例：demo02.html

2、unpkg

地址：https://unpkg.com/browse/echarts/
打开后界面如下图所示：

默认展示的也是当前的最新版本5.4.2，可以通过标记①处的下拉菜单切换版本。
点击标记②处的dist目录，可以打开该目录中的文件，如下图所示：

如上图所示，已经可以看到echarts.js和echarts.min.js两个文件了。

在文件名上单击鼠标右键，弹出的菜单中选择《复制链接地址》，获得如下的地址：
https://unpkg.com/browse/echarts@5.4.2/dist/echarts.js
将路径汇总的browse删除掉，最终地址是：https://unpkg.com/echarts@5.4.2/dist/echarts.js
然后将修改后的地址引入到HTML页面中，如下代码示例所示：

如果脚本地址中没有指定版本号的话，那么使用的就是最新版本，如果指定的话，就使用的是指定的版本。
参考示例：demo03.html

3、cdnjs

地址：https://cdnjs.com/libraries/echarts
打开后界面如下图所示：

默认展示的同样也是当前的最新版本5.4.2，可以绿色框圈起来的Version下拉菜单进行版本的切换。
下方显示的就是相关的文件，根据我们的实际需要复制相关的链接，然后引入到HTML页面中即可。
可以注意到，其中第一个链接颜色和其他的不同，文件名是echarts.min.js，这个刚好就是生产环境中要用到的脚本文件了。
下面是使用的示例代码：

参考示例：demo04.html

4、小结

通过以上3个CDN的演示，基本上获取ECharts脚本的方式大同小异，无非就是找到所需要的对应版本，以及脚本的URL地址，然后将其通过<script>标签将其引入到HTML中。

四、从NPM获取

如果开发环境使用了npm包管理工具，并且使用webpack等打包工具进行构建，可以使用如下的方式安装和引用ECharts。
可以使用如下命令通过npm安装ECharts。

npm install echarts --save
npm install echarts --save -registry=https://registry.npm.taobao.org

上述命令安装的是最新版本的，如果要安装特定版本，可以使用如下命令：

npm install echarts@5.4.2 --save

五、在线定制

前面介绍的几种方式都是将整个echarts引入到前端项目中，有些时候我们用不了那么多内容，可以通过在线定制功能进行定制，以便减少包的体积。
在线定制地址：https://echarts.apache.org/zh/builder.html
在浏览器中打开上面的网址，页面如下所示：

如上图所示的下拉菜单，可以选择需要使用到的版本，默认显示的仍然是最新版本。
紧接着选择需要使用到的图表，如下图所示：

用到那些图表就选择那些图表，在图表上单击鼠标左键即可，如果图表没有选中则会将其选中，如果选中了，则会取消选中。
继续往页面的下方浏览，就可以选择坐标系了。如下图所示：

同样也是通过鼠标左键单击进行选中和取消选中的操作。
紧接着可以选择使用到的组件，如下图所示，各个组件的意义应该看着还是比较清晰明确的。

最后就是其他选项上的选择了，如下图所示：

特别说明的是《代码压缩》这个选项，通常情况下可以勾选的下载一份，不勾选的下载一份。不勾选此项下载的是没有经过压缩的代码，在开发的时候使用，便于代码的调试；而代码压缩的版本可以放到生产环境中，这样的体积会更小一些，易于下载访问。
做好以上的配置之后，点击《下载》按钮，会打开一个新的页面进行编译：

稍等片刻编译完成后，就会生成一个JS文件，并自动开始下载。