Echarts官网本地部署（失败）

下载相关源码

mkdir echarts-deploy && cd echarts-deploy
git clone https://github.com/apache/echarts-website.git
git clone https://github.com/apache/echarts-www.git
git clone https://github.com/apache/echarts-examples.git
git clone https://github.com/apache/echarts-doc.git
git clone https://github.com/apache/echarts-theme-builder.git
git clone https://github.com/apache/echarts-handbook.git

构建

这几个仓库分为主仓库（echarts-website）和子仓库（其他），我们要先构建子仓库的代码，构建成功后，脚本会将构建产物复制到 echarts-website 目录下。也就是说，echarts-website 目录就是网站的根目录，后面要注意修改配置文件中的路径。 Node版本：16.20.2 命令行：Git Bash

handbook

改配置文件 configs/config.localsite.js中的ip和端口、路径

export default {
  routerBase: '/handbook',
  rootPath: 'http://localhost:3000/handbook',
  exampleViewPath:
    'http://localhost:3000/examples/${lang}/view.html?c=',
  exampleEditorPath:
    'http://localhost:3000/examples/${lang}/editor.html?c=',
  mainSitePath: 'http://localhost:3000/',
  optionPath: 'http://localhost:3000/option.html#',
  gitRepo: 'apache/echarts-handbook'
}

打包

cd echarts-handbook
npm install
npm run build:localsite

报错 node: --openssl-legacy-provider is not allowed in NODE_OPTIONS 改 package.json 的 scripts，去掉NODE_OPTIONS=--openssl-legacy-provider

echarts-examples

改 echarts-examples/src/explore/ExampleCard.vue 中的exampleLink 函数的返回值，路径上加zh/

exampleLink() {
    const example = this.example;
    const hash = ['c=' + example.id];
    const exampleTheme = this.exampleTheme;
    example.isGL && hash.push('gl=1');
    exampleTheme && hash.push('theme=' + exampleTheme);
    'local' in URL_PARAMS && hash.push('local=1');
    'debug' in URL_PARAMS && hash.push('debug=1');
    'useDirtyRect' in URL_PARAMS && hash.push('useDirtyRect=1');
    URL_PARAMS.renderer && hash.push('renderer=' + URL_PARAMS.renderer);
    return './zh/editor.html?' + hash.join('&');
},

cd echarts-examples
npm install
npm run localsite 

npm i报错,用npm i --force解决

$ npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @lang/object-visualizer@4.2.0
npm ERR! Found: vue@2.6.14
npm ERR! node_modules/vue
npm ERR!   dev vue@"2.6.14" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^3.0.2" from @lang/object-visualizer@4.2.0
npm ERR! node_modules/@lang/object-visualizer
npm ERR!   @lang/object-visualizer@"^4.2.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: vue@3.5.14
npm ERR! node_modules/vue
npm ERR!   peer vue@"^3.0.2" from @lang/object-visualizer@4.2.0
npm ERR!   node_modules/@lang/object-visualizer
npm ERR!     @lang/object-visualizer@"^4.2.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\11594\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\11594\AppData\Local\npm-cache\_logs\2025-05-20T04_57_26_364Z-debug-0.log

echarts-doc

改 config/env.localsite.js 中的 ip 和端口、路径

const path = require('path');

module.exports = {
    galleryViewPath: 'http://localhost:3000/examples/${lang}/view.html?c=',
    galleryEditorPath: 'http://localhost:3000/examples/${lang}/editor.html?c=',
    handbookPath: 'http://localhost:3000/handbook/${lang}/',
    websitePath: './',

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

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

改 build.js文件的copySite函数（行224-225）， 给 public 补上 /zh 。否则报错找不到public/js/doc-bundle.js 和public/css，

cd echarts-doc
npm install
npm run localsite

echarts-www

改 config/env.localsite.js 中的 ip 和端口、路径

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

config.host = 'http://localhost:3000/echarts-website';
// config.host = 'http://localhost:8000/echarts/echarts-website';

config.cdnPayRootMap = {
    zh: config.host,
    en: 'http://localhost:3000/echarts-website'
};
config.cdnFreeRootMap = {
    zh: config.host,
    en: config.host
};

config.galleryPath = 'https://localhost:3000/examples/';
config.releaseDestDir = path.resolve(__dirname, '../../echarts-website');

// TODO put this in common.js
function addHostToThirdPartyLinks(links, lang, host) {
    const newLinks = {};
    for (let key in links) {
        newLinks[key] = `${host}/${lang}/${links[key]}`;
    }
    return newLinks;
}
config.cdnThirdPartyCN = addHostToThirdPartyLinks(config.cdnThirdPartyCN, 'zh', config.host);
config.cdnThirdParty = addHostToThirdPartyLinks(config.cdnThirdParty, 'en', config.host);

module.exports = config;

打包

cd echarts-www
npm install
npm run localsite

报错

Error: Cannot find module 'uglify-js'
Require stack:
- D:\Documents\vscodeSpace\echarts-local\echarts-theme-builder\build.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1028:15)
    at Function.Module._load (node:internal/modules/cjs/loader:873:27)
    at Module.require (node:internal/modules/cjs/loader:1100:19)
    at require (node:internal/modules/cjs/helpers:119:18)
    at Object.<anonymous> (D:\Documents\vscodeSpace\echarts-local\echarts-theme-builder\build.js:2:18)
    at Module._compile (node:internal/modules/cjs/loader:1198:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10)
    at Module.load (node:internal/modules/cjs/loader:1076:32)
    at Function.Module._load (node:internal/modules/cjs/loader:911:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'D:\\Documents\\vscodeSpace\\echarts-local\\echarts-theme-builder\\build.js'
  ]
}
Build doc ...

启动

nginx

serve

npm i serve -g

cd echarts-website
serve . -p 3000

demo看不了，文档可以