# echarts-website-compile

**Repository Path**: amitu/echarts-website-compile

## Basic Information

- **Project Name**: echarts-website-compile
- **Description**: 使用Apache ECharts官方提供的官网源码构建本地ECharts官网，这样就可以在内网使用了。所有教程和资源均来自于ECharts官网。官网地址见开源协议上方。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master-local-cdn
- **Homepage**: https://echarts.apache.org
- **GVP Project**: No

## Statistics

- **Stars**: 10
- **Forks**: 3
- **Created**: 2022-05-19
- **Last Updated**: 2025-08-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Echarts, 官网

## README

如果公司是内网开发无法连接到互联网的同学，那么这个教程可以教你如何将Apache ECharts官网在内网搭建，这样在内网也就很丝滑的访问ECharts了，如果您是可以连接到互联网的，非常建议您访问Apache ECharts的官网去查看相关文档。

Apache ECharts官网地址：

https://echarts.apache.org

# 说明

这个工程里面的代码是我编译后的，可以直接fork到自己的仓库，然后拉取到本地，把所有文件放到tomcat或nginx运行即可。我设置的编译后的访问域名为127.0.0.1，所以如果想让其他电脑也可以进行访问，自己参考下面的教程把域名进行替换，然后编译即可。

# 准备

>   我这里的环境是windows 10，node的版本是v14.17.1。代码仓库我是直接用gitee克隆的github的源码。如果没有梯子的可以直接从我的gitee去拉取，有条件的还是非常建议去官方的github去拉取，下面我会分别贴出gitee和github地址。

注意：下载的源码必须要放在同一个目录下，我这里的演示目录为：`E:\echarts`，我将所有源码都放到了这个目录下

## - 下载echarts-www

gitee地址：https://gitee.com/junpeng-li/echarts-www

github地址：https://github.com/apache/echarts-www

## - 下载echarts-doc

gitee地址：https://gitee.com/junpeng-li/echarts-doc

github地址：https://github.com/apache/echarts-doc

## - 下载echarts-examples

gitee地址：https://gitee.com/junpeng-li/echarts-examples

github地址：https://github.com/apache/echarts-examples

## - 下载echarts-theme-builder

gitee地址：https://gitee.com/junpeng-li/echarts-theme-builder

github地址：https://github.com/apache/echarts-theme-builder

## - 下载echarts-handbook

gitee地址：https://gitee.com/junpeng-li/echarts-handbook

github地址：https://github.com/apache/echarts-handbook

# 安装依赖

## - echarts-www

进入`E:\echarts\echarts-www`目录，执行`npm install`

## - echarts-doc

进入`E:\echarts\echarts-doc`目录，执行`npm install`

## - echarts-examples

进入`E:\echarts\echarts-examples`目录，执行`npm install`

## - echarts-theme-builder

进入`E:\echarts\echarts-theme-builder`目录，执行`npm install`

## - echarts-handbook

进入`E:\echarts\echarts-handboox`目录，执行`npm install`

# 编译

编译之前我们需要修改一下域名，文件位置在`E:\echarts\echarts-www\config\env.asf.js`中，修改后的代码如下：

``` js
const path = require('path');
const config = require('./common');

config.host = 'http://127.0.0.1';

config.cdnPayRootMap = {
    zh: 'http://127.0.0.1/gh/apache/echarts-website@asf-site',
    en: 'http://127.0.0.1'
};
config.cdnFreeRootMap = {
    zh: 'http://127.0.0.1/gh/apache/echarts-website@asf-site',
    en: 'http://127.0.0.1'
};
config.galleryPath = 'http://127.0.0.1/examples/';
config.releaseDestDir = path.resolve(__dirname, '../../echarts-website');

module.exports = config;
```

如果是在linux环境中进行编译，直接进入到`echarts-www`目录下，然后执行`npm run release`命令就可以了，如果是在windows环境进行编译，编译过程如下：

1.   进入到`E:\echarts\echarts-www\bin\`，在当前位置打开CMD，输入命令`node build.js --env asf --clean`执行。
2.   进入到`E:\echarts\echarts-theme-builder`,执行`node build.js --release`
3.   进入到`E:\echarts\echarts-doc`，先执行`npm run build:site`，然后再执行`node build.js --env asf`
4.   进入到`E:\echarts\echarts-examples`，执行`npm run release`
5.   进入到`E:\echarts\echarts-www\bin`，执行`node releasePages.js`
6.   进入到`E:\echarts\echarts-www`，执行`node bin/build.js --env asf`
7.   进入到`E:\echarts\echarts-handbook`，执行`npm run build:asf`命令，然后把`E:\echarts\echarts-handbook\dist`内的所有文件拷贝到`E:\echarts\echarts-website\handbook`文件夹下。

编译完成之后把`E:\echarts\echarts-website`下的所有文件拷贝到tomcat或者nginx下就可以访问了。

如果这个教程帮助到了您，请动动您勤劳的双手点个star吧。万分感谢。

QQ：1635975742，邮箱：1635975742@qq.com