Echart本地部署

参考地址：https://zhuanlan.zhihu.com/p/671370867

• 下载源码

    创建一个Echarts的文件夹，然后将echarts-doc、echarts-examples、echarts-handbook、echarts-theme-builder、echarts-website、echarts-www6个仓库的代码下载到该文件夹下

Github仓库地址如下，不过国内好像下载很慢，可以去Gitee上找很多人下载过的

https://github.com/apache/echarts-website.git
https://github.com/apache/echarts-www.git
https://github.com/apache/echarts-examples.git
https://github.com/apache/echarts-doc.git
https://github.com/apache/echarts-theme-builder.git
https://github.com/apache/echarts-handbook.git

Gitee上仓库地址

https://gitee.com/randomGood/echarts-doc.git
https://gitee.com/yzjia0827/echarts-examples.git
https://gitee.com/zldx_918/echarts-handbook.git
https://gitee.com/yzjia0827/echarts-theme-builder.git
https://gitee.com/yzjia0827/echarts-website.git
https://gitee.com/yzjia0827/echarts-www.git

• 开始构建

echarts-handbook

进入echarts-handbook，首先我们npm i安装依赖，然后打开configs/config.localsite.js，修改配置；这里我们需要确定最后的服务器的IP和端口端口，比如这里笔者就使用8070端口：

export default {
    routerBase: '/echarts-website/handbook',
    // rootPath: 'http://localhost/echarts-website/handbook',//改这里
    rootPath: 'http://localhost:8070/handbook',//改这里
    // exampleViewPath: 'http://localhost/echarts-website/examples/${lang}/view.html?c=',//改这里
    exampleViewPath: 'http://localhost:8070/examples/${lang}/view.html?c=',//这个地方修改了端口取消了echarts-website层级
    // exampleEditorPath: 'http://localhost/echarts-website/examples/${lang}/editor.html?c=',//改这里
    exampleEditorPath: 'http://localhost:8070/examples/${lang}/editor.html?c=',//这个地方修改了端口取消了echarts-website层级
    // mainSitePath: 'http://localhost/echarts-website/',//
    mainSitePath: 'http://localhost:8070/',////这个地方修改了端口取消了echarts-website层级
    // optionPath: 'http://localhost/echarts-website/option.html#',//
    optionPath: 'http://localhost:8070/option.html#',//这个地方修改了端口取消了echarts-website层级
    gitRepo: 'apache/echarts-handbook'
}

最后执行npm run build:localsite构建，如果出现下面的日志就说明构建成功了：

echarts-examples

注意：如果出现如下警告“asset size limit: The following asset(s) exceed the recommended size limit”

修改config.env.localsite.js 添加performance: {    hints: false},如下图

添加后重新编译，如果出险下图表示编译成功

echarts-doc

进入echarts-doc，还是npm i安装依赖，修改config/env.localsite.js，还是改成需要部署的主机IP和端口号

module.exports = {
    //原来
    // galleryViewPath: 'http://localhost/echarts-website/examples/${lang}/view.html?c=',
    // galleryEditorPath: 'http://localhost/echarts-website/examples/${lang}/editor.html?c=',
    // handbookPath: 'http://localhost/echarts-website/handbook/${lang}/',
    //新，修改了端口号，取消了echarts-website/路径
    galleryViewPath: 'http://localhost:8070/examples/${lang}/view.html?c=',
    galleryEditorPath: 'http://localhost:8070/examples/${lang}/editor.html?c=',
    handbookPath: 'http://localhost:8070/handbook/${lang}/',
    websitePath: './',

    imagePath: 'asset/img/',
    gl: {
        imagePath: 'asset/gl/img/'
    },

    releaseDestDir: path.resolve(__dirname, '../../echarts-website'),
    ecWWWGeneratedDir: path.resolve(__dirname, '../../echarts-www/_generated')
};

打开echarts-doc/build.js，在public后添加zh，否则会提示找不到public/js/doc-bundle.js文件。

注意：运行echarts-doc 时会报错找不到public/js/doc-bundle.js 和public/css，需要在 build.js文件中 给public补上 /zh 。

然后执行npm run localsite进行构建，如果出现下面的日志就说明构建成功了

echarts-www

进入echarts-www目录，执行npm i安装依赖

注意：1、这个有可能会python的错误  你去官网下载python进行安装即可，安装时不要使用最新的，最新的安装后还是会报同样的错，我使用的是python-3.10.5，安装时候选中添加到环境变量，不然自己要配置环境变量。命令行python --version检查是否安装成功，如果看环境变量已经有，但是运行python --version看不到版本号，就重启电脑

const path = require('path');
const config = require('./common');
// 原来
config.host = 'http://localhost/echarts-website';
//新：修改了端口取消了echarts-website
config.host = 'http://localhost:8070';// 改这里，注意后面不带斜杠
// config.host = 'http://localhost:8000/echarts/echarts-website';

config.cdnPayRootMap = {
    zh: config.host,
    // 原来
    // en: 'http://localhost/echarts-website'// 改这里，注意后面不带斜杠
    //新：修改了端口取消了echarts-website
    en: 'http://localhost:8070'
};
config.cdnFreeRootMap = {
    zh: config.host,
    en: config.host
};
// 原来
// config.galleryPath = 'https://echarts.apache.org/examples/';// 改这里
//新修改了端口
config.galleryPath = 'https://localhost:8070/examples/';
config.releaseDestDir = path.resolve(__dirname, '../../echarts-website');

module.exports = config;

然后执行npm run localsite构建，本次构建过程比较长，如果出现下面的日志就说明构建成功了：
注意：npm i成功后，运行可能会报“ 'bash'不是内部或外部命令”，那就跳转到echarts-www文件夹内，右键选择git bash here（需要安装git），然后运行npm run localsite 

运行成功后如下图

启动服务

上面所有仓库构建完成后，我们回到echarts-website目录，这里我们可以通过一个简易方便的node服务器工具来启动服务器，-p参数可以用来指定端口号：

//编译服务
$ npm i -g http-server
//启动服务
$ http-server -p 8070 

我们打开服务器的地址localhost:8070，这边可以换成你自己的服务器IP+端口，就可以看到Echarts文档了，很多示例和手册都是可以正常查看的，打开某一个具体的示例也能看到效果，和Echarts官网简直是一毛一样，内网访问基本就是秒开了：

注意：如果输入localhost:8070还是会跳转一下localhost:8070/echarts-website导致404错误的话 直接手动删除echarts-website即可

脚本启动

编写bat文件方便启动服务，注意：如果有路径有中文，就要将文件保存成ANSI不要保存成utf8

cd E:\code\个人\echarts\echarts-website
E:
http-server -p 8070
PAUSE

启动后如下图